Adobe User Group Indonesia

sebelum membaca artikel ini saya sarankan anda membaca konsep tentang Augmented Reality yang telah ditulis oleh Rizal Akbar serta tutorial basic papervision yang telah saya tulis. saya sarankan juga anda memiliki pengetahuan tentang actionscript 3.0 dasar-menengah.

Alat-alat yang perlu dipersiapkan untuk menggunakan tutorial ini adalah :
1. webcam
2. marker / gambar yang nantinya akan digunakan untuk aplikasi untuk dikenali
3. library papervision3d yang saya gunakan adalah Papervision3D 2.1.920 dapat di download dari sini
4. library FLARToolKit yang digunakan adalah versi 0.9.1 (versi lain menggunakan library yang berbeda pula jadi artikel ini dapat digunakan hanya untuk FLARToolkit versi 0.9.1) dapat di download dari sini

yang akan pertama kali kita lakukan adalah menampilkan video yang di capture oleh webcam

package  
{
	import flash.display.Sprite;
	import flash.media.Camera;
	import flash.media.Video;
	/**
	 * ...
	 * @author aditya hadiwijaya
	 */
	public class webcam extends Sprite
	{
		private static const HEIGHT:Number = 600;
		private static const WIDTH:Number = 800;
		private static const FPS:Number = 15;
		private var vid:Video;
		private var cam:Camera;
		
		public function webcam() 
		{
			vid = new Video(WIDTH, HEIGHT);
			cam = Camera.getCamera();
			cam.setMode(WIDTH, HEIGHT, FPS);
			vid.attachCamera(cam);
			addChild(vid);
		}
		
	}

}

setelah itu inisialisasi flartoolkit untuk memproses data gambar dari video yang telah di tangkap oleh webcam.

[Embed(source = "assets/camera_para.dat", mimeType = "application/octet-stream")]
private var params:Class;

camera_para adalah file parameter yang memperbaiki lensa distorsi pada webcam. File ini juga ada pada library ARToolkit.

[Embed(source = "assets/marker16.pat", mimeType = "application/octet-stream")]
private var pattern:Class;

marker
marker adalah pattern yang diperlihatkan ke webcam anda. marker inilah yang nantinya dikenali oleh flartoolkit.

cara membuat marker?

1. buat kotak sebesar 80X80 mm serta garis setebal 40mm. lalu pada kotak itu dapat diletakkan pattern yang anda inginkan
2. kunjungi web berikut

http://flash.tarotaro.org/ar/MarkerGeneratorOnline.swf

3. dibawah mode select terdapat combo box, pilih load marker image. anda akan melihat file marker yang telah anda buat pada step 1 lalu klik tombol Get Pattern setelah itu pada windows Preview Pattern klik tombol save

setelah itu letakkan pattern yang telah di save ke dalam project anda.

Fungsi setupFlar

private function setupFlar():void {
			fparams = new FLARParam();
			fparams.loadARParam(new params() as ByteArray);
			fparams.changeScreenSize(WIDTH, HEIGHT); // besarnya ukuran video yang nantinya akan di proses
			mpattern = new FLARCode(16, 16); // marker segments pada marker yang telah anda buat
			mpattern.loadARPatt(new pattern());
}

fparams.changeScreenSize(WIDTH, HEIGHT); // besarnya ukuran video yang nantinya akan di proses
mpattern = new FLARCode(16, 16); // marker segments pada marker yang telah anda buat

fungsi setupBitmapData

private function setupBitmapData():void {
			bitmapData = new BitmapData(WIDTH, HEIGHT);
			bitmapData.draw(vid); // mengambil bitmap data dari video yang telah dicapture oleh webcam
			raster = new FLARRgbRaster_BitmapData(bitmapData);
			detector = new FLARSingleMarkerDetector(fparams, mpattern,80); //
marker detector untuk single marker. untuk inisialisasi membutuhkan flarparam yang telah diinisialisasi pada fungsi sebelumnya, pattern yang telah dibuat, dan besarnya pattern yang telah dibuat. 80 maksudnya adalah 80mm
		}

bitmapData.draw(vid); // mengambil bitmap data dari video yang telah dicapture oleh webcam
detector = new FLARSingleMarkerDetector(fparams, mpattern,80); //
marker detector untuk single marker. untuk inisialisasi membutuhkan flarparam yang telah diinisialisasi pada fungsi sebelumnya, pattern yang telah dibuat, dan besarnya pattern yang telah dibuat. 80 maksudnya adalah 80mm

fungsi setupPapervision3d
untuk setup papervision sebaiknya anda membaca artikel sebelumnya tentang papervision

private function setupPapervision3d():void {
			scene = new Scene3D();
			camera = new FLARCamera3D(fparams); // camera tidak menggunakan default camera papervision 3d tetapi menggunakan camera papervision3d versi flartoolkit yang telah dioptimalisasi untuk flartoolkit. untuk menginisialisasinya dibutuhkan FLARParam yang telah kita inisialisasikan pada fungsi sebelumnya. 
			container = new FLARBaseNode(); // adalah sebuah display object 3d papervision3d. disini transformasi matrix yang telah didapat dari marker detektor disesuaikan agar hasil augmented yang dihasilkan terlihat benar misalnya ketika kita miringkan ke kiri object 3d ikut miring ke kiri.

			scene.addChild(container);
			
			var sphere:Sphere = new Sphere(null, 30, 100, 50);
			container.addChild(sphere);
			
			bre = new BasicRenderEngine();
			trans = new FLARTransMatResult();
			viewport = new Viewport3D(WIDTH, HEIGHT)
			addChild(viewport);
		}

