跳到主要內容

FLARToolKit

什麼是FLARToolKit
簡單來說, 就是透過Webcam, 將虛擬的物件與真實的世界結合, 呈現在使用者的畫面
Demo影片:
http://www.youtube.com/watch?v=TW6_X9qBeds&feature=related
Youtube有許多相關的影片。
一開始的版本並不是Flash, 後來日本的程式設計師Saqoosha將其改寫成Flash版
並搭配PV3D。
你可以下載其原始碼來研究, 程式碼都是公開的。
http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
http://saqoosha.net/flartoolkit/start-up-guide/
要玩這個技術, 需要具備幾個點:
1.熟悉FlashActionScript3.0 , 特別是類別的部份。
2.略懂PV3D的架構, 因為裡面是用到PV3D的核心Engine。
3.需要有一台Webcam,
4.開始玩樂吧。

即然跟Flash有關, 而且也是PV3D, 奶小茶我當然是不會錯過
使用的是官網的Focus 3D模型車和FlarToolKit製作的Demo, 原始碼官網都有提供喔。

PV3D的相關課程, 可以參考飛肯學苑奶老師所開設的PV3D班。

奶小茶Demo的原始碼按我下載

留言

匿名表示…
好酷!!
謝謝分享資訊^^
匿名表示…
奶綠老師COOL耶!!
我要試試可不可以用在畢製上!!
匿名表示…
突然想到 這好像本來是日本賣得一款遊戲 叫ALICE的養成遊戲 是做成方塊的!!!
寫道…
這個應用太酷了!!!
milkmidi寫道…
是呀,這東西很有趣
我也繼續在研究中
阿米豆腐寫道…
其實這個技術叫做 Augmented Reality (擴增時境),是以虛擬實境(VR)為出發點的互動技術。
這個影片不錯喔:
http://www.youtube.com/watch?v=obOZ5SSIMfM

我記得還有人把它做成類似世紀帝國AR版。連應用在iphone上的程式都有(網路上影片看到的)。

搞不好那一天遊戲王的遊戲也可以用這種另類的方式呈現喔!
阿米豆腐寫道…
補充一下
我是看到這個影片才知道有這麼有趣的技術滴.....^++++++++++^
遊戲名稱叫 "Eye Pet "(PS3的遊戲)
http://www.youtube.com/watch?v=aPENA1Bpm68

另外,
日本在2008年發售了一套ARis-アリス愛莉絲的遊戲,網站如下:
http://www.geishatokyo.com/jp/ar-figure/
說明影片如下:
http://www.youtube.com/watch?v=yCCx7zANsGE&eurl=http://www.kleinerfisch.com/blog/2009/02/augmented-reality.html
分享給大家囉...
Unknown寫道…
您好我想請問一下怎麼利用原始碼弄出執行檔(flash影片檔),還有如果要換model的話有哪些步驟呢? 資質駑鈍,還請您費心說明,感恩!
milkmidi寫道…
to Chia-Chih
影片檔我是用軟體, 將Flash的畫面拍成影片格式, 要換模型的話, 可以使用3DMax或是Maya製作, 再匯出成特定的格式, 讓PV3D使用。
HARDMOUSE寫道…
http://www.youtube.com/watch?v=ZAa_MJyZLd4&NR=1

這特效也不錯的感覺
milkmidi寫道…
真的還滿有趣的
謝謝分享喔
看樣子有空要來研究這東西
HARDMOUSE寫道…
我有自己試著想改那種偵測圖案的pattern,但好像還是怪怪的~不知道奶綠老師知不知道它有甚麼規則!?

