I just got my augmented reality demo to work! It was really easy – Just one afternoon of work. To try it out you need: A webcam, a printout of this page. Click on this link and hold up your printout to your webcam in order to play with the demo.
I pretty much followed this video tutorial by The Flash Blog. It describes how to use the FLAR and Papervision 3d toolkits with Flex to detect a symbol in a video feed and map a 3D model to its plane. I just adapted his tutorial to Flash. (I’ll post my .FLA shortly)
Here were my overall steps:
- Download FLARToolkit
- Download Marker Generation tool (Air app)
- Made marker in Photoshop and printed it out
- Ran the Marker Generation app and saved a .pat pattern file
- Created FLARdemo.as class file, Flardemo.fla
-
- in the .fla, declare Flardemo object, add to display
- setupFLAR() – import .pat file
- setupCamera()
- setupBitmap() – load video feed into flartools
- setupPV3D()
- Create scene, camera, container
- create lights, materials, objects
- Create render engine, FLAR trans matrix, viewport
- Add to display list
- Create onEnterFrame event handler
- Feed video to FLAR
- test for symbol detection, if yes then,
- get and set transform matrix
- render papervision!
Some overall troubles and solutions included:
- Since in Flash, not flex, I needed to declare, create, and add to display list a FLARdemo object in my .fla file. This wansn’t described in the Flash blog tutorial.
- Also since I was working in Flash, library imports were a bit more complicated. I eventually gave up and cut/pasted from another tutorial that he was following. A less documented, but code provided tutorial is located here by a guy named Mikkoh.