利用齊次座標進行二維座標轉換

利用齊次座標進行座標轉換

Games 101 第0次作業視覺化表示

作業要求：給定一個點 P=(2,1), 將該點繞原點先逆時針旋轉 45°，再平移 (1,2), 計算出

變換後點的座標（要求用齊次座標進行計算）

目的

1. 瞭解齊次座標表示矩陣的意義
2. 使用 threejs 和 tweenjs 模擬座標轉換過程
3. 建立矩陣進行運算
4. 給定點 P =（2，1），先旋轉，後平移，計算變換後的座標

程式結果

第一階段：描述球繞原點旋轉 45°

第二階段：描述球移動 (2, 1)

理論基礎

在二維世界中，旋轉和縮放都能使用二維矩陣表示，但平移變換不行

為了統一三種座標變換，使用齊次座標，利用 3*3 的矩陣進行運算

點的表示：(x, y, 1) 向量表示：(x, y, 0)

點+向量=向量 向量+向量=向量 點+點=兩點中點

齊次座標表示

齊次座標下的旋轉矩陣

\[\left[ \begin{matrix} cos(θ) & -sin(θ) & 0\\ sin(θ) & cos(θ) & 0 \\ 0 & 0 & 1 \end{matrix} \right] \\ 公式\:1 \]

推導過程

\[\left( \begin{matrix} x^` \\ y^` \\ 1 \end{matrix} \right) = \left[ \begin{matrix} a & b & 0 \\ c & d & 0 \\ 0 & 0 & 1 \end{matrix} \right] * \left( \begin{matrix} x \\ y \\ 1 \end{matrix} \right) \\ 公式\:2 \]

將點 (1, 0, 1) => (cos(θ), sin(θ), 1) 和點 (0, 1, 0) => (-sin(θ), cos(θ), 1) 到公式2，可得到

\[a=cos(θ)\\ b=-sin(θ)\\ c=sin(θ)\\ d=cos(θ) \]

注意點：旋轉矩陣描述的是繞原點，逆時針旋轉θ角度

齊次座標下的平移變換

\[\left[ \begin{matrix} 1 & 0 & t_{x} \\ 0 & 1 & t_{y} \\ 0 & 0 & 1 \end{matrix} \right] \\ 公式\:3 \]

平移變換比較簡單，推導公式就不表述出來了

分析

1. 點 P(2, 1) 轉換為齊次座標 P(2, 1, 0)
2. 構建逆時針旋轉矩陣 MR，與 P 向量相乘 MR * P 得到旋轉後的 P 座標，P = MR * P
3. 構建平移矩陣 MT, 與 P 向量相乘，P = MT * P
4. 最終得到轉換後的結果

程式碼實現

1. 設定點 P 的座標

sphere.position.set(2, 1, 0);

2. 構建旋轉矩陣

rotateMatrix.set(
    Math.cos(deg), -Math.sin(deg), 0,
    Math.sin(deg), Math.cos(deg), 0,
    0, 0, 1,
);

3. 構建平移矩陣

transformMatrix.set( 
    1, 0, 1,
    0, 1, 2,
    0, 0, 1
);

4. 矩陣運算

// 原始 P 點
const step0 = vec1.clone();
// 旋轉後 P 點
const step1 = step0.clone().applyMatrix3(rotateMatrix);
// 平移後 P 點
const step2 = step1.clone().applyMatrix3(transformMatrix);

5. 整個過程採用 tweenjs 進行動畫處理

const tween = new TWEEN.Tween(sphere.position)
    .to({x: step1.x, y:step1.y,z:0 }, 2000)
    .onUpdate(()=>{
        changeText2();
    })

const tween2 = new TWEEN.Tween(sphere.position)
    .to({x: step2.x, y: step2.y, z: 0}, 2000)
    .onUpdate(() => {
        changeText2();
    });