Augmented Reality Experiments

As many of you know, I’ve been building a custom MIDI controller using the Arduino platform. However,  I’ve run out of money for the time being 😦

So until I get paid, I decided to do what I always do when I have no money but want something technical to mess around with; turn back to the world of web development and see what exciting new tricks I can pick up. This weekend, I have been mostly messing around with; Augmented Reality.

What is Augmented Reality? Augmented Reality can be described as a combination of direct or indirect views of reality, interspliced with a virtual world. In other terms, its blending the virtual and the non-virtual.

After a weekend of reading countless blog posts I started with Saqoosha’s FLARtoolkit (FLash Augmented Reality). The FLARtoolkit is a great little bundle of mini Flash applications and uses the Papervision 3D library as a way of working a 3D plane into Flash.

The basic idea is this;

1. You have a marker, this is a cue for your webcam to recognise and track. This tracking can then be converted into a 3D plane.

2. A virtual 3D plane is created and mapped onto the marker, allowing the tracking of the marker to move an object.

3. A 3D model or object is mapped to this plane.

4. Everything is merged back on your computer screen.
Sounds easy? No? Well its not. Good things never are easy. But spend a weekend digesting the Papervision 3D classes and get a basic grasp of ActionScript 3 syntax and you’ll be fine.

Heres a little video demo:

And heres the source code modified from Saqoosha’s SimpleCube demo;

package {

// IMPORT FLASH EVENTS

import flash.events.Event;
import flash.events.MouseEvent;

// IMPORT PAPERVISION 3D COMPONENTS

import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.BitmapFileMaterial; // THIS ONE LETS US USE JPG TEXTURES, VERY IMPORTANT

//SET UP SWF SIZE, BACKGROUND COLOUR AND FRAMERATE

[SWF(width=640, height=480, backgroundColor=0x808080, frameRate=40)]

public class SimpleCube extends PV3DARApp {

// PRIVATE VARIABLES: PLANE = 3D SPACE, CUBE = AR OBJECT

private var _plane:Plane;
private var _cube:Cube;

// CUBE FUNCTION AND INITIALISE PROGRAM

public function SimpleCube() {
addEventListener(Event.INIT, _onInit);
init(‘Data/camera_para.dat’, ‘sld.pat’); //INITIALISE CAMERA PARAMETERS AND MARKER FILE SLD.PAT
}

private function _onInit(e:Event):void {

// CREATE AR PLANE THE SAME SIZE AS SWF

var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 0, 0); // CREATE MARKER WIREFRAME
_plane = new Plane(wmat, 80, 80); // 80mm x 80mm
_plane.rotationX = 180;
_markerNode.addChild(_plane); // ATTACH _markerNode TO FOLLOW MARKER

// CREATE LIGHT VARIABLE AND PLACE IN UPPER RIGHT

var light:PointLight3D = new PointLight3D();
light.x = 0;
light.y = 1000;
light.z = -1000;

// DECLARE VARIABLES FOR EACH FACE OF THE CUBE

var face_front : BitmapFileMaterial = new BitmapFileMaterial(‘faces/front.jpg’);
var face_back : BitmapFileMaterial = new BitmapFileMaterial(‘faces/back.jpg’);
var face_right : BitmapFileMaterial = new BitmapFileMaterial(‘faces/right.jpg’);
var face_left : BitmapFileMaterial = new BitmapFileMaterial(‘faces/left.jpg’);
var face_top : BitmapFileMaterial = new BitmapFileMaterial(‘faces/top.jpg’);
var face_bottom : BitmapFileMaterial = new BitmapFileMaterial(‘faces/bottom.jpg’);

// CREATE CUBE OBJECT

//var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x75104e); // Color is pink

_cube = new Cube(new MaterialsList({back:face_back, right:face_right, left:face_left, top:face_top, bottom:face_bottom, front:face_front}), 55, 55, 55);

/* CREATE A NEW MATERIALS LIST AND TELL EACH FACE TO LOOK TO THE VARIABLES DECLARED ABOVE
FOR THEIR TEXTURES. LAST THREE NUMBERS DICTATE X,Y,Z SIZE OF CUBE OBJECT
*/

_cube.z = 20; // Move the cube to upper (minus Z) direction Half height of the Cube.
_markerNode.addChild(_cube);

stage.addEventListener(MouseEvent.CLICK, _onClick);
}

private function _onClick(e:MouseEvent):void {
mirror = mirror; // FLIP CAMERA FOR MAC USERS (YOU CAN CHANGE THE = TO != TO NOT FLIP THE CAM IF YOU PREFER, WHATEVER WORKS BEST FOR YOUR CAM)
}
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s