AR Particle Beam

So I thought it was about time I jumped on the augmented reality bandwagon. Rather than the obligitory 3D model I decided to make something a little different. I’ve used 3D lighting techniques and physics here to create this beam of light surrounded by strange celestial light particles.

If you would like to interact with it, first download and print out the marker here then go here for a live demo.

Incidentaly while making this, John Lindquist started an augmented reality competition on the Papervision forum. I’ve decided to enter it (hence the Papervision Logo on my marker – rules of the comp, not sucking up) so please feel free to vote for me on the forum. 🙂

For those of you who are interested, you can download the source code here. It’s an FDT project but it shouldn’t be too difficult to convert it over to your favourite development environment.

**** UPDATE ****
Kristin Rohleder has written a Flex version of this application and kindly given it to me to share with whoever wants it. He’s used the latest version of FlarManager and TimelineMax for the animation so the performance is probably far better.

iam sorry, I dont get your source to work, not even in FDT!Proberly Iam too stupid 😛 but maybe you can upload it as an flashdevelope project or just for the normal flash environment…although its very nice!

Sorry but I’ve never used Flash Develop. With regards to Setting it up in Flash, I think you just need to remove the embed tag in App.as and use this as your document class. You also might have to download the various libraries I’ve used as Im not sure I’ve included them. They are FlarToolkit + Papervision (obviously), FLARManager and TweenMax.

Hi Maudi. Thanks for your interest in my work. Although FDT is the best Actionscript development environment available, it can be quite a process for new users to setup properly. I would suggest looking through the documentation:

Hi James, this is very cool I download your source but really couldn’t understand anything I am using Saqoosha’s start kit so working with your source is a bit different any chance of getting some help. I am trying to get the trails to load with my base node. I think once I get that down then I should be good to go.
Thanks
Almog

Hi Almog. I’m using FLARManager – see link above. Are you using FDT? If so have you used it before? If so I might be able to help you. If not, you will need to get FDT set up using ANT and Flex 4 (or 3.3) SDK. If you are a Flex or FlashDevelop user you should be able to port the code across but I will not be able to help as I do not use these platforms.

2.)And also Flex 4 SDK, I already follow the pdf that u recommended, but I can only find some SDK 3 in my options (sdk 3 pure, sdk 3 with AIR, etc.), but none of it was SDK 4. So can I import SDK 4 into the core libraries?

It sounds like you havn’t completed step 3 properly. Have you tried setting up a simple FP10 project in FDT? Just write one main class that contains a vector – var vect:Vector.; If this doesn’t work, try making a simple AS3 project to compile a swf.

Impressive work you are showing!
I’ve also been experimenting with flarmanager since a few weeks, but there are a few things that won’t work:
In the example simplecubes.as, i want the cubes to display movieclips (movieassetmaterial), any way you can help me on the code?
And I want to display a collada file, when a marker gets recognized, can you help me please?
Thanks in advance,
Dennis

Hi holopaul. Thanks for your interest. I don’t use Flex so I can’t help you. Best of luck though and if you get it working, please send me the project as I’ve had several people asking for a Flex version.

Hi jamesalliban!
I am Daniel and i’m doing a few tutorials in spanish about Augmented Reality, however the tutorials are only with static elements, so, I have a question: can you show me the light? XD Can you show me the magic behind the video animations in FALRToolKit? I don’t know if, for example, you built the video in After Effects and after that you import data in FLEX or something like that. I really will apreciate your answer.
Thank you and congratulations for your amazing video.

Thanks very much. Have you looked through the source code? It’s all in there. I didn’t do any post production in After Effects. The beams coming from the marker are images, the particles are vector graphics and the particle trails were built using code.

Hi James! Sorry for my english. i need help. tell me please, where should i place required frameworks (such as flartoolkit, papervision, and so on…) in your project. I’ve never used FDT before, only flsh cs4. thanks 🙂

Hi James,
i’ve tried to transform your fdt-project into a flex-project. i imported all libaries without a problem. but i get a papervision-problem in the class ParticleBeam.as at the method onEnterFrame() with the line _renderer.render(). it say that there is a
“TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.papervision3d.core.math::Matrix3D/calculateMultiply4x4():281]
at org.libspark.flartoolkit.support.pv3d::FLARCamera3D/transformView():126]
at org.papervision3d.core.render.project::BasicProjectionPipeline/project():29]
at org.papervision3d.render::BasicRenderEngine/renderScene():162]
at org.papervision3d.render::LazyRenderEngine/render():28]”

and my debugger says, that the calculateMultiply4x4()-method get no projection-matrix.

do you have any idea, what is wrong? or have anybody send you this fdt-project as a working flex-project?

Was a bitch to set up in flex. Note that tweenmax is version 10 not 11. 11 has some method changes that arent backwards compatible. The version of Flarmanager is an older version as well. The code being used manually sets up alot of stuff instead of using new features like “xml config file” etc. For the most part just copy files into src resources or assets folder. make sure you change your paths in the code. should work.

this is fantastic 🙂 I’m trying to get this up and running, and I am an absolute beginner, so please bare with me :)(I’m using Flashdevelop and Flex 4 sdk) I always get the error message “call to a possibly undefined method MainBeamAnim” in Beam.as, and every other file that needs something from the swc file. I have tried adding the swc file to the swc library in Flashdevelop, but no luck. Am I missing something? x.x

I wanted to ask you for permission for using part of your code here for a (very) small college project for learning purposes. I’m talking about the animation when the “paper” opens up. Slightly modified though. (it just wouldnt be the triangles and it would look more like a box, as the medium I am using is a cube with different markers on it) Of course I would give you credit 🙂 That would be great 🙂
Thank you,
Carolin

So far I think this is bullshit. I made the drawing and went for the live demo and nothing. Doesn’t work.

Kids – if you are going to put this stuff out you need to give the rest of us in internet land some step by step procedures to reproduce this. You can’t just talk about this and that without giving some specifics. For all we know it’s strictly an animation program. It’s not augmented anything.

Well, I have to admit you got me there john3. I’m actually a little relieved that at last I can reveal to the world that I’m a massive fake. The 100s of positive comments posted on my blog have actually all been me bigging myself up. Thanks for outing me.

By the way I’d love to see your drawing. Could you email it to me… if you can figure that out.

hi james im currently creating a system using c# to develop augmented reality with silverlight ..im confuse with how to create pattern file, load 3d animation into the c#..is there any advice u can give me..thanks