跳到主要內容

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的原始碼按我下載

留言

Charles表示…
好酷!!
謝謝分享資訊^^
DO寫道…
奶綠老師COOL耶!!
我要試試可不可以用在畢製上!!
DO表示…
突然想到 這好像本來是日本賣得一款遊戲 叫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
分享給大家囉...
Chia-Chih寫道…
您好我想請問一下怎麼利用原始碼弄出執行檔(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寫道…
哇, 這個我倒還沒認真的玩
那天看同事在用
太復雜的樣式會抓不到
然後黑色和白色是最好的
其他的話,我還要研究一下再來分享
hungli寫道…
奶綠老師~想請教您一下!!!如果flartoolkit想要把model換掉的話是不是要先把collada檔轉成xml檔呢?
因為最近一直在研究此方面的東西卻一直失敗@@
milkmidi寫道…
collada本來就是一份xml格式呀
只是副檔名叫.dae
可以用筆記本打開來看
hungli表示…
原來如此ˊˋ~那奶綠老師~換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);
這樣就可以了
hungli表示…
奶綠老師~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);
Chia-Chih寫道…
奶綠老師您好,請問可否將上面置換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的
這樣檔案比較小
Jhih-Wei寫道…
奶綠老師
我可以請問一下^^
如何把影片轉成xml嗎~~
因為model,dae檔好像是吃xml格式的

想說用奶綠老師的範例,在改成影片的model的
milkmidi寫道…
如何把影片轉成xml?
不是很懂你的意思也
Jhih-Wei寫道…
呵,誤會誤會~
我用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
守平寫道…
你好
可以請問要如何對應兩個以上PAT嗎?

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

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

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

Android完全入門篇-01 安裝SDK與裝置USBDriver

大家好,我是奶綠茶
筆者以 Windows 系統來介紹安裝
1. 下載 Android SDK
http://developer.android.com/sdk/index.html
有分 32 位元和 64 位元的版本
為了教學方便,筆者將檔案放置在 D:\ 下
壓開後會有
eclipse資料夾:Eclipse程式碼編譯器
sdk:Android 開發用的 SDK
SDK Manager.exe:sdk管理用的軟體


2. 開啟手機的"開發人員選項"
部份手機該選項被隱藏起來了
要開啟的話,點選"關於手機"
接著連點"版本號碼"七次,就會重新開啟該功能
接著再開啟"USB偵錯"功能
接上你的 USB 線後
這樣你的電腦才能透過 USB 線來偵錯手機的資訊
3. 為裝置安裝 adb usb driver
因為各家廠牌的 Driver 都不同也不通用,所以需要自行 Google 找 Driver
可以用"XXX廠牌 型號 adb usb driver"關鍵字來找
例:HTC Newone adb usb driver
接著找到 我的電腦 / 內容


裝置管理員

會看到一個金嘆號未知的裝置, 按右鍵更新驅動程式軟體

選擇"瀏覽電腦上的驅動程式軟體"

完成後就會看到裝置啟動,並出現 XXX Android ADB Interface

4.測試是否連接成功
進入到第一步下載的 sdk 資料夾裡
D:\adt-bundle-windows-x86_64-20131030\sdk
然後在 platform-tools 資料夾上按住 Shift 鍵,然後再按滑鼠右鍵
選擇"在此處開啟命令視窗"
(此功能只有 Win7 之後的版本才支援, XP使用者就要自行輸入 dos 指令進入到資料夾)
輸入 adb devices
如果看到一串數字,並顯示 device 就表示連線成功
5.新增環境變數(選擇性設定)
為了方便的使用 adb 指令
可以為 windows 設定變數
開啟我的電腦 / 內容 / 左邊的"進階系統設定"
點選下方 環境變數

下方系統變數,找到 Path的選項,按下編輯

在變數值欄位的最後方加入
;D:\adt-b…

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…