2009年10月23日 星期五

FLARToolkit簡單教學

最近因為閒著無聊,就乾脆來做個FLAR簡單的教學,基本上會教到可以載入自己的模型,所以也不會修改太多程式碼。

一開始就先從自己製作辨識用的圖片(Mark)開始,你要製作Mark需要特定的軟體ARToolKit-2.65,這是我手邊上的版本,所以我就用這個來做教學,如果不同版本有做變動的話就自行研究吧,下面提供我上傳的軟體。
http://www.multiupload.com/V356K64ZYM
在製作Mark前請先確認你有一個可以使用的視訊攝影機(Webcam),還有一台可以使用的電腦~。
首先一開始要做的事情自然是去設計一個你的Mark,網路上其他人的建議是你要有個黑色外框與白色內框,黑色外框約8公分,白色內框約4公分,然後在白色內框內自行設計圖形。
Mark範圍 
如果有看過我上一篇的文章,可以知道內部設計的圖形黑與白之間必須分散些比較容易辨識,由於他會辨識黑色外框,所以印出來時最外面留白色區域越大越好,另外光線影響也很嚴重,我之前都是用A4紙張印出來,還挺容易反光的,我在思考改天要不要換換其他印表機可以印且不太會反光的紙試看看辨識效果。
接著就把你設計的圖片印出來就可以開始辨識拉。

首先你必須先啟動軟體,解壓縮我所上傳的壓縮檔後,進入bin資料夾,滑鼠雙擊裡面mk_patt.exe的檔案,會進入dos畫面。
1
到這畫面後你就按一下Enter,就會跳出一個視窗,
2 3
基本上用預設的設定就可以了,所以我就不多說了,直接按下確定。
4
各位可以看到畫面上有我的桌面與我所製作的卡片,在我卡片右上半部有紅色邊框,左下半部有綠色邊框,這就代表著我的卡片已經成功被辨識到了,之後只要滑鼠在這個畫面點一下,再回到dos畫面,會要你輸入Mark檔名。
5 
這邊你就可以隨便輸入你所想要的檔名,我就輸入個Test當作檔名,輸入完後按Enter,這個畫面就可以關閉了,你可以在bin的資料夾找到一個沒有副檔名的你的檔案,這就是電腦內辨識Mark的檔案。

以上為止就是製作Mark的流程,你做完Mark之後就必須修改FLAR內的程式碼,將程式碼本來所設定的路徑替換成你自己的Mark,下面就以Saqoosha所提供的教學範例來做修改,下面是我上傳的範例。
http://www.multiupload.com/2R5KZH79MI
要開啟範例檔你必須確認你電腦內有FlashCS3的軟體才有辦法執行,打開資料夾後你進入到fla資料夾,裡面有提供3個範例fla檔案,這邊我就以Gihyo2_1b.fla來做修改,打開之後會出現以下畫面。
6
看到畫面會覺得很奇怪,啥都沒有,因為他所有的程式碼都是載入.as檔,而fla只是為了編譯,所以你直接去看他的.as檔就可以了,在圖片的中間下方,你可以看到Document class,右邊Gihyo2_1b是程式主要的as檔,你點選右邊的鉛筆圖案就會打開Gihyo2_1b.as檔。
7
其實主要程式碼內容並不多,這邊我也沒打算對程式碼逐段說明,因為我也不會阿~,就簡單的對幾行重要的部分做說明。

程式碼的第15行
this.init('Data/camera_para.dat', 'Data/flarlogo.pat');
這邊是去抓取Mark的檔案,所以剛剛做的Mark就可以拿來使用了,首先你必須把你剛剛的檔案複製過來,看上面的路徑可以知道他是在Data裡面,由於他去抓路徑是看你的編譯出來的swf檔位置,而這個範例作者把swf檔放到deploy資料夾裡面,所以你必須進入\gihyo2\deploy\Data裡面去,在裡面你可以看到上面程式碼所抓取的檔案camera_para.dat、flarlogo.pat,第一個檔案我不清楚是做啥的,第二的檔案就是Mark的檔案,你可以注意到它的副檔名是pat,所以當你把你的Mark複製過來時記得修改副檔名,舉例來說我剛剛所建立的Mark就是Test.pat。

