2010/2/23

drawTriangles+UV貼圖筆記


寫給自己的筆記,很粗淺。

昨天研究了一下drawTriangles,直接google這關鍵字可查到最基本的官方教材
關於使用 drawTriangles()
接著也會看到這篇
UV 對應

照著UV對應這篇很快就能弄出一個3D旋轉的範例,如下
.Demo:Spinning3dOcean.swf

這個旋轉教學很簡單,但也有點小複雜,因為他同時使用了3D投影及triangle UV貼圖兩件事。原因是Flash的UV貼圖功能是包含了3D透視比例(就是裏面那個T變數)。所以這篇教學才需要一次介紹這麼多。


不過我個人偏好把東西再分得清楚些,且有很多時候我需要UV變形,但不見得同時也需要3D座標。

所以,以下我先不管3D座標,所有T值都帶1,單純把UV變形的部份練習一下。如下

.Demo: UVT_test_0.swf

這個測試是從上面的官方教學修改而來,並加入線條顯示,及四角控制點。拖拉四個角,可任意變形圖片。唯一問題是變形會像是兩個三角面在折來折去,而不是很smooth的3D傾斜,原因就在我前面說的T值目前都帶1,暫時不考慮3D因素所致。(關於3D問題,將補充說明在最後面)

.Source code



上面的練習只切了兩片三角面,接著我就想試多切幾面的效果,先試試切8片的效果:

.Demo: UVT_test_1.swf

切愈多面可使變形效果較smooth,不過仍與套用3D T值的效果不太相同,目前這種會比較像是2D的網面效果
.Source code



上面的練習是用手動的方式key入9個節點,很弱,所以接下來要設計成用迴圈自動運算節點座標的方式:

.Demo: UVT_test_2.swf

不過demo裏我沒有再做一個UI介面讓人動態去改切割數了,太花時間了。有興趣的人,在source code裏去調整slice這個變數即可。

.Source code



練習至此,就可以利用drawTriangles及UV貼圖的技巧來做許多事了,例如以下的精靈效果:

.Demo: UVT_genie.swf


關於3D的補充說明
使用UV貼圖時,那個T變數,最佳的解決方式就是用3D座標的方式來算,就如同最上面那個官方範例一樣。這點對已熟知3D投影算法的人來說,並不是什麼大問題。也因此這篇筆記才沒對此特別著墨。

而有興趣瞭解3D投影的人,可參考這篇:3D選單教學裏最前面的原理說明部份。

除了直接算出3D標座外,也有神人提出別種解法,請看這篇The best drawPlane/distortImage method, ever
文中作者用兩條對角線,再配合很神妙的公式,算出合理的3D T值,而不用透過真實的3D座標計算。
比較可惜是作者並沒有說明這公式的導出原理。(可能是硬湊出來的,因為他說他花了很多時間try & error & beer XD)
且這方式只能用在只有四個頂點的UV變形裏。其他狀況就完全不適用了。

所以我個人的結論是,單純要做UV變形的話,我會先不考慮T值,能弄出需要的效果就好。假若遇到需要實際3D表現的話,再視情況寫一個3D座標系統配合使用。而上面神人導出的奇妙公式,有出現剛好的使用時機才會考慮使用了。


3 則留言:

Yu-jing 提到...
作者已經移除這則留言。
Yu-jing 提到...
作者已經移除這則留言。
Maso Lin 提到...

之前的只用到BitmapData,只能做單一軸向的縮小,例如水平面逐行縮放。

這次的是BitmapData+drawTriangles,可以做兩個軸向的縮放,例如從四面八方縮進一個點這樣。