Getting Started with Augmented Reality (FLARToolkit).
If you have been following me on Twitter, then you may have noticed that I have been getting into Augmented Reality. This is the coolest thing I have seen in a long time! Now if you don’t know what this is, then it is a means of mapping 3D objects to a marker in the real world through a web cam.
Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.
The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!
Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.
If you can run the example yourself, here is a video of it in action.
FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.
I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:
package { import com.harrynorthover.ar.flar.base.FLARSingleMBase; import flash.filters.BlurFilter; import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.shadematerials.FlatShadeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.primitives.Cube; [SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")] public class Demo_BaseClass_Test extends FLARSingleMBase { private var cube:Cube; public function Demo_BaseClass_Test() { /*This is the function 'Init' you need to call to setup the FLARToolkit scene. WIDTH, HEIGHT, FRAMERATE*/ Init(640, 480, 30); } /* ... This function is the one you need to override to add things to your 3D scene. */ override protected function add3D():void { // Add you 3D stuff here. The more the better :-) var pl:PointLight3D = new PointLight3D(); pl.z = -1000; pl.y = 1000; pl.x = 1000; pl.flipped = true; //var blurFilter:BlurFilter = new BlurFilter(24, 12, 1); var matList:MaterialsList = new MaterialsList(); var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl); matList.addMaterial(fsm, "all"); cube = new Cube(matList, 60, 60, 60, 5, 5, 5); //cube.useOwnContainer = true; //cube.filters = [blurFilter]; // FLAR_Container is the FLARBaseNode that you // add your 3D objects to. FLAR_Container.addChild(cube); } /* ... This is the function to which you override to add your 3D animation. */ override protected function addAnimation_3d():void { //Add you animation here. cube.yaw(10); } } }
See? Lots of code that has been got rid of!
Other demos I have been working on are here:
FLAR + Lines3D:
FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.
Incorporating AS3DMod:
FLAR + As3DMod from Harry Northover on Vimeo.
So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.
Happy ARing!
19 comments
To Harry,
First of all thanks for what you have shared to me….i am very new in this field about Flex, Papervision3D & Flartoolkit stuffs…..I have done some 3d models & flash animation files but i would like to know how to embed those 3dmax file & Flash animation file into augmented reality project Please kindly reply….awaiting to your help Aoody
Ah, Mikko has a great article on importing Collada file over here, http://www.mikkoh.com/blog/?p=227 .
Let me know if you need anymore help :-)
Hi..harry…
Great work.
Harry , actually i’m new to this augumented reality. I’m a java developer.We want to develop a simple application on augumented reality.Please provide some idea.
A java developer can do this or , do i need to know some other technologies.
Thanks in advance.
Srikanth G
Hey Srikanth,
FLARToolkit was actually ported from a Java version of the ARToolkit so pretty much all the same functionality is available through both Flash/AS and Java.
The project is class NyARToolkit and can be found here, http://nyatla.jp/nyartoolkit/wiki/index.php?NyARToolkit%20for%20Java.en .
Good luck with you work!
Harry.
Hello Harry,
Nice demos!
You know how I am export collada with animations? All the collada files are static when I compile.
They have animations in Blender but when I compile the movie all shows are static without animations.
Thanks mate!
I hope you help me!
Hi Aloysio,
I’m not entirely sure how to fix you problem, here is something that might be able to help you out, http://sleepydesign.blogspot.com/2008/08/away3d-collada-animation-blender.html .
If not, let me know and I’ll do my best!
H
hi
i have just a question
how import an animation made with 3ds max?????
please explain me:)
i have a newbie problem i guess, can anyone help me?
I have this type error:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at com.harrynorthover.ar.flar.base::FLARSingleMBase/::setupFLAR()
at com.harrynorthover.ar.flar.base::FLARSingleMBase/com.harrynorthover.ar.flar.base:FLARSingleMBase::Init()
at SimpleCube$iinit()
Hi Harry,
Thanks for the instructions and demos.
Just wanted to show you the 3d anaglyph demo you inspired me to make.
http://secd.unl.edu/~mbentz/bentz/Welcome.html
If you get multiple markers going, would you please share.
Cheers!
oops! wrong web page, here is the correct one.
opps!
this one:
http://secd.unl.edu/~mbentz/flart_example/SimpleCube.html
where is the global action script folder? could anyone tell me.
Hi shovan,
The global Actionscript folder is a folder you create to store all the Actionscript classes you download. It’s not necessary to have one but if you are using a lot of different classes/engines(Away3D, etc..) then it is best to have one.
Basically to create one, you just create a new folder anywhere you want it to be, put all your external AS files in there and then add this folder to your global Actionscript paths in Flash.
H.
Thank you for a great blog.
Thanks alot for the great read.
Hey Harry, im messing with flartoolkit at the moment and wondered if you could help me a little, would be much appriciated.
Im basicly trying to make an augmented reality graffiti app to use in public spaces, and im having a bit of trouble getting line3D to work, is the source availible for your line3D example? if not a point in the right direction would be cool.
Thanks in advance, Adam
Harry
Preciso de uma ajuda!
Todo modelo que faço no formato. Aramado em dae aparece no flartoolkit.
O que pode estar errado?
Grato!
Harry
Preciso de uma ajuda!
Todo modelo que faço no formato “.dae” fica aramado no flartoolkit.
O que pode estar errado?
Grato!
I love the lines demo. Keep up the good work!
Leave a Comment