sphere.png

圖1. DK01.CC 貼圖的 FLARToolKit 實作 XD (點擊上圖可下載操作影片)

 

簡介

FLARToolKit 一個為 ActionScript 3 而生的 ARToolKit,可說是徹底解決了 C/Java 不容易製作 UI 的問題;另一方面,也讓多媒體人員或設計師更容易上手製作 AR 應用程式。

PS. 不過效能卻是沒 C/Java 好這是很明顯的。

雖然國外網站認為 NyARToolKit (Java 版本的 ARToolKit) 是所有版本中執行最快的,不過就筆者的經驗而論: C > Java > AS3

 

 

運作模式 (大致與 ARToolKit 相同):

憑藉相機所拍攝的畫面偵測標記 (marker) 以計算出相機 (camera)、標記在三維空間的位置,再以上述資訊來提供 3D 模型繪製時的參考。

 

 

必要環境

‧Adobe Flash CS3 以上之版本
‧FLARToolKit
‧Papervision3D (rev. 814以上)
‧影像輸入裝置
‧將標記列印出來

官方範例下載下來之後就能直接 RUN 了(似乎相對的 Papervision3d 的 library 也包在裡面),直接打開 SimpleCube.fla 及 SimpleCube.as 即可開始開發囉!

 

 

程式碼 (SimpleCube.as)


package {
 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.Plane;
 // Import Sphere 及貼圖相關函式
 import org.papervision3d.objects.primitives.Sphere;
 import org.papervision3d.materials.BitmapFileMaterial;
 
 public class SimpleCube extends PV3DARApp {
   private var _plane:Plane;
   // 宣告 Sphere 及 Bitmap
   private var _sphere:Sphere;
   private var _bitmap:BitmapFileMaterial;
   public function SimpleCube() {
     // 改為 ARToolKit 中的 patt.hiro
     this.init('Data/camera_para.dat', 'Data/hiro.pat');
   }

   protected override function onInit():void {
     super.onInit(); // Initial
 
     // 再標記上面畫上平面方格,相關方式請查閱 Papervision3D API
     var wmat:WireframeMaterial = new WireframeMaterial(0x0000ff, 1, 2);
     this._plane = new Plane(wmat, 80, 80); // 80mm x 80mm。
     this._plane.rotationX = 180;
     this._baseNode.addChild(this._plane);
     // 新增一個光源,相關方式請查閱 Papervision3D API
     var light:PointLight3D = new PointLight3D();
     light.x = 0;
     // 座標系請參考圖2.
     // Y 軸改成-1000之後的差別,請參閱下方圖3. 4.
     light.y = 1000;
     light.z = -1000;

     // 原本官方範例是實作繪出 Cube,這邊我們改成貼圖的 Sphere
     // 相關函式請查閱 Papervision3D API
     // new 一個 BitmapFileMaterial 用來貼圖
     this._bitmap = new BitmapFileMaterial('Data/sphere.png');
     // 將 _bitmap 餵給 sphere 函式
     // 後面參數請查閱 Papervision3D API
     this._sphere = new Sphere(this._bitmap, 50, 10, 10);
     this._sphere.z = 20;
     this._baseNode.addChild(this._sphere);
   }
 }
}

 


相關圖片

marker-axis.jpg

圖2. FLARToolKit 座標系 (資料來源:FLARToolKit)

 

 

Y1000.png

圖3. Y = 1000 的光源

 

 

Y-1000.png

圖4. Y = -1000 的光源

 

 

pattHiro.gif

圖5. ARToolKit 的 Hiro (patt.hiro),可以直接餵給 FLARToolKit 用喔!

 

用自己的 3D 模型

FLARToolKit 其實只是提供對於 Marker 的 Tracing 和 Recognizing 的方法,所有關於 3D 繪圖的事情,理論上是交給 Papervision3D (P3D) 和 Flash 去作。

想當然在多媒體技術這麼發達的年代,無論 sphere, cone, cube, cylinder 都再也無法吸引大眾目光,(搞不好老師上課教這些,學生都懶得看了)

於是乎,與 ARToolKit 一樣,FLARToolKit 必須能外部匯入、而且是通用格式的模型檔才行!所以,這部份雖然筆者還沒實作,但大致提供一個方向,

P3D 中有一個類別能支援繪製由 3D Studio Max 產生的 Ase 檔,有興趣的可以看看如何實作。 >> Class Ase


延伸閱讀

>> Papervision3D Flash之神魂顛倒

>> Papervision3D Official API Documentation

 

 

範例下載

本文範例 SWF 檔(含 hiro pattern 及 sphere 貼圖):

>> 下載 FLARToolKit Sphere Sample by DK01.CC

 

 

創作者介紹

DKBLOG

DK 發表在 痞客邦 PIXNET 留言(9) 人氣()


留言列表 (9)

發表留言
  • Tsai
  • 請問版大以後會有機會PO自己做的經驗例子嗎?
    我剛接觸AS3.0沒多久感覺有些複雜...2.0跟3.0的寫法有些差距...
  • AS 3.0的確難上手, 不過比起來沒有PV3D那邊複雜...
    之後有作新的相關應用都會PO上來...前提是要先熬過五月...XD

    DK 於 2009/05/06 00:10 回覆

  • Tsai
  • 那就期待大大的作品了!!屆時再來研究討論~XD
  • 都過半年了,
    我實在沒心思去做 Flash 的 AR Application。

    只能空想 XD

    DK 於 2009/10/27 22:21 回覆

  • lovetaouc
  • 我想請問一下
    是否可以換上自己的swf擋呢
    我要load一個swf但是要remove就會有問題
    一直沒有辦法remove
    unload也不行= ="
    不知道大大有沒有什麼辦法
  • 當然可以是自己的 swf 囉!
    但是對於 Flash,我實在幫不了你什麼 = =" Sorry

    DK 於 2009/10/27 22:24 回覆

  • 猴子
  • 大大
    範例檔好像下載不下來耶
    請問該如何做?
  • 範例其實跟上面的Code一樣,PV3D可能要您自己上網找一下設定方式囉!

    DK 於 2010/11/26 14:01 回覆

  • 悄悄話
  • 訪客
  • 請問要如何將編譯好的swf檔,在Android手機上跑呢?
  • 在pc上compile之FLARToolKit swf不確定是否能在Android上正確運作,如果成功也請您分享一下經驗。:-)

    DK 於 2011/05/03 16:02 回覆

  • j
  • 請問範例檔案要如何載下,點進去好像不能載ㄝ
  • 範例檔案已經遺失,請參考FLARToolKit所附之範例。:-)

    DK 於 2011/05/03 16:02 回覆

  • momo
  • 請問flartoolkit可以辨識一個mark之後出現相對應的影片嗎?(flv檔)
  • 訪客
  • 請問 ase 有支援動態嗎?