我有做一個簡易的pattern製造器~但是好像太複雜的圖案還是會有問題說~
http://210.64.87.49/jyu/cameraRealCube/GridMaker.html
HARDMOUSE寫道…
作者已經移除這則留言。
HARDMOUSE寫道…
我是推理它好像有些會判成灰色的~所以原始的pattern有些是介於0~255的某些值~
我索性把它直接變成不是0就255.....不知道是否這樣會有更清楚的判斷!?
milkmidi寫道…
哇, 這個我倒還沒認真的玩
那天看同事在用
太復雜的樣式會抓不到
然後黑色和白色是最好的
其他的話,我還要研究一下再來分享
匿名表示…
奶綠老師~想請教您一下!!!如果flartoolkit想要把model換掉的話是不是要先把collada檔轉成xml檔呢?
因為最近一直在研究此方面的東西卻一直失敗@@
milkmidi寫道…
collada本來就是一份xml格式呀
只是副檔名叫.dae
可以用筆記本打開來看
匿名表示…
原來如此ˊˋ~那奶綠老師~換model方面我已經備有dae檔了~再請教一下如果要直接換成此model要動到哪個as檔呢@@ 謝謝喔
milkmidi寫道…
SimpleCube.as這隻
把本來的new Cube拿掉
換成
dae = new DAE(); dae.load("focusDAE/Focus.dae");
dae.scale = 20; dae.rotationX =90; this._baseNode.addChild(dae);
這樣就可以了
匿名表示…
奶綠老師~dae = new DAE(); 都一直出現錯誤耶...dae前面要加個var嗎??還是DAE()括弧裡面要輸入(true, null, true)值@@?因為看了好多教學不知道對不對然後頓時沒有軟體可以實作所以想請教您!!
milkmidi寫道…
要加var
var dae:DAE = new DAE(); dae.load("focusDAE/Focus.dae");
dae.scale = 20;
dae.rotationX =90; this._baseNode.addChild(dae);
Unknown寫道…
奶綠老師您好,請問可否將上面置換model後的程式碼寄給我參考呢? 拜託您了謝謝!! 我的信箱是pixy1303@hotmail.com 再次謝謝你。
hungli表示…
奶綠老師~想請教您一下~如果要同時顯示兩個model(一個pat對應一個)要如何下手呢@@?感謝喔!!
milkmidi寫道…
我分享了我demo用的程式碼
煩請重新下載
abi寫道…
作者已經移除這則留言。
abi寫道…
奶綠老師您好,我把原new Cube的碼換成了
var dae:DAE = new DAE(); dae.load("我自己的.dae");
dae.scale = 20;
dae.rotationX =90; this._baseNode.addChild(dae);
但出現了errors:
1046: Type was not found or was not a compile-time constant: DAE.
請問您可以教我怎樣解決嗎??
先謝謝您!!!!
milkmidi寫道…
import org.papervision3d.objects.parsers.DAE
abi寫道…
Thank you very much!!!!!!! it's work!!
請問如果我想把一個3D animation的.dae 放進去可以嗎?
我在Maya use collada export了一個animated 的.dae
但放進去之後沒有animation,我也不會PV3D...
再次感謝!!!
milkmidi寫道…
DAE含動畫檔是可以的
可能是你在export時的選項沒有選到
abi寫道…
抱歉問這麼多,請問我要再寫程式碼放進去嗎?
如果要的話,要怎麼寫?

因我已試了很多export的選項
也參考過網上的教學
但export出來放進去也是no animation....
hungli表示…
奶綠老師~想請教您一下,
如果我想要把FLAR裡面中的dae還有jpg檔放到資料庫裡面,那要怎麼在pakage裡面宣告呢?因為一直有錯誤...謝謝喔><


superme777@yahoo.com.tw
milkmidi寫道…
放到資料庫
什麼意思呢?
hungli表示…
奶綠老師不好意思~解釋的不清楚~我的意思是我的資料如果放在MYSQL裡面~該怎麼抓出MYSQL裡面的資料呢?譬如說本來的dae.load();那些該換成什麼呢@@? 在次感謝!!!


superme777@yahoo.com.tw
milkmidi寫道…
需要先使用URLLoader類別
去呼叫一隻php,然後回傳.dae的路徑
成功後,得到路徑,去使用dae.load去載入模型
Q寶寶表示…
奶綠老師~~想請教一下如果要同時用不同的pat顯示不同的dae有辦法直接在同個as檔裡面叫出來嗎?因為小的都一直只能慢慢一個一個換dae有點麻煩ˊˋ
milkmidi寫道…
技術上是可以行的
但是一個pattern的運算就很吃效能了
同時要判斷二個或三個
應該會跑不動
tony表示…
你好,我下載了 2009_04_07_FLARToolKit.zip
但不知道老師的DEMO原始碼是哪個檔案?
pv3d2.swf 打開只看到黑畫面...

另外請問
http://prius.ndm.tw/index.aspx#/hybrid
這裡的AR案例
"用手於鏡頭前輕觸畫面上的按鍵,即可啟動..."
是什麼方法做到的呢?
milkmidi寫道…
需要有webcam才看到的
而Prius。用手於鏡頭前輕觸畫面上的按鍵,即可啟動
這只是用點陣圖的色彩差來判斷
當色彩有更改時,就觸發事件
tony表示…
還有、設計pattern時有沒有什麼特定的規則要遵守?
我自己弄了一個圖型、並在網路上找到程式、用來產稱了 *.pat 檔
但套用到其它網站找到的範例中
重新發佈後也都沒反應

camera_para.dat 這檔案在日後的其它作品中我有必要自己建立嗎? 還是延用範例中提供的就行了?

