市面上有一種3D實物掃描的機器,一台相機和一個會旋轉的檯子
只要把真實的物件放上去,相機就會開始邊轉邊拍,最後到電腦上就好像有了一個會轉的3D物件一樣。
如果在加上紅外線掃瞄就可以得到距離,借此算出真的3D模型,並用相片自動上貼圖。《參考:NextEngine》
再進一步就是結合打光,變成一個大球體,也就是著名的 Light Stage 了。《參考:LightStage》
但這裡要討論的是沒有紅外線的版本,也就是只單純照了很多張照片,再依據互動來依序播放,感覺起來就像是真的3D物件一樣。
市面上已經有這樣的產品了,這次合作的台大昆蟲系也有這樣的器材。
先說明一下這事要做的目標,是使用 Flash 呈現一隻能自由轉動的3D蝴蝶。
由於 Flash 的3D效能還是無法呈現精緻的蝴蝶,所以使用假的3D效果是比較可行的方案
於是就得在3D軟體( Maya )裡製造出類似3D實物掃描的機制,把每個角度的圖片算出來
匯入到 Flash 裡面,讓 ActionScript 去依照互動方式決定要播哪一張
首先是 Maya (Python)
這次嘗試使用 Python 來編寫,也算是藉機來學習一下。
一開始第一個想到的解決方式,是使用球狀的攝影機陣列,如下圖(左)。
產生出來攝影機陣列十分壯觀,任何東西都不需要轉動,只要依次算出下個攝影機的影像即可
看似容易,但剛做完便想起 MEL/Python 控制算圖實在太過麻煩,於是就放棄了這個做法。
![]() | ![]() |
第二個方法是實物掃瞄機的相反,如上圖(右)
也就是移動攝影機來拍攝,而不是轉動物件。
最後採用了這種方法,困難度較低,算出攝影機有key的範圍即可
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_mlmnpBYOWm2BF0tW304JQs1L1_c02cVti4aA2fUzz06VUSgpWoGMMRoAM7CKLAgDsCT6VAZwDev6JdW3PoLgWVgRUPfc0z9nNX3QEKffZ3q8G3DSQdngXQQ6MWICsS4he2_XEq9dO3E/s1600/imageArray.gif)
這就是算出來的圖片,原先設定經緯各36格(上圖n=36),算出來的圖片就是 36*36 = 1296張
由於想要能夠背景透明,最後輸出是 800px*800px (PNG)
瘦身
1296 張帶著 alpha 圖層的圖片,真的不是個小數目。
匯入到 Flash 裡只要超過 470 張就會當機,於是就得想辦法減肥一下。
‧降低經緯數:降太多會感到不順暢的感覺,所以只把縱向的數目減半 ( 18*36 = 648 )
‧對稱圖像鏡射:由於蝴蝶是左右對稱的,也就是可以左右共用同一張圖,所以橫向也減了將近一半 ( 18*19 = 342 )
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYjtL9jzTA0LTamCV5c3icsVpNKbvFJOdWkJoNWlR4FNNRP0jbJ8lsRiJv1biCZFJfGw2_6XaK7UEzSvbikIfXas6uFuLUPK5ctyEzGMvCSy4EzE4RNgSa2jv3qXCMs6PAWrvtorbFmtQ/s1600/imageMirror.gif)
最後總張數一共是 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