談 3D 動畫原理

(1)

談 ^3D 動畫原理

李華倫

摘要: 從數學的觀點談一些電腦製作動畫的基本原理。

1. 前言

西元前五世紀時的西臘哲學家 Zeno 提出好幾個有趣的詭論 (Paradox)。其中 “The Ar- row Paradox” 從假設 “瞬間” 是時間最小的、不可分割的單位, 推演出空中飛行的箭無法從這個 “瞬間” 的位置移動到下個 “瞬間” 的位置, 所以飛箭是不動的。將這種奇怪的想法反過來思考, 先製作一幅一幅箭的畫, 每一幅畫中箭都移動一點點距離。現在將這些畫依序快速播放, 看起來箭好像真的飛起來了。

電影和動畫都是基於這種視覺暫留的原理, 以每秒 24 幅或 29.97 幅的速度播放一幅一幅固定的畫, 產生許多令人驚訝的動態效果。從數學函數的角度來看, 假設物體運動是一種隨時間變化的連續函數, 則描述物體運動的動畫便是逼近此連續函數的一個離散函數。要逼近真實就要畫得細膩, 以每秒 24幅計算, 一個小時的影片要畫 8 萬 6 千 4 百幅, 可以想像早期手繪動畫工作量之龐大。電腦的計算能力正好派上用場, 剛開始是 1960, 70 年代, 大多是大學實驗室的研究計畫, 如美國麻省理工學院的 Ivan Sutherland, 猶他大學的 David Evans, 俄亥俄州立大學的 Chuck Csuri 及一些藝術家。那時電腦畫完後要用照相機將螢幕拍下來然後才能存成影片, 很不容易。 1980年代開始有比較商業性的電腦動畫, 原因之一就是硬體的進步像 Silicon Graphics 成立及 IBM 個人電腦開始, 加上繪圖軟體漸漸成熟, 3D 電腦動畫才真正開始。所謂 3D 就是構造出 3 度空間中的物體、燈光、世界然後由虛擬攝影機來拍攝就像正式拍電影一樣。這種製作形態類似模型動畫 — 早期太空科幻電影的最愛 — 先製造出縮小的建築物、太空船模型再用特別攝影機來拍攝。這種方式特別適合電腦, 第一; 模型不需做成實體, 第二; 攝影機是虛擬的所以到處都能去不受任何限制。 ’90 年代開始電腦動畫蓬勃發展, 動畫製作成本漸漸降低, 除了在輔助手繪動畫方面角色越來越重, 多部電影也用電腦製作像變型、溶化等等特殊效

3

(2)

果。 1995年迪士尼·Pixar 的 Toy Story 則是第一部全 3D 的電腦動畫, 這兩年來我們更看到了電腦動畫在電影工業的充分發揮。

然而電腦是如何建構一個 3度空間的世界呢? 基本上就是數學。想想還有甚麼辦法可以嚴密定義空間中的位置, 形狀和物體! 當然光定義是不夠, 還要能寫成程式讓電腦執行。這種結合幾何學、離散數學、電腦演算法的研究就是計算幾何學 (computational geometry)。諸如怎麼分辨物體前後讓電腦只畫出看得到的部分, 如何正確表現光的效果, 如何讓物體移動滿足物理定律等等都是屬於計算幾何學的範疇。這裡我們想討論幾個傳統幾何的基本觀念, 看看它們與 3D 電腦動畫的關係。

2. 移動

電腦畫出的物體基本上是由點、線、面構成的多面體。這些擬真的物體, 其實只存在所有頂點的座標及那些頂點構成線, 那些頂點構成面等等資訊。

圖1. 點線面構成多面體將圖 1 物體的 14 個頂點依序以 1 到 14 表示, 則

{2, 3, 4, 5}{1, 2, 5, 6}{1, 6, 7, 14}{7, 8, 13, 14}{8, 9, 12, 13}{9, 10, 11, 12}

就是每一個面。由面的法向量與光線夾角, 加上拍攝角度計算出投影結果, 電腦便能展示出栩栩如生的物體。但如何讓這個物體動起來呢? 移動, 就是所有頂點移到新的位置。而只要掌握一個頂點的移動向量, 利用向量加法便能算出其他頂點的新座標。然後電腦依照上述集合便可畫出移動後物體的每一個面。事情可以更有彈性, 空間中任一點都可做為整個物體的參考點, 由它代表整個物體的位置, 它的移動向量就是整個物體的移動向量, 見圖 2。