camera_para.dat 和 mark.pat 在 SWF 發佈以後就是包含在 SWF 裡了嗎? 或者是 SWF 仍然要讀取外部的那兩個檔案?
tony表示…
補充:為了學您書上最後提到的這個例子,已經特別去買一顆webcam了^^
milkmidi寫道…
自已設計pattern, 圖型盡量簡單
然後有個方向性就可以
可以參考這個網站,有明確的說明。
http://www.mikkoh.com/blog/?p=182

camera_para.dat和mark.pat
是Flartoolkit一定需要的二個檔案
可以外載, 或是Embed到swf裡
一般我都是用Embed的
這樣檔案比較小
Unknown寫道…
奶綠老師
我可以請問一下^^
如何把影片轉成xml嗎~~
因為model,dae檔好像是吃xml格式的

想說用奶綠老師的範例,在改成影片的model的
milkmidi寫道…
如何把影片轉成xml?
不是很懂你的意思也
Unknown寫道…
呵,誤會誤會~
我用3D MAX轉出DAE
放下去RUN,結果沒有動畫,MODEL有出現
只是動畫不會動

奶綠大大也是用 3dMAX轉的嗎^^
匿名表示…
請問如果是公司要使用~要怎麼拿到授權呢? 已經有購買Flash CS4... Flartoolkit. PV3D 要怎麼使用在商業上!?
詩酒趁年華寫道…
奶茶老師
我依照您上述的方式置換了DAE檔案
卻出現材質貼圖有出現.模型本身卻還是汽車
想請教我該修改那個部分...
謝謝
詩酒趁年華寫道…
我利用您的範例檔,置換其中的DAE檔案與貼圖。
目前可以看到模型,但是貼圖不見了....
我想大概是我貼圖有問題...
很抱歉我對程式一竅不通
不過還是勞您駕,指點迷津
以下是DAE檔案的內容





Administrator
Right Hemisphere Collada Interface v1536.36 with FCollada v3.05.

2010-01-10T15:43:30Z
2010-01-10T15:43:31Z
Z_UP






./body.jpg


./body.jpg


./wheel.jpg

























0 0 0 0


0.7922 0.7647 0.7647 0


1 1 1 0


0.1 0.1 0.1 0


0.490689


0 0 0 1


1












body-img
A8R8G8B8




body-img-surface
WRAP
WRAP
NONE
NONE
NONE





0 0 0 0


0.3804 0.2784 0.0588 0





0.05 0.05 0.05 0


0.364386


0 0 0 1


1













0 0 0 0


0 0 0 0


1 1 1 0



以下範例檔部分(修改前或後皆看不到材質)
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x0);
//this._cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
//this._cube.z += 20;
//this._baseNode.addChild(this._cube);

var dae:DAE = new DAE(); dae.load("focusDAE/Focus.dae");
dae.scale = 20;
dae.rotationX =90; this._baseNode.addChild(dae);


麻煩你了.感謝
(還是我必須將DAE檔案MAIL給您?)
milkmidi寫道…
能將檔案mail給我嗎
milkmidi@gmail.com
詩酒趁年華寫道…
奶綠老師
我已將檔案MAIL給您了,麻煩你了

感謝
新手OK表示…
老師
抱歉想請問若用3DSMAXOR MAYA製作的動畫
如何轉成含動畫影格的DAE檔呢?
感謝萬分^^"
milkmidi寫道…
需要安裝外掛,就可以匯出成含動畫格式的DAE了
可以到這兒下載
http://milkmidi.blogspot.com/2010/02/daefor3dmaxmaya.html
Unknown寫道…
你好
可以請問要如何對應兩個以上PAT嗎?

不是要同時
是想做成翻頁的
每一頁一個PAT對一個DAE

感激不盡@@
匿名表示…
我想請問一下,我用MAX2009轉存DAE黨,用視訊來顯現我的模型,但是我模出來了,但是貼圖出不來,模型一直呈現黑黑的狀態跟紅色線框在模型身上,貼圖路徑我也檢查了,但是找不出問題來....請問有怎樣的方法能解決嗎?感恩~
nlstudio寫道…
這很多年前以前國外就有了
= = 好像很多人不知道
很驚奇的樣子
緯表示…
請問一下奶綠茶老師
我在官網下載下來的FLARToolKit阿
點選earth.swf檔
會出現一個地球在那邊轉
我想請問的是
我想把地球改成我自己的SWF檔
就是把地球換掉 改成我自己的SWF檔
請問該如何做?
程式碼方面要如何去修改
改哪裡?
問題有點多 感謝老師的教導
匿名表示…
請問有辦法辨識一個MARK之後,在電腦螢幕播放出一個影片嗎?(FLV檔等)

這個網誌中的熱門文章

奶綠茶新書上市_密技公怖_程式碼下載