camera = new FLARCamera3D(fparams); // camera tidak menggunakan default camera papervision 3d tetapi menggunakan camera papervision3d versi flartoolkit yang telah dioptimalisasi untuk flartoolkit. untuk menginisialisasinya dibutuhkan FLARParam yang telah kita inisialisasikan pada fungsi sebelumnya.
container = new FLARBaseNode(); // adalah sebuah display object 3d papervision3d. disini transformasi matrix yang telah didapat dari marker detektor disesuaikan agar hasil augmented yang dihasilkan terlihat benar misalnya ketika kita miringkan ke kiri object 3d ikut miring ke kiri.

setelah itu fungsi untuk melakukan cek ada atau tidaknya marker pada webcam secara terus menerus

private function loop(e:Event):void {
			bitmapData.draw(vid);
			try{
				if (detector.detectMarkerLite(raster, 80) && detector.getConfidence() > 0.5) {
					viewport.visible = true;
					detector.getTransformMatrix(trans);
					container.setTransformMatrix(trans);
					bre.renderScene(scene, camera, viewport);
				} else {
					viewport.visible = false;
				}
			} catch (e:Error){}
		}

fullscript

package  
{
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.utils.ByteArray;
	import org.libspark.flartoolkit.core.FLARCode;
	import org.libspark.flartoolkit.core.param.FLARParam;
	import org.libspark.flartoolkit.core.raster.FLARRaster_BitmapData;
	import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
	import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
	import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
	import org.libspark.flartoolkit.pv3d.FLARBaseNode;
	import org.libspark.flartoolkit.pv3d.FLARCamera3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	
	
	/**
	 * ...
	 * @author aditya hadiwijaya
	 */
	public class flar extends Sprite
	{
		[Embed(source = "assets/marker16.pat", mimeType = "application/octet-stream")]
		private var pattern:Class;
		[Embed(source = "assets/camera_para.dat", mimeType = "application/octet-stream")]
		private var params:Class;
		
		private var vid:Video;
		private var cam:Camera;
		
		private var fparams:FLARParam;
		private var mpattern:FLARCode;
		private var bitmapData:BitmapData;
		private var raster:FLARRgbRaster_BitmapData;
		private var detector:FLARSingleMarkerDetector;
		
		private var scene:Scene3D;
		private var camera:FLARCamera3D;
		private var container:FLARBaseNode;
		private var bre:BasicRenderEngine;
		private var trans:FLARTransMatResult;
		private var viewport:Viewport3D;
		
		private var object:Sprite;
		
		private static const HEIGHT:Number = 600;
		private static const WIDTH:Number = 800;
		private static const FPS:Number = 15;
		public function flar() 
		{
			setupFlar();
			setupWebcam();
			setupBitmapData();
			setupPapervision3d();
			addEventListener(Event.ENTER_FRAME, loop);
		}
		private function setupWebcam():void {
			vid = new Video(WIDTH, HEIGHT);
			cam = Camera.getCamera();
			cam.setMode(WIDTH, HEIGHT, FPS);
			vid.attachCamera(cam);
			addChild(vid);
		}
		private function setupFlar():void {
			fparams = new FLARParam();
			fparams.loadARParam(new params() as ByteArray);
			fparams.changeScreenSize(WIDTH, HEIGHT);
			mpattern = new FLARCode(16, 16);
			mpattern.loadARPatt(new pattern());
		}
		private function setupBitmapData():void {
			bitmapData = new BitmapData(WIDTH, HEIGHT);
			bitmapData.draw(vid);
			raster = new FLARRgbRaster_BitmapData(bitmapData);
			detector = new FLARSingleMarkerDetector(fparams, mpattern,80);
		}
		private function setupPapervision3d():void {
			scene = new Scene3D();
			camera = new FLARCamera3D(fparams);
			container = new FLARBaseNode();
			scene.addChild(container);
			
			var sphere:Sphere = new Sphere(null, 30, 100, 50);
			container.addChild(sphere);
			
			bre = new BasicRenderEngine();
			trans = new FLARTransMatResult();
			viewport = new Viewport3D(WIDTH, HEIGHT)
			addChild(viewport);
		}
		private function loop(e:Event):void {
			bitmapData.draw(vid);
			try{
				if (detector.detectMarkerLite(raster, 80) && detector.getConfidence() > 0.5) {
					viewport.visible = true;
					detector.getTransformMatrix(trans);
					container.setTransformMatrix(trans);
					bre.renderScene(scene, camera, viewport);
				} else {
					viewport.visible = false;
				}
			} catch (e:Error){}
		}
		
	}

}

hasil jadi

cara menggunakan
1. pasang webcam pada komputer anda instal drivernya bila dibutuhkan
2. pada jendela notification klik tombol allow
3. unduh file marker dari artikel di atas
4. print atau tampilkan pada handheld anda jika ukurannya mencukupi (saya menggunakan motorola droid 2 untuk menampilkan markernya)
5. arahkan ke webcam anda sehingga marker logo augi terlihat jelas pada webcam
6. akan terlihat lingkaran dengan wireframe diatas marker yang anda tunjukkan pada webcam

source code

http://augindonesia.org/host/beblank/FLARToolkit.rar