(3)

圖2. 參考點移動

進一步將它想成「座標原點」, 運用矩陣計算配合向量加法便能算出整個物體以此參考點為中心做變大、變小或旋轉等動作之後頂點的新座標, 非常有用。因為一般物體移動是時間的連續函數, 參考點移動軌跡是三維空間中的一條連續曲線。我們也可以先給定曲線 γ : [a, b] →

R

³

而用 γ(t) 作為物體在時間 t 的參考點, 但這樣物體只是平行移動 (圖 3)。

運用「移動座標系統」 (moving frame) 則能讓物體順著曲線方向移動 (圖 4)。

圖3. 物體在曲線上平行移動圖4. 物體順著曲線方向移動

2.1. 曲線上的移動座標系統

甚麼是曲線上的移動座標系統? 假設 γ : [0, l] →

R

³ 是 3維空間中一個曲線的特殊可微分參數式, 它特殊之處是從 γ(0) 到 γ(s) 這段曲線長就等於 s, 換句話說拿曲線長當參數。這樣的曲線有下列性質。

(4)

定理1: |^dγ_ds| = 1.

證明: 從 γ(0) 到 γ(t) 這一段曲線長等於

^R

0^t|^dγ_ds|ds, 所以

Z

t 0 |dγ

ds|ds = t 對所有t ∈ [0, l]

由微積分基本定理得到

|dγ

ds|(t) = d dt

Z

t 0

|dγ

ds|ds = d dtt = 1 我們令 T (s) = ^dγ_ds, 它就是在 γ(s) 點的單位切向量。

定理2: ^dT_ds 與 T (s) 垂直。

證明: 因為 hT (s), T (s)i = |T (s)|² = 1, d

dshT , T i = hdT

ds, T i + hT ,dT dsi

= 2hdT ds, T i

= 0

當 |^dT_ds| 6= 0, 我們令

N(s) = dT ds/|dT

ds|,

它是單位法向量。接著用向量外積可以得到另一個單位法向量 B = T × N 。 {T , N , B} 就是一組會移動的向量基底 (moving frame) 也稱 Frenet frame。

圖5. 移動的 Frenet frames

(5)

給定一多面體, 以原點為參考點而 n 個頂點座標是 αk = (xk, yk, zk), k = 1, . . . , n 寫成向量形式 α_k = xkI+ ykJ + zkK, 這裡 I J K 分別代表 x軸、y軸、z軸的單位方向向量。

讓 I J K 分別依附著 T N B 在 γ 上移動, 則頂點 αk 的新座標 αk(t) = γ(t) + xkT(t) + ykN(t) + zkB(t)

由這些頂點畫出的多面體便會順著曲線方向移動。而轉動 {T , N , B} 可以讓物體自轉, 例如陀螺。更進一步, 由物體在曲線上參考點之曲率 κ = |^dT

ds | 的大小控制 {B, N } 向 −N 傾斜角度之大小可以畫出離心力的效果。

Frenet frame 雖然好用, 但在^dT_ds 不存在或 κ = 0 的地方則無法定義。例如圖 6, 這是由兩半圓 (假設半徑是 r) 銜接起來的曲線, 中間銜接點無法定義法向量。很容易證明除了銜接點其他地方曲率都是 1/r 不會是零, 所以此曲線在銜接點 ^dT_ds 必不存在, 換句話說此曲線二次不可微。

圖6

2.2. 速度函數

拿曲線長當參數, 讓物體依此參數在曲線上移動, 這是一種等速運動, 製作動畫當然不止等速運動。所有 3D 動畫軟體都有用函數方式來控制速度的功能。也就是運用合成函數的觀念, 先設計好曲線函數 γ : [a, b] →

R

³ 再控制速度函數 ν : [α, β] → [a, b] , 目的是使得 γ◦ν : [α, β] →

R

³ 達到我們的要求。而那一種 ν 最常用呢? 就是傳統動畫強調的「淡入淡出」 (ease in/ease out) 準則, 想像汽車沿著曲線從啟動到停車, 速度從零開始到零結束。這種 ν : [0, 1] → [0, 1] 函數一般使用的兩種, 一是

ν(t) = sin(πt − π/2) + 1 2

另一個則是將 [0, 1] 分成 3 段, 前後兩段用拋物線, 中段則是直線銜接起來。