奶綠茶第一本 Flash 書籍上市啦 博客來書籍館 Flash 3D 特效宅急便 - 商業範例隨學隨 把我對 Flash 的研究與熱愛, 全寫在其中 本書的前幾章, 特別安排 ActionScript3.0 的許多範例 好讓你一步步瞭解 as2 和 as3 的差別 再安排製作動畫不可缺少的 Tweener 類別和一些常用的數學動畫公式 最後當然就來到本書的重點 PV3D 啦 從 PV3D 的原理, 基本架構一點一點的介紹 再透過許多實用的範例, 從中瞭解 PV3D 製作的小技巧 有任何書籍相關的問題, 也請不吝指教 感謝一路走來, 幫助過我的前輩們, 邦邦、Ticore、神魂、Maso、Erin 旗標出版社 小編 Bready 米蘭數位所有夥伴 米蘭數位ActionScript Team:Jason,Ash,Mark 本書大鋼: 1.ActionScript3.0概論 分析AS3的概念與語法, 從基本的滑鼠事件、外部載入、氣泡事件介紹起 適合熟悉AS2, 想轉戰AS3的人員。 2.程式碼製作動畫 使用簡單的數學公式, 套用到程式裡, 脫離死版的影格動畫。 3.製作動畫的好夥伴:Tweener 除了套用數學公式外, Tweener類別也能加速我們開發出更多的動畫效果, 不需辛辛苦苦的找公式。 4.自定類別 AS3的精神, 是在於強大的物件導向, 當然也要熟悉類別的寫法與使用。 5.Flash3D - Papervison3D 如果在Flash玩轉3D效果, PV3D是最好學, 最快上手的3D Flash Engine, 從簡單的3D概念, PV3D類別, 事件等。 6 漫天飛舞的Paper3DWorld效果 7 迷你旋轉木馬式秀圖效果 8 最經典! CoverFlow 圖像展示效果 9 天旋地轉 TiltViewer效果 10 FlatWall3D電視牆效果 11 經典旋轉木馬 Carousel3D 秀圖效果 12 光源材質展示與簡易型的方塊彈跳效果 13 載入外部3D模型與動畫 14 超立體旋轉九宮格 Box3DWorld 15 空間感與透明感兼具的 SpaceGallery 16 螺旋式 SpiralCarouse 影像展示 17 Flash10 3D功能 18 Flash效

奶綠茶photoGalleryV3.5

奶小茶的photoGalleryV3.5原始檔 2007/12/30 更新小Bug,請重新下載 線上Demo: http://milkmidi.com/photogallery/galleryv3.html 1.支援SWFAddress,讓FLASH可以有上一頁下一頁和每張獨立網址的功能 2.圖片路徑圖說經由XML來設定 3.背景依據顯示圖片,自動變化成最接近的顏色 4.非商業用途,歡迎使用並修改(如果覺得我製作的好,也煩請加入我的logo) 5.可結合後端伺服器 00.art 相本集資料夾 com 奶綠茶的Class檔 swfaddress SWFAddress資料夾 swfobject swfobject資料夾 XML galleryV3.fla 原始檔 index.html 主檔html SWFAddress.as SWFaddressEvent.as Source Code Download 解壓密碼:回覆文章,即可看見Password

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 1 首先到  https://github.com/ 申請帳號(一直下一步,下一步,下一步) 2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new 3 Repository name 一定要是這樣的格式 username.github.io 我的 github 網址是 github.com/milkmidi 那就要輸入 milkmidi.github.io 選擇 public, 這樣別人才看的到 private 有其他用途, 而且要付費才能使用 完成後按下 Create repository 5 安裝 SourceTree github 並不支援 FTP 或是網頁上傳,一定要透過指令碼 在這我們選用有圖型介面的軟體,方便大家學習 https://www.sourcetreeapp.com/ 下載並安裝 啟動後登入你的 github 帳號 6 clone 你的 github io 專案 右上角有個 Clone or download 點選後 複製 https 連結(不要選到 ssh ) 7 將 https 的連結貼到 SourceTree 8 上傳 html 到本機 github.io 資料夾,放一個 index.html 切換到 SourceTree, 這時會看到 Unstaged files 的欄位 選擇 Stage All 9 git 要求每次的 Commit, 都一定要打說明文字(好習慣) 輸入完成後,按下右邊的 Commit 10 發佈(Push),這樣就完成啦 可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來 其他 Commit 可以想像是做一個記錄,你可以很多的 Commit 最後再一次 Push 上去 github 原本是給程式設計師用的版本控管服務 免費版提供無限空間讓你放檔案,但一定要是 public 想要有私有的 Project ,就只能付費 github.io 只能放靜態檔案,php, aspx 服務並不支援。 祝大家學習愉快 轉載請註明出處 奶綠的 github.io S