2010年8月4日 星期三

3DScanner



市面上有一種3D實物掃描的機器,一台相機和一個會旋轉的檯子

只要把真實的物件放上去,相機就會開始邊轉邊拍,最後到電腦上就好像有了一個會轉的3D物件一樣。

如果在加上紅外線掃瞄就可以得到距離,借此算出真的3D模型,並用相片自動上貼圖。《參考:NextEngine》

再進一步就是結合打光,變成一個大球體,也就是著名的 Light Stage 了。《參考:LightStage》

但這裡要討論的是沒有紅外線的版本,也就是只單純照了很多張照片,再依據互動來依序播放,感覺起來就像是真的3D物件一樣。

市面上已經有這樣的產品了,這次合作的台大昆蟲系也有這樣的器材。



先說明一下這事要做的目標,是使用 Flash 呈現一隻能自由轉動的3D蝴蝶。

由於 Flash 的3D效能還是無法呈現精緻的蝴蝶,所以使用假的3D效果是比較可行的方案

於是就得在3D軟體( Maya )裡製造出類似3D實物掃描的機制,把每個角度的圖片算出來

匯入到 Flash 裡面,讓 ActionScript 去依照互動方式決定要播哪一張



首先是 Maya (Python)

這次嘗試使用 Python 來編寫,也算是藉機來學習一下。

一開始第一個想到的解決方式,是使用球狀的攝影機陣列,如下圖(左)。

產生出來攝影機陣列十分壯觀,任何東西都不需要轉動,只要依次算出下個攝影機的影像即可

看似容易,但剛做完便想起 MEL/Python 控制算圖實在太過麻煩,於是就放棄了這個做法。





第二個方法是實物掃瞄機的相反,如上圖(右)

也就是移動攝影機來拍攝,而不是轉動物件。

最後採用了這種方法,困難度較低,算出攝影機有key的範圍即可





這就是算出來的圖片,原先設定經緯各36格(上圖n=36),算出來的圖片就是 36*36 = 1296張

由於想要能夠背景透明,最後輸出是 800px*800px (PNG)



瘦身

1296 張帶著 alpha 圖層的圖片,真的不是個小數目。

匯入到 Flash 裡只要超過 470 張就會當機,於是就得想辦法減肥一下。

 ‧降低經緯數:降太多會感到不順暢的感覺,所以只把縱向的數目減半 ( 18*36 = 648 )

 ‧對稱圖像鏡射:由於蝴蝶是左右對稱的,也就是可以左右共用同一張圖,所以橫向也減了將近一半 ( 18*19 = 342 )



最後總張數一共是 342 張,比起原本的 1296 少了 3/4。



接著是 Flash ActionScript 的部分

真正難度較大的部分其實是在 ActionScript 如何去判斷該顯示哪一張

為了節省圖片,所以還需要判斷鏡射,鏡射完還得右移,增加了許多難度。

由於實在太多張圖,曾經嘗試了三種匯入的方式:

 1.全部匯入到影格內,依編號移動到對應的影格上:操作順暢,匯入、輸出花時間。

 2.一開始載入全部圖片:等待載入太久,大約要1~2分鐘以上,不可行。

 3.即時載入對應圖片:載入需費時,會出現閃耀,操作不順。



最後只好選擇第一個方法,雖然每次測試時都要等上個 2~3 分鐘,但操作還算順暢。



製作了一個叫做 3DScannerMir 的類別,只要給它 x,y 的位置,它就會傳回對應的圖片編號

得到編號後,再移動到該影格即可

最後產生出來的 swf 檔大小為 6MB 左右

後來精緻了蝴蝶模型,翅膀加入透明漸層和翅脈,檔案大小一下子膨脹到 22MB



342 張 PNG 差不多是 Flash 的極限了,時常會記憶體不足

整個做下來比我想像中的還要複雜一些

最後要用上的時候是彩色的,由於只是測試,所以只用單色

整個做得完整一點的話,算是個滿好用的展示 3D 物件的方法,不用開 Maya,在網路上即可呈現精緻的模型。

下面放的是最後 6MB 版本的成品嘍。 可以使用滑鼠拖曳看看 -end