圖形學 旋轉與投影矩陣-3

game101 第二次作業； webgl 實作

目錄

圖形學 旋轉與投影矩陣-3

前文簡介

建構透視投影矩陣

繞任意向量的旋轉變換矩陣

設定模型矩陣

添加互動事件

總結

使用 THREEJS 作為基礎架構，建構各類矩陣，自定義矩陣運算，最終完成

正确構模組化型矩陣

正确建構透視投影矩陣

看到變換後的三角形

按 A 和 D 三角形能夠進行旋轉

按 Q 和 E 三角形能夠繞任意過原點的向量進行旋轉

最終效果

在旋轉與投影矩陣第二篇中，詳細解釋了三維變換的原理，詳細解釋了視圖矩陣，規範立方體，投影矩陣，透視投影矩陣參數的概念。三維變換分為縮放變換，平移變換和旋轉變換；視圖矩陣描述了目前相機的位置和旋轉角度得分複原；規範立方體描述了在預設情況下，元素應該處于 [-1. 1]^3 立方體内；投影矩陣描述了将人眼視角轉換為标準相機視角，位于原點，lookAt 為 (0, 0, -1)，up 為 (0, 1, 0)；透視投影參數描述了已知 fov，aspct，near，far 進而推導其他的參數。

理論基礎均已經講解完畢，本章主要講代碼實作，列出過程量

建構透視投影矩陣需要四個參數，fov，aspct，near，far，根據四個參數推導 top，right，bottom，left。将透視相機轉換為标準相機需要兩步：

将透視投影轉換為正交投影，得到轉換矩陣

将正交投影轉換為标準相機，得到正交相機矩陣

\[M_{persp} =M_{ortho} \times M_{persp \rightarrow ortho}

\]

代碼實作

設定 fov 為 90，aspect 為 1，near 為 -3，far 為 -9 的結果

\[M_{persp}=

\left[

\begin{matrix}

-1 & 0 & 0 & 0 \\

0 & -1 & 0 & 0 \\

0 & 0 & -2 & -9 \\

0 & 0 & 1 & 0

\end{matrix}

\right]

繞任意過原點的軸的旋轉變換矩陣理論基礎如下，該表示繞過原點的 n 向量逆時針旋轉 θ 角度的變換矩陣

\[R(n, \theta) =

\cos(\theta) \times I +

(1-\cos(\theta)) \times n \times n^T +

\sin(\theta) \times

0 & -n_z & n_y \\ n_z & 0 & -n_x \\ -n_y & n_x & 0

\\

n_x, n_y, n_z \: 分别是向量\: \overrightarrow{n} \: 的x,y,z值

繞過任意點的向量如何計算呢？上篇也介紹過，先移動到原點計算再逆移動回去

代碼如下

三角形的三個頂點坐标初始值已經固定，若想讓其旋轉，首要方法就是通過矩陣運算改變頂點坐标，改變模型的位置資訊的矩陣叫做模型矩陣，理論基礎如下

\[R_x(\theta)=

1 & 0 & 0 & 0 \\ 0 & \cos(\theta) & -\sin(\theta) & 0 \\

0 & \sin(\theta) & \cos(\theta) & 0 \\ 0 & 0 & 0 & 1

R_z(\theta)=

\cos(\theta) & -\sin(\theta) & 0 & 0 \\

\sin(\theta) & \cos(\theta) & 0 & 0 \\

0 & 0 & 1 & 0 \\

0 & 0 & 0 & 1

R_y(\theta)=

\cos(\theta) & 0 & \sin(\theta) & 0 \\

0 & 1 & 0 & 0 \\

-\sin(\theta) & 0 & \cos(\theta) & 0 \\

這裡構造一個繞 z 軸逆時針旋轉的模型矩陣

調用相應函數即可

至此完成了 games101 的第二次作業，并以 web 端的形式展示出來，算是做了部分創新，有興趣的夥伴可以一起探讨，加油

希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!