如果你已經把你的檔案複製到Data資料夾裡,再來就是修改第15行的程式碼,依照我的來修改就是下面這行。
this.init('Data/camera_para.dat', 'Data/Test.pat');
修改完之後記得存檔Ctrl+s,如果忘記存檔就不會做修改,存完檔後就開始進行編譯Ctrl+Enter,
8
各位可以看到我的桌面畫面變成這樣,左邊的視窗是FLAR的成果,右邊視窗是載入模型的資訊,這邊就點選左邊視窗,中間有個詢問你是否允許相機與麥克風存取,選擇允許之後就會出現攝影機畫面。
9
各位可以看到卡片上出現了個本來不應該出現的模型(不要問我為啥是初音,這是Saqoosha的範例~。
另外我剛剛有提到辨識的地方,各位可以看到我的卡片黑色外框外面留的白色區域不是很多,而且我的桌子不是白的,所以有時候容易辨識不到,這邊我的處理辦法是在底下墊個白色A4紙,會讓辨識率上升。

目前到這裡就可以自行製作Mark進行辨識,最後我們就來試著去換看看模型,目前FLAR所使用的模型檔是DAE檔,好像也可以用3DS檔,不過我還沒測試過所以不敢保證,各位如果熟悉3D模型軟體比方說MAX或MAYA的可以自行製作,不過MAX製作DAE檔需要外掛,MAYA好像也要,我不清楚...,這邊就先以Saqoosha的這個範例內的另一個範例裡面的模型車子來做替換,各位可以看到程式碼第21與22行。
this._miku = new DAE();
this._miku.load('negimiku.dae');
這兩行是宣告模型與模型位置,所以你進入deploy資料夾裡,會看到negimiku.dae,這就是初音這個模型檔,同樣位置你還會看到miku.png,這是初音的貼圖,而另一個範例的模型Focus.dae也放在一起,所以我們就直接修改第22行的程式碼即可。
this._miku.load('Focus.dae');
這樣的話你存檔之後編譯的畫面就會變成,
10
初音變成車子拉~

這樣就可以自己做Mark並且換入自己做的模型,可是我想一定會有人想要讓模型可以動,就像是你可能會希望看到一個會甩蔥的初音,這邊你還需要在做些微的程式碼的變動,首先你必須先確認你擁有一個內含影格動畫的DAE模型,然後在程式碼中的21行做修改,
this._miku = new DAE(true, null, true);
第一個true是autoPlay,控制的部分是你是否要撥放動畫,如果你寫False就是不播放,也就是你依然會看到一個不會動的模型,由於程式內部預設是True,所以其實如果你的模型內含影格動畫,不修改程式就會進行播放。
第二個我不清楚是做啥的,預設是null,就不管他了。
第三個是loop控制,如果你希望影片播完繼續播放,就寫true吧,這樣就會重複播放影片。

好啦,這下子關於這FLAR基本教學就這樣為止拉,我自己自身也才剛學到這樣左右,在來我該研究的部分是如何去抓取模型影格,剛剛這樣的修改也頂多是把模型內所有的影格一次撥完之後再反覆,如果能夠抓到確切的影格的話,可以做的變化也就提升了,就讓我再繼續磨練與學習吧..。
下面這張圖片是我與我們組的美工所做範例的模型圖片,因為我懶得上傳影片就直接用兩張圖片代替拉。
12
11
這個動畫是個很簡單的一個金剛飛拳!!!










10 則留言:

  1. 屌喔!我也要來試試 但是沒視訊 沒印表機 ˇˇ 軟體不會安裝...嗚嗚

    回覆刪除
  2. FLARTookit 很像有很多種版本不之差在哪~
    最近很像又有出來FLARmanager版本~應該是剛出來沒多久@@

    回覆刪除
  3. 冒昧的請問一下,範例裡的模型跟貼圖是分開來放的,請問那個貼圖是怎麼拆出來的呢?@@"

    回覆刪除
  4. 不好意思 為什麼我開啟製作maker的軟體後 沒有像你一樣有選項的那欄可以選?@@

    回覆刪除
  5. 您好:
    看完以上說明
    並在文中提到的以下連結
    http://www.multiupload.com/2R5KZH79MI
    我試了好幾次都無法解壓縮哩
    方便的話~可否寄給我檔案呢~非常感謝ㄛ~
    我的mail
    hotonoken23@yahoo.com.tw

    回覆刪除
  6. 連結的檔案下載都損毀嚕~

    方便的話可以寄到信箱嗎??

    感謝你~

    s9673340@pu.edu.tw

    回覆刪除
  7. 所聯結的都無下載,可以請你寄給我嗎?
    請問有主程式可以下載嗎?
    FLARToolkit軟體,在次請問一下有教學pdf檔嗎?可以教如何安裝嗎?
    我的信箱:jackiey77@msn.com
    jackiey77@yahoo.com.tw


    謝謝

    回覆刪除
  8. 不好意思,我們也無法下載
    可以請你寄給我嗎?

    我的信箱是:huiyinginivy@msn.com

    非常感謝你

    回覆刪除
  9. file re-upload here: http://www.multiupload.com/Y79USU9QC0

    回覆刪除