Getting started with Augmented Reality and the FlarToolKit

20 Setup PV3D
Create a new function called setupPV3D and create a new Scene instance along with the new FLARCamera3D passing in the fparams variable. Add a new instance or FLARBaseNode for the container then add the container to the scene.

private function setupPV3D():void
{
scene = new Scene3D();
camera = new FLARCamera3D(fparams);
container = new FLARBaseNode();
scene.addChild(container);

21 Lighting
As with all 3D objects they need lighting to bring them to life, so create a new PointLight3D then set the lights y and x to 1,000 and then the z to -1,000. Next create a new material to wrap around the 3D object and assign the material2.jpg. Then assign the material to a material list to be passed to the cube which you are creating next.

var pl:PointLight3D = new PointLight3D();
pl.x = pl.y = 1000;
pl.z = -1000;
var matt:BitmapMaterial = new BitmapMaterial(((new Matt()) as Bitmap).bitmapData);
var ml:MaterialsList = new MaterialsList({all:matt}); scene.addChild(container);

22 Cube
Create a new Cube passing in the material and then the sizes for the width, depth and height. Place the cube on the z axis at 100 pixels then add the cube to the container you just created a couple of steps ago.

var cube:Cube = new Cube(ml, 50,50,50);
cube.z = 100;
container.addChild(cube);

23 Render
Next on the list is to create a new instance of the rendering engine, then a new instance of the FLARTransMatResult which returns the 3D transformation object which we apply to our 3D scene. Lastly create a new Viewport3D instance and add to the displaylist using addChild.

bre = new BasicRenderEngine();
trans = new FLARTransMatResult();
vp = new Viewport3D();
addChild(vp);

24 Loop
This is the last function you will create, and one of the most important because without it your 3D object will not move with the pattern. So draw the video using the bitmapData object you created earlier, and then wrap the next statement in a try – catch handler. Then check to see if the pattern has been matched. If it has then get the transformation matrix and set it to the container. Lastly render the new scene.

private function loop(evt:Event):void
{
bmd.draw(vid);
Check to see if it matches the pattern:
try
{
if(detector.detectMarkerLite(raster,
80) && detector.getConfidence()> 0.5)
{
Get transform matrix:
detector.getTransformMatrix(trans);
Set transformation matrix:
container.setTransformMatrix(trans);
Render 3D:
bre.renderScene(scene, camera, vp);

}

} catch(e:Error){}
}

}
}

25 Test

Save all of your work and then all that’s left to do is test your movie. Move the printed pattern (found on page 54) in front of your webcam and see the cube move with you. It should follow the pattern around the screen and rotate as you reposition it. We have gone through all this pretty quickly, but it will give you the basis to start adding more complex models. We will take a look at adding a 3D Collada model in the boxout.

www.webdesignermag.co.uk/news/augmented-reality/

INSTRUCTIONS TO TEST:
Head to our blog URL listed above and follow from there to visit the live project. In your chosen Flash-enabled browser click allow to enable web camera access when prompted. Hold this page clearly and directly in front of your webcam – within a rough distance of 25 inches. You should see the cube object hovering above the centre marker, moving and rotating with the page.

(This article originally appeared in issue 158, authored by Darren Richardson)

Pages: 1 2 3 4 5