Sunil’s Blog

Icon

Starscream, Boba Fett and Jabba the Hut…er…Jasmine the Cat…FlarToolkit AND 3D Animated Models with Keyboard Control

Here’s a link to the live demo to try yourself:

http://www.suniljohn.com/labs/boba/

Direct your iphone here (don’t waste paper, if you can help it!!):

Boba – http://www.suniljohn.com/labs/boba/markers/boba.jpg

Starscream – http://www.suniljohn.com/labs/boba/markers/starscream.jpg

Print the markers here:

Boba – http://www.suniljohn.com/labs/boba/markers/boba.pdf

Starscream – http://www.suniljohn.com/labs/boba/markers/starscream.pdf

There are keyboard controls for both models. ASDW to move Starscream and directional arrows to move Boba Fett. Each character also has jump, taunt and attack controls. There are about 14 other animations I haven’t had time to program.

I re-factored the earlier multimarker flar prototype to use the FLARManager 0.3 from Eric Socolofsky at transmote.com. I was able to trace out the string names of the individual 3D channels of the MD2 models I’ve been using. I can now play the individual animations I want to play instead of looping through them all.

This snippet might help those that are trying to figure out the string names of the 3d channels of their MD2 Quake 2 models:

//_channels = new Array();
// _channels = animatedBoba.getAnimationChannels();
//
// trace(”channel count”, _channels.length);
//
// for each(var channel:AbstractChannel3D in _channels) {
// _numFrames = Math.max(_numFrames, channel.keyFrames.length);
// channel.updateToFrame(_currentFrame);
// trace(”channel.name”, channel.name);
// }

I also implemented Saqoosha’s hole effect using Papervision3d, in the form of trap doors, with some slight modification to what cube faces are visible. I think this has to do flipped coordinate space, when comparing a standard PV3d scene and to the flarnode. Here’s the mod:

Instead of :

var hole:Cube = this.scene.addChild(new Cube(new MaterialsList({all: cmats, bottom: cmatb}), 300, 300, 300, 1, 1, 1, Cube.ALL, Cube.TOP)) as Cube;
this._green = this.scene.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0×00ff00)}), 300, 300, 300, 1, 1, 1, 0, Cube.TOP)) as Cube;

Changed to:

var __hole : Cube = new Cube(new MaterialsList({all: __cubeSideTexture, bottom: __cubeBottomTexture}), 80, 80, 80, 1, 1, 1, Cube.ALL, Cube.FRONT);
var __green : Cube = new Cube(new MaterialsList({all: new ColorMaterial(0×00ff00)}), 80, 80, 80, 1, 1, 1, 0, Cube.FRONT);

I went through at least 10 different asymmetrical patterns for the Starscream flar marker. Most of the time the camera would keep losing the pattern or confusing it with the Boba Fett pattern. Bad lighting and problematic marker patterns were the biggest issues.

I don’t have to use keycodes very often, but when I do it’s always a pain trying to remember what uint corresponds with what key. Here’s a snippet I picked up for using as3 to generate keycodes:

http://evolve.reintroducing.com/2008/11/21/tips-n-tricks/flash-key-codes/

The end result isn’t quite this:

starwarschess

….but each time I revisit this prototype it’s seems to be getting closer….

In the future I want to implement mac3d’s adaptive filter, to help eliminate problems with marker detection caused by poor lighting conditions.

Also what fun would spawning 3d characters  in AR be without laser canons and collision detection!?!

jasmine_jabba

FITC Toronto 2009 Top Ten Round Up

I just got back from volunteering at FITC Toronto 2009. I HIGHLY recommend volunteering. It’s a great way to attend the sessions for free and meet amazing new/old talent in the interactive field. I’ve come away from the conference with a lot of new ideas that I can’t wait to try.

Here’s my list of things that were cool to me in no particular order:

1) Papervision X – Ralph Hauwert
- 3d renderer optimized for Flash Player 10
- Ralph used Alchemy and Pixel bender to run Quake in Flash at 60 FPS!!

2) Colin Mook – Your Phone is Your Controller

- http://www.playmegaphone.com/
- http://unionplatform.com/intro.html

3) Sourcebinder
- http://sourcebinder.org/
- drag and drop node based programming
- break out game built on the fly with audience interaction using a webcam

SourBinder Tutorial: The basics from Balazs Serenyi on Vimeo.

4) Gary Stasiuk – Visual PV3d
- Flash Visualization Application that provides a GUI interface to create and manipulate objects in 3D scenes using Papervision3D

Vizual PV3D from Juxt Interactive on Vimeo.

- http://www.juxtinteractive.com/_download/vizualpv3d.zip

5) Vector Vision
- allows you to use vectors in Papervision
- http://blog.barcinski-jeanjean.com/2008/05/16/vectorsvision-vectors-in-papervision3d/
- http://www.barcinski-jeanjean.com/entries/vectorvision/SvgExample.html