(6)

圖7. 淡入淡出

按實際需要, 比如說物理性質的考慮、運動學上的考慮, 有時曲線函數及速度函數要有特別的、更細膩的設計。而 3D 動畫軟體都有提供如 splines curves, Bezier curves, NURBS curves 等等計算幾何學的工具來設計曲線, 非常有用。

3. 曲面

一般我們用兩個參數的參數式來表達曲面。令 F : [a, b] × [c, d] →

R

³ 是曲面的參數式。

將平面上的矩形 Ω = [a, b] × [c, d] 切割成 n² 個小矩形, 假設小矩形 Ωi,j 的 4個頂點座標依逆時鐘方向分別是

(ai, bj), (ai+1, bj), (ai+1, bj+1), (ai, bj+1) 一般說來它們經過 F 映在

R

³ 中的 4 個點不會共面。我們只好畫出分別以

{F (ai, bj), F (ai+1, bj), F (ai+1, bj+1)}

{F (ai+1, bj+1), F (ai, bj+1), F (ai, bj)}

為頂點的兩個三角形, 以它們的聯集來表現 F (Ωi,j), 最後這樣產生的三角形全部拼起來會得到接近 F (Ω) 曲面的多面體。這裡所謂 “接近” 指的是 F 可微分且 ^∂F_∂x × ^∂F_∂y 在 Ω 上完全不等於 0 的條件下, 只要 n 足夠大, 畫出的多面體與 F (Ω) (如果真正畫出來) 在肉眼下已無法區分。

當然我們希望有比較一般性的方法來造出曲面。數學上確實有一些基本觀念如對稱、旋轉、

繞動等可以幫助我們。

(7)

3.1. 旋轉曲面

在 3 維空間

R

³ 中的 xz 平面上給定一曲線 γ : [a, b] →

R

× {0} ×

R

, 此曲線沒有自我相交的情況, 是一個簡單曲線 (simple curve) 即 γ(t1) 6= γ(t2) 當 t1 6= t2。接下來以 xz 面上任一直線為軸轉動整個 xz 面, 如此帶動 γ 所經過的軌跡便是一個曲面。

圖8. 曲線與旋轉軸圖9. 旋轉

圖10. 軌跡圖11. 曲面成型

如果 γ(t) = (x(t), 0, z(t)) 旋轉軸是 z 軸則給定 t 值旋轉 γ(t) 會得到在 z = z(t) 平面上以 (0, 0, z(t)) 為圓心, 半徑 |x(t)| 的圓, 所以 (x(t) cos(s), x(t) sin(s), z(t)) 是它的一個參數式。這樣產生的曲面稱為旋轉曲面 (surface of revolution), 像圓柱面、球面、環面都可以這樣得到。實際世界中也有很多這種曲面, 如杯子、花瓶等玻璃、陶瓷器。

3.2. 管狀曲面

(8)

如果 γ 不做旋轉, 而是有一個半徑 r 的圓順著 γ 拉動則會產生管狀曲面。也就是以 γ(t) 為圓心在和 T (t) 垂直的面上畫半徑 r 的圓, 這下子 {T , N , B} 又派上用場了。圓上點座標是

γ(t) + r · cos(s) · N (t) + r · sin(s) · B(t)

像環面就可以看成小圓繞著大圓轉出來的。仔細想想還有變化, 如果 r 可以隨 t 改變, 或者用其他封閉曲線取代小圓, 或者讓封閉曲線繞行時加上自轉, 都可以產生豐富的曲面。

圖12. 法平面上的圓圖13. 管狀曲面

3.3. 簡單管狀曲面

Frenet frames 非常有用但卻不易計算, 如果只是要將一條曲線變成單純的管子那麼可以用簡單的辦法。首先我們了解電腦繪圖中所有曲線 (圖 14) 都是折線, 只要放大到相當程度便會看到 (圖 15) 這種現象。

(9)

圖14. 遠觀圖15. 近看

既然如此只要將每一小線段變成圓柱。銜接起來便是管狀曲面 (圖 17)。要這樣做我們必須在曲線轉折點 Ai 定義兩垂直單位向量Bi, Ni 以它們當基底, 得到圓上的點

Cij = Ai+ cos(tj) · Ni+ sin(tj) · Bi

