iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1

引言

由前幾天的介紹,我們已經知道如何由:

  1. 兩個三維座標
  2. 經由投影轉為兩個二維座標,
  3. 再由DDA演算法畫出直線。

其實到目前為止,已經可以做到輸入多組三維座標,並在二維螢幕繪製出來了!
也就是說,這已經可以寫出靜止的三維繪圖器囉~

但,就是一個但...
任何的3D引擎都是需要可以動的啊!

雖然目前的結果可以做到純粹

  1. 平移觀察螢幕,
  2. 再次將所有座標點投影DDA更新到螢幕上,

卻很遺憾地永遠只能有單一角度觀察...
舉個好懂的例子來說明吧:

    電視機在你的面前,而且開關是打開的,
    本應該開心拿著冰淇淋、爆米花看電視的你卻苦著一張臉... 為什麼呢?
    
    因為電視居然是側面朝著你!
    我們都知道,電視是側面像著你的話,你只能聽聲音乾過癮了...
    
    可能有人說:「奇怪?你怎麼不走到『面對』電視的方向呢?」
    
    但今天只能『平移』、『DDA』的你可做不到...
    你能做到的只有盡量靠近電視、且繼續面對原本的方向,愚蠢地繼續聽著聲音...
    那你無緣欣賞的電視機,彷彿在嘲笑你一般,繼續嘲諷地播放電視節目QQ

那要怎麼樣才能面對電視呢?

我們需要旋轉
要將座標進行旋轉的話,就需要「旋轉矩陣」的協助。


旋轉矩陣

旋轉矩陣是矩陣的一種,
我們會使用到兩種旋轉矩陣:

  1. 繞X軸旋轉
  2. 繞Y軸旋轉

X, Y軸就是大家螢幕上橫的座標軸直的座標軸
也就是分別繞這兩軸旋轉的角度,
可以講得很白話:

  1. 繞X軸旋轉大概就是你的頭往前低,及往後仰的這種旋轉
  2. 繞Y軸旋轉大概就是你的頭往左轉,及往右轉的這種旋轉

有了這種比喻後,大家應該可以看出這兩種旋轉可以做到日常生活中所有頭部動作囉!

最後,為什麼要用旋轉矩陣呢? 因為只要把座標乘上對應旋轉矩陣,就是相當於將螢幕旋轉了該角度哦!

旋轉矩陣公式

這兩種矩陣看起來都很複雜,但不需要擔心,他只是使用到簡單的乘法、加法而已,雖然有sin, cos等三角函數,但這個我們可以先不理會,到時候會交給C語言的函數來運算~只要知道https://chart.googleapis.com/chart?cht=tx&chl=%5Ctheta%20_%7Bx%7Dhttps://chart.googleapis.com/chart?cht=tx&chl=%5Ctheta%20_%7By%7D 分別代表「往x軸旋轉方向旋轉幾度(頭低幾度、仰幾度)」及「往y軸旋轉方向旋轉幾度(頭左轉幾度、右轉幾度)」就行。

  1. 繞x軸旋轉
    https://chart.googleapis.com/chart?cht=tx&chl=%5Cbegin%7Bbmatrix%7D%201%20%26%200%20%26%200%5C%5C%20%200%20%26%20cos%5Ctheta%20_%7Bx%7D%20%26%20-sin%5Ctheta%20_%7Bx%7D%5C%5C%20%200%20%26%20sin%5Ctheta%20_%7Bx%7D%20%26%20cos%5Ctheta%20_%7Bx%7D%20%5Cend%7Bbmatrix%7D

  2. 繞y軸旋轉
    https://chart.googleapis.com/chart?cht=tx&chl=%5Cbegin%7Bbmatrix%7D%20cos%5Ctheta%20_%7By%7D%20%26%200%20%26%20sin%5Ctheta%20_%7By%7D%5C%5C%20%200%20%26%201%20%26%200%5C%5C%20%20-sin%5Ctheta%20_%7By%7D%20%26%200%20%26%20cos%5Ctheta%20_%7By%7D%20%5Cend%7Bbmatrix%7D

這兩個矩陣使用方法是:

假如有個三維座標(10, 20, 30),需要計算螢幕旋轉https://chart.googleapis.com/chart?cht=tx&chl=%5Ctheta%20_%7Bx%7D 後此點變成多少,則我們的方式是寫成這樣:
https://chart.googleapis.com/chart?cht=tx&chl=%5Cbegin%7Bbmatrix%7D%201%20%26%200%20%26%200%5C%5C%20%200%20%26%20cos%5Ctheta%20_%7Bx%7D%20%26%20-sin%5Ctheta%20_%7Bx%7D%5C%5C%20%200%20%26%20sin%5Ctheta%20_%7Bx%7D%20%26%20cos%5Ctheta%20_%7Bx%7D%20%5Cend%7Bbmatrix%7D%5Cbegin%7Bbmatrix%7D%2010%5C%5C%20%2020%5C%5C%20%2030%20%5Cend%7Bbmatrix%7D
做矩陣相乘,乘完後這個式子相當於:
https://chart.googleapis.com/chart?cht=tx&chl=%5Cbegin%7Bbmatrix%7D%201%5Ctimes%2010%20%2B%200%5Ctimes%2020%20%2B%200%5Ctimes%2030%5C%5C%20%200%5Ctimes%2010%20%2B%20cos%5Ctheta%20_%7Bx%7D%5Ctimes%2020%20%2B%20-sin%5Ctheta%20_%7Bx%7D%5Ctimes%2030%5C%5C%20%200%5Ctimes%2010%20%2B%20sin%5Ctheta%20_%7Bx%7D%5Ctimes%2020%20%2B%20cos%5Ctheta%20_%7Bx%7D%5Ctimes%2030%20%5Cend%7Bbmatrix%7D
因此我們得到一個新的、旋轉後的座標:

https://chart.googleapis.com/chart?cht=tx&chl=%5Cleft%20(%201%5Ctimes%2010%20%2B%200%5Ctimes%2020%20%2B%200%5Ctimes%2030%2C%200%5Ctimes%2010%20%2B%20cos%5Ctheta%20_%7Bx%7D%5Ctimes%2020%20%2B%20%5Cleft%20(%20-sin%5Ctheta%20_%7Bx%7D%20%5Cright%20)%5Ctimes%2030%2C%20%200%5Ctimes%2010%20%2B%20sin%5Ctheta%20_%7Bx%7D%5Ctimes%2020%20%2B%20cos%5Ctheta%20_%7Bx%7D%5Ctimes%2030%5Cright%20)

這個看起來非常複雜的座標式子,其實就是一堆運算,我們只要了解式子怎麼構成,就可以用C語言將公式寫出來囉!


結論

如果真的無法理解旋轉矩陣也沒關係,我們只要知道它可以幫我們達成旋轉的任務就好~
只要座標與旋轉矩陣相乘,就會跑出一個螢幕經過旋轉後,此座標的新位置


上一篇
[11屆鐵人賽Day8] DDA演算法—C語言實作
下一篇
[11屆鐵人賽Day10] 旋轉矩陣—C語言實作
系列文
若沒有遊戲引擎、合作夥伴...做得出遊戲嗎? 不試試看不知道吧? [使用C語言]30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言