6) Golan Levin and Zach Lieberman
- Augmented Reality Magic 1.0

7) Jared Ficklin
- music visualization through physical objects
- nirvana songs visualized on paper show similarities between songs; verse – chorus – verse
- showed 4 patterns and asked which one was likely a nirvana song, the one most similar was actually a foo fighters song!

8) Mario Klingemann
- bitmap manipulation turning ordinary bitmaps into Van Gogh like paintings.
- http://www.aviary.com
- using Keith Peters minimal components

9) Pixel Bender Game
- http://www.kongregate.com/games/GlaielGamer/closure

10) The Spark Project – Japanese Flash Community
- http://www.libspark.org/wiki/WikiStart/en
Photorealistic AR

Me too (doing some AR stuff)! from Anatoly Zenkov on Vimeo.

Frocessing
- Processing like AS3 drawing library
- http://www.libspark.org/wiki/nutsu/Frocessing/en

BetweenAS3
- new tween engine that performs better than the major players tweener, tween max…
- http://www.libspark.org/svn/as3/BetweenAS3/trunk

SWFWheel
- support for mac scroll wheel no javascript required
- http://www.libspark.org/wiki/SWFWheel/en

Revisiting Multiple Pattern Recognition Using the FLARMultiMarkerDetector and an iPhone

I was able to revisit the spaghetti code on my FLARMultiMarkerDetector prototype and improve performance 100 fold. Thanks to the guys at Squidder.com for sharing their source for the virtual drum kit.

Here’s a post explaining their demo.

Here’s a link to their source.

The MD2 models I’ve been using should be familiar by now and are from Polycount.

I was writing this app on the train and didn’t have a printer to print the patterns. Now I have them on my iPhone, so I can test my Flar apps where ever I happen to be.



One thing I’ve noticed, is that if you cutting the patterns out or are displaying them on an iPhone it seems you have to leave a white margin in addition to the black border for the pattern to be recognized.

My Cat and Multiple Pattern Recognition Using FLARMultiMarkerDetector – FlarToolKit/Flash Augmented Reality

I’ve been experimenting with how Flash and FlarToolKit handles multiple patterns using FLARMultiMarkerDetector .  I’ve found that a lot of light is needed for the detector to work reliably with mutiple markers. Here are a couple screens of my progress so far using animated MD2 models of Boba Fett and Starscream. Thanks to my cat Jasmine for the moral support.

Goodbye Jamario Moon and Hello FlarToolkit/Flash Augmented Reality Papervision3D

With Jamario Moon being dealt away to Miami just last week, it seems fitting that I revisit an old project Paper-Robo and resurrect Paper Jamario Moon.

I finally got a chance to sit down and play with FlarToolkit. For those unfamiliar, FlarToolkit is a open source library that allows you to manipulate 3D objects using a pattern (like QR codes), a webcam and Flash.

Thanks to Mikko Haapoja and Saqoosha for some awesome start up guides:

http://www.mikkoh.com/blog/?p=182

http://saqoosha.net/en/flartoolkit/start-up-guide/

I had to jump through some Flex hoops to get through some of the demo examples to work. Apparently you can only use the following syntax in Flex to embed binary files:

“[Embed(source="../lib/mypattern.pat", mimeType="application/octet-stream")]”

Since I haven’t used Flex before (I use FDT), I got around embedding these camera calibration and pattern binary files by using loaders. If you are using loaders, be sure to add MIME types on your server for .dat and .pat files. Other than that I didn’t change the original source code too much, other than replacing the basic cube primitive with a collada model. I also threw in some animated MD2 quake models (Boba Fett and Starscream) for good measure.

Briefly to use this library you need two binary files, a calibration file “.dat” for a webcam and a pattern file “.pat” representing your printed pattern. You specify a desired accuracy, and using a detector class you can determine if the marker is FOV of the camera. If the marker is detected you add whatever 3D object you want to a Flarbasenode, which is a Papervision3D Display Object. The Flarbasenode can then be translated/rotated using information from the detector class.



Screenshot of Jamario Demo

Screenshot of Jamario Demo

Try it yourself:

Download and print pattern

Test the application here (Webcam required)

Here is some sample code and other resources to jump start your Augmented Reality project:

Here’s a good repo of free animated MD2 models Project:

http://polycount.com/models/quake2/

Sample Code:

http://www.mikkoh.com/blog/wp-content/uploads/2008/12/learningflartoolkit.zip

http://www.boffswana.com/news/wp-content/uploads/augmentedreality/AR_dev_source.zip

Air application to make binary marker files:

http://saqoosha.net/lab/FLARToolKit/MarkerGenerator/MakerGenerator.air

About Me

I'm currently a Flash Developer at Fuel Industries in Ottawa, Ontario. This blog is a resource library and journal, researching emerging new media and whatever else I see fit. Some of my student work.

Twitter

My Nike+ Stats