這裡 tj = ²^π·j_n , j = 0 · · · n, 然後讓電腦畫出分別以 {Cij, Ci+1,j, Ci+1,j+1}, {Cij, Ci,j+1,

Ci+1,j+1} 為頂點的三角型, 全部合起來就是我們要的管狀曲面了。那如何定義 Bi, Ni 最合適

呢?

圖16. 折線圖17. 曲折的管子

若Ai不是端點, 我們令 Ti = _kA^Aⁱ⁺¹^−Aⁱ

i+1−Aik。然後取Bi = Ti−1× Ti 這是與 Ti, Ti+1 所構成平面垂直的向量。至於 Ni, 最恰當位置應平分

∠

Ai−1AiAi+1 (圖 16), 所以

Ni = Ti− T_i−1 kTi− T_i−1k

至於曲線端點, 以 A0 來說先取 B0 = B1 再令N0 = B0× T0, 另一端點方法相似。如果折線非常細膩, 相當接近曲線, 則這樣得到的管狀曲面, 跟用 Frenet frames 得到的曲面也會非常接近。

3.4. 對稱曲面

對稱性也是我們常用的方法。物體本身某一部分經由轉動, 對翻可以複製出所有其他的部分, 這些部分頂多只有邊緣相交且聯集起來就是整個物體。例如故宮博物院這個宋代蓮花式溫碗 [1] 有十瓣, 由上往下看每一瓣應佔 36度, 所以仔細畫出一瓣後可運用對稱性做出虛擬蓮花式溫碗。

(10)

圖18. 宋朝蓮花式溫碗圖19. 電腦虛擬

(11)

4. 視覺與射影幾何

3 維動畫最特別之處就是最後由虛擬攝影機呈現結果。現在 3D動畫軟體更讓使用者選擇不同的鏡頭, 看是要一般 55mm, 廣角的 35mm 還是長鏡頭 135mm, 甚至可以連續變化, 真是非常方便。那麼攝影是怎麼回事呢?

假想眼睛為點 O = (0, 0, 0), 眼前有一螢幕 Ψ, 而空間中點 p 與 O 連線若與 Ψ 有交點, 那麼此交點便是 p 的投影。 (圖 20)

圖20. 投影

這樣一來豈不是所有和 p, O 共線的點全投影到同一點? 是的, 射影幾何正是將過原點直線上除了原點外其他共線的點都視為同一點。這就是齊次座標 (homogeneous coordinate) [x : y : z] = [kx : ky : kz] 這裡 k 6= 0 且 x²+ y²+ z² 6= 0。射影幾何* 有很豐富的理論, 這裡我們只看一些基本性質。

首先令Φ 是過 O 且和螢幕 Ψ 平行的面, 這個面是視線的死角, 上面所有點都無法投影到螢幕 Ψ 上。若 L 是一條不包含於 Φ 且不通過 O 的直線, 則它在 Ψ 的投影就是 L

^S

{O} 決定之平面與 Ψ 的交集, 當然也是直線了。換句話說共線的點在 Ψ 上的投影也一定共線。

定理3: 空間中兩條不平行於螢幕的平行線其投影直線有相同的消逝點。

證明: 不失普遍性我們可將

R

³ 中的視窗平面 Ψ 擺在 x = 1 而 O = (0, 0, 0)。如此只要點 (x, y, z) ∈

R

³ 的 x 6= 0 則

[x : y : z] = [1 : y x : z

x]

後者反應出投影點在 Ψ 的位置。現有兩平行線用參數式表示並計算在 Ψ 的投影位置:

[at + α1 : bt + β1 : ct + γ1] =

"

1 : bt + β1

at + α1

: ct + γ1

at + α1

#

*讀者可參考數學傳播「射影幾何六講」,二十五卷一期∼二十六卷二期,民90^年3^月∼91^年6^月

(12)

[at + α2 : bt + β2 : ct + γ2] =

"

1 : bt + β2

at + α2

: ct + γ2

at + α2

#

注意它們不平行於 x = 1 所以 a 6= 0。接下來讓 t → ∞, 很清楚的它們在 Ψ 投影點的極限都是 [1 : _a^b : _a^c], 這就是共同的消逝點。

有了初步瞭解之後, 我們來畫畫火車鐵道的投影。

圖21. 鐵道的投影

