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

隨遇丿而安發表於2021-12-17

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

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

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

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

目的

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

程式結果

第0次作業

第一階段:描述球繞原點旋轉 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);
  1. 構建旋轉矩陣
rotateMatrix.set(
    Math.cos(deg), -Math.sin(deg), 0,
    Math.sin(deg), Math.cos(deg), 0,
    0, 0, 1,
);
  1. 構建平移矩陣
transformMatrix.set( 
    1, 0, 1,
    0, 1, 2,
    0, 0, 1
);
  1. 矩陣運算
// 原始 P 點
const step0 = vec1.clone();
// 旋轉後 P 點
const step1 = step0.clone().applyMatrix3(rotateMatrix);
// 平移後 P 點
const step2 = step1.clone().applyMatrix3(transformMatrix);
  1. 整個過程採用 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();
    });

相關文章