เริ่มต้นกับงาน Augmented Reality

อ่านตามหนังสือเกี่ยวกับเทคโนโลยีของเมืองนอกหลายๆเล่ม เห็นเค้าว่า AR (Augmented Reality) กำลังมาแรงในช่วงนี้ เลยอยากลองทำดูว่ามันเป็นยังงัยน้า...มันเจ๋งจริงหรือเปล่าแล้วมันเจ๋งยังงัย เริ่มแรกก็เลยไปหาดู Youtube ก่อนว่าเป็นยังงัยกับเจ้า AR เนี่ยก็พอได้พอเห็นภาพลางๆว่ามันใช้ประโยชน์อะไร ซึ่ง AR มันก็คือการจะลองภาพจากจิตนาการมาให้เราเห็นในรูปแบบ 3D หรือวิดีโอ หรืออะไรก็ได้ที่ให้ผู้ชมได้เห็นภาพชัดเจนยิ่งขึ้นนั่นเอง อย่างเช่นตัวอย่างของ Lego ครับ เค้านำ AR มาใช้เพื่อให้ลูกค้าที่สนใจสินค้าของ Lego ได้เห็นตัวต่อข้างในก่อนเมื่อต่อเสร็จแล้วในรูปแบบของ 3D ที่สามารถหมุนดูได้รอบตัวทุกซอกทุกมุม เพื่อให้ลูกค้าที่เลือกซื้อสามารถเห็นสินค้าโดยที่ไม่ต้องแกะกล่อง แถมยังลด Cost ของทาง Lego เองที่ไม่ต้องนำตัวอย่างไปตั้ง ณ จุดขายให้เปลืองสตางค์ ซึ่ง Lego จะมีบริการเหล่านี้ ณ จุดขาย Lego ตามห้างต่าง (ไม่รู้ว่าบ้านเราจะมีรึยัง เพราะผมไม่ค่อยได้เดินห้างฯเท่าไหร่ ^^)

วิดีโอตัวอย่างของ Lego ครับ

หลังจากที่ได้ลองหาตัวอย่าง Sourcecode ตามเว็บไซด์ต่างๆที่เขียนด้วย Flex ดูแล้ว ก็พบว่าหลายๆตัวอย่างเช่นของ Saqoocha ก็พบว่า Starter Kid ซึ่งมันจะแสดงผลได้เพียง 1 Marker ต่อ 1 การแสดงผล เท่านั้น ซึ่ง Sourcecode ที่ได้มาก็จะเป็นประมาณนี้ครับ

package

{

import flash.display.Bitmap;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.media.Camera;

import flash.media.Video;

import flash.ui.Mouse;

import org.ascollada.*;

import org.ascollada.namespaces.collada;

import org.papervision3d.cameras.Camera3D;

import org.papervision3d.core.utils.Mouse3D;

import org.papervision3d.events.FileLoadEvent;

import org.papervision3d.materials.BitmapFileMaterial;

import org.papervision3d.materials.utils.MaterialsList;

import org.papervision3d.objects.parsers.DAE;

import org.papervision3d.render.LazyRenderEngine;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.view.Viewport3D;

import org.papervision3d.view.stats.StatsView;

//import org.libspark.flartoolkit.core.param.FLARParam;

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

public class Earth extends PV3DARApp {

private var stats:StatsView;

private var renderer:LazyRenderEngine;

private var viewport:Viewport3D;

private var cam:Camera3D;

private var scene:Scene3D;

private var webcam:Camera

private var video:Video

//private var _earth:Collada;

private var _earth:DAE;

public function Earth() {

addEventListener(Event.INIT, _onInit);

init('Data/camera_para.dat', 'Data/flarlogo.pat');

//this.cameraParamFile = 'data/camera_para.dat';

//this.markerPatternList = new Vector.<FLARCode>();

//this.markerPatternFileList = new Vector.<String>();

//this.markerPatternFileList.push('data/flarlogo.pat','data/NECTEC.pat','Papervision.pat');

//_raster = new FLARRgbRaster_BitmapData(_capture.bitmapData);

}

private function _onInit(e:Event):void

{

_earth = new DAE();

_earth.load('model/earth.dae');

_earth.scale = 50;

_earth.rotationX = -270;

_earth.rotationZ = 180;

_markerNode.addChild(_earth);

//addEventListener(Event.ENTER_FRAME, _update); 

_earth.addEventListener(MouseEvent.MOUSE_OVER, _update);

}

private function _update(Event:MouseEvent):void {

_earth.rotationZ -= 0.5

}

}

}

จาก Sourcecode ที่แสดงข้างบนจะเห็นได้ว่า Application จะ init กล้อง 1 ตัว กับ Pattern 1 Marker เท่านั้น จะเป็นดังวิดีโอข้างล่างนี้ครับ

 


ซึ่ง Sourcecode ที่หามาได้ยังไม่ตรงกับจุดประสงค์ที่ต้องการเท่าไหร่เพราะหากเราต้องการที่จะแสดงผลแบบ Multimarker (หลาย Marker ต่อ 1 การแสดงผล) หรือ หลาย Marker ต่อ หลายการแสดงผล ก็จำเป็นต้องเขียนเพิ่มเติมนิดหน่อย ซึ่งจะมีให้ชมในตอนต่อไปนะครับ