因為構成鐵道的線都在水平面上, 它們的參數式中c = 0, 所以這些線投射在 Ψ 的影像之消逝點 [1 : _a^b : 0] 都落在和眼睛等高的水平線上, 這條水平線就稱為消逝線。我們選消逝線正中央 V 點為鐵軌的消逝點, 先對稱畫出兩條軌道, 接著畫枕木。因為枕木都和螢幕平行, 它們在螢幕上的投影沒有消逝點但仍保持平行。從最接近的枕木開始, 前兩個位置比較自由, 但第三個就不能隨便了。如何正確畫出位置? 我們利用相鄰枕木之間平行的對角線有相同的消逝點。

先把第一、第二枕木之間一條對角線延伸找出消逝點 W , 再反回來畫出其他平行對角線的投影並得到與鐵軌新的交點, 這就是下個枕木的位置。 (見圖 22)

射影幾何是電腦表達視覺的基礎, 尤其是寬廣的空間更能感受到其效果。像 1982年 Dis- ney 電影 Tron, 有一段在虛擬空間的機車比賽就是充分運用射影幾何表現寬廣空間的例子。

(13)

圖22. 螢幕上的影像圖23. 寬廣的平面

除了視覺效果的表現外, 射影幾何也用來計算物體移動。依齊次座標的方式在

R

⁴\ {0} 中定義新的相等關係

[x : y : z : w] = [ζx : ζy : ζz : ζw]

這裡 ζ 6= 0, 也就是將一條通過原點的直線上所有點, 除了原點外, 視為一點。這樣的新空間稱為

_RP

³, 而將

R

³ 想成

_RP

³ 的部分集合, 也就是

(x, y, z) ∼ [x : y : z : 1]

則

_R

³ 中的平移 (x, y, z) 7→ (x + a, y + b, z + c) 可以寫成

[x : y : z : 1] 7→ [x + a : y + b : z + c : 1]

乘上 w 6= 0 得到

[xw : yw : zw : w] 7→ [xw + aw : yw + bw : zw + cw : w]

也就是擴張到

_RP

³ 會成為

[x : y : z : w] 7→







1 0 0 a 0 1 0 b 0 0 1 c 0 0 0 1













x y z w







這樣在

_R

³ 中不能用單一矩陣表達的平移動作在

_RP

³ 可以寫成單一矩陣運算, 非常方便。加上旋轉在

_RP

³ 也是 4 乘 4 矩陣, 可以說射影幾何中剛體運動 (rigid motion) 就是矩陣計算。

(14)

5. 結語

近年來電腦硬體的進步加上 3D 動畫軟體的蓬勃發展, 製作 3D 動畫越來越輕鬆只要用家庭電腦便能做出精彩的動畫。這樣的進步不只表現在娛樂上, 越來越多科學現象的模擬, 專門技術的訓練都使用了 3D 技術。對數學來說, 很多問題視覺化後會更清楚。尤其動畫提供我們除了x, y, z 座標外另外一個維度的觀察, 投在 2D 螢幕上正好彌補失去的維度, 是幾何視覺化的利器。 1998 年國際數學年會就開始有數學動畫的展示 [3], 有很多精彩作品如當時的明尼蘇達大學幾何中心製作的「Outside In」, 「Shape of Space」等等。這幾年網路上我們也看到許多作品, 像布朗大學 Thomas Banchoff [5] 加州理工大學 Tom M. Apostol [4]。

欣賞別人的作品可以看到有趣的數學性質, 自己做幾何動畫就更有意思了 [2]。在學習 3D 動畫過程中若能注意到幕後的數學性質, 則對理論科學與應用科學之間互相幫忙又不盡相同的妙處會有深切感受, 不論是欣賞或學習相信 3D 電腦動畫能讓我們快樂的體驗數學。

參考文獻

1. 故宮博物院,http://www.npm.gov.tw/collections/painting7.htm.

2. 李華倫,http://www.math.chu.edu.tw/GemAni/Index.htm.

3. VideoMath 1998,http://www-sfb288.math.tu-berlin.de/VideoMath.

4. T. M. Apostol,http://math.caltech.edu/people/apostol.html.

5. T. Banchoff,http://www.geom.umn.edu /˜banchoff/projects.html.

6. R. Parent,Computer Animation: Algorithms and Techniques, Morgan-Kaufmann, 2002.

7. A. Watt and M. Watt, Advanced Animation and Rendering Techniques, ACM Press, 1992.

—本文作者任教於中華大學應用數學系—

談 3D 動 畫 原 理