WebGL圖形編程實戰【7】：變換流水線 × 坐標系與矩陣精講

變換流水線

局部坐標系：是坐標系以物體的中心為坐標原點，物體的旋轉、平移等操作都是圍繞局部坐標系進行的，這時，當物體模型進行旋轉或平移等操作時，局部坐標系也執行相應的旋轉或平移操作。
世界坐標系：一個三維場景中通常都不會只有一個物體．我們真正需要的是把我們建立的物體按照我們所需要的形式擺放在場景之中．每個物體分布在場景的適當的位置上．整個場景的坐標系就稱為世界坐標系
相機坐標系：相機的重心為原點，上方向為y軸，原點與視點的連線為z軸，x軸為yoz面的垂線
投影坐標系：是相機坐標系經過投影矩陣轉換后得到的空間坐標系，之所以叫裁剪坐標系，是因為投影矩陣約定了視角的上下左右前后邊界（對應的是相機的Frustum范圍），后面會將處于邊界之外的數據直接Clip到邊界上
規范化設備坐標系（Normalized Device Coordinates）：NDC指的是與設備平臺無關的一套三維坐標系（比如同一個物件，無論設備使用什么樣的分辨率，在這個坐標系中的數值都是相同的）
屏幕坐標系：是NDC坐標系經過視口變換后得到的空間坐標系，即NDC坐標系在屏幕上所占的比例，即屏幕坐標系

模型變換

模型變換：是從模型坐標系到世界坐標系的轉換。

簡單通俗來講，3D建模之初，模型有自己的坐標系，以及相應的點坐標。就是將場景中的模型擺好，這個過程就叫模型變換。

在復合變化當中，模型變換不同順序有不同的結果，其實就是因為矩陣相乘不滿足交換律，但滿足結合律，所以對應同一個復合變換，可以先得出其中的基礎變換的矩陣乘積，再與輸入向量相乘。

齊次坐標

在歐式幾何當中，最重要的一個定理是：兩條平行線永不相交。但是在實際生活應用中有很多非歐式幾何的場景，比如：透視空間、透視投影等。那么齊次坐標就是用來解決這個問題的。

概述

齊次坐標是用n+1維向量表示n維向量的坐標系統，用于統一幾何變換和表示無窮遠點

定義與基本概念
齊次坐標是一種數學工具，通過增加一個額外維度將n維向量表示為n+1維向量。例如：
- 二維點(x,y)的齊次坐標為(x,y,w)，其中w為非零實數，實際坐標可通過(x/w, y/w)還原。
- 三維點(x,y,z)同理擴展為(x,y,z,w)。
- 核心特點：齊次坐標具有規模不變性，即(kx,ky,kw）（k!=O）與原坐標(x,y,w)表示同一個點。
引入齊次坐標的目的
- 統一幾何變換：在計算機圖形學中，平移、旋轉、縮放等變換可通過單一的4x4矩陣乘法完成，簡化計算。
- 表示無窮遠點：當w=0時，(x,y,0)表示二維空間中的無窮遠點（方向向量)，解決了歐氏坐標無法表達無限遠的問題。
- 射影幾何兼容：平行線在射影空間中相交于無窮遠點，齊次坐標為此提供了代數支持。
規范化處理
- 齊次坐標的規范化指將W置為1(即(x,y,w）→ (x/w,y/w,1))，以消除尺度不確定性，便于實際計算。
數學原理示例
- 平行線相交證明：
  在齊次坐標系下，兩條平行線Ax+By+C=O和Ax+By+D=O可表示為Ax+By+Cw=O和Ax+By+Dw=0。當w=O時，解為(B,-A,0)，即無窮遠交點。

優勢

可以表示無窮遠

可以表示點在直線或者平面

在齊次坐標下，判斷點是否位于直線或平面上的條件可統一表示為向量內積為零

二維空間中點在直線上的判斷

直線表示：直線方程為 ax + by + c = 0 ，用齊次坐標表示為向量 l = (a, b, c) ^ T。
點的齊次坐標：點 P = (x, y) 的齊次坐標為 P’ = (x, y, 1)。
判定條件：點 P 在直線 l 上的充要條件是內積 l x P’ = 0 ，即： ax + by + c*1 = 0 <=> ax + by + c = 0
幾何意義：內積為零等價于點坐標滿足直線方程。

三維空間中點在平面上的判斷

平面表示：平面方程為 ax + by + cz + d = 0 ，用齊次坐標表示為向量 s = (a, b, c, d)^T 。
點的齊次坐標：點 P = (x, y, z) 的齊次坐標為 P’ = (x, y, z, 1) 。
判定條件：點 P 在平面 s 上的充要條件是內積 s * P’ = 0 ，即： ax + by + cz + d * 1 = 0 <=> ax + by + cz + d = 0
幾何意義：內積為零等價于點坐標滿足平面方程。

總結

核心條件：點 P 的齊次坐標 P’ 與直線 l 或平面 s 的內積為零。
優勢：統一處理有限點和無窮遠點，不依賴坐標縮放，簡化幾何計算。
公式表示：
- 二維直線：l * P’ = 0 其中 P’ = (x, y, 1)
- 三維平面：s * P’ = 0 其中 P’ = (x, y, z, 1)

可以表示兩條直線的交點

在齊次坐標下，兩條直線 l 和 m 的交點可以通過叉乘運算直接計算，并利用點積條件驗證其幾何意義

直線交點的齊次坐標表示

叉乘定義：在二維投影幾何中，兩條直線 l = (a1, b1, c1)^T 和 m = (a2, b2, c2)^T 的交點 ( \mathbf{p} ) 由叉乘給出：

p = l * m

叉乘結果 p = (px, py, pw)^T 是一個齊次坐標點。

交點滿足兩條直線的方程

點積條件：若 p 是兩直線的交點，則它必須同時位于 l 和 m 上。根據點在直線上的條件(l ^ T * p = 0) 和(m ^ T * p = 0)，可以驗證：

l ^T * p = l ^ T (l * m) = 0

m ^T * p = m ^ T (l * m) = 0

幾何意義：叉乘結果 p 與 l 和 m 正交，因此滿足直線方程。

叉乘的幾何解釋

正交性：叉乘l * m 生成的向量 p 與 l 和 m 均正交。在齊次坐標下，這等價于點 p 同時位于兩直線上。
交點的唯一性：在投影平面中，兩條不平行的直線必有唯一交點，叉乘直接給出了這一交點的齊次坐標。

齊次坐標的歸一化

坐標形式：叉乘結果 p = (px, py, pw)^T 可能為齊次坐標，需歸一化得到歐氏坐標：

歐氏坐標 = ( p_x/p_w, p_y/p_w) (若 p_w != 0).
無窮遠點：若 p_w = 0，則 p 表示無窮遠點，說明兩直線在歐氏空間中平行。

能夠區分一個向量和一個點

點和向量的區別

點：表示空間中的一個具體位置，例如三維點(x,y,z)
向量：表示方向和大小，沒有位置屬性，例如位移向量(dx,dy,dz)

普通坐標 → 齊次坐標

點的轉換：普通坐標點 (x, y, z) 轉換為齊次坐標時，添加第四個分量 1:

齊次坐標點：} \quad (x, y, z, 1).
向量的轉換：普通坐標向量 (x, y, z) 轉換為齊次坐標時，添加第四個分量 0：

齊次坐標向量：(x, y, z, 0).

齊次坐標 → 普通坐標

點的還原：若齊次坐標為 (x, y, z, 1)，直接去掉第四個分量 1，還原為普通坐標點：

普通坐標點：(x, y, z)
向量的還原：若齊次坐標為 ((x, y, z, 0))，去掉第四個分量 0，還原為普通坐標向量：

普通坐標向量：(x, y, z)

不同方式的圖形變換

平移

讓x的坐標+2表示沿著x平移

手動變換

const data = new Float32Array([1.0, 0.0, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,0.0, 0.0, 1.0, 1.0,
])const data = new Float32Array([3.0, 0.0, 0.0, 1.0,2.0, 1.0, 0.0, 1.0,2.0, 0.0, 1.0, 1.0,
])

js變換（CPU）

for (let i = 0; i < data.length; i += 4) {data[i] += 2.0;
}

著色器（GPU）

gl_Position = vec4(apos.x + 2.0, apos.y, apos.z, 1);

平移矩陣

在這里插入圖片描述

旋轉

手動變換

const newArray = new Float32Array([1.0, 0.0, 0.0, 1.0,1.0, 1.0, 0.0, 1.0,1.0, 0.0, 1.0, 1.0
]);const newArray = new Float32Array([1.0, 0.0, 0.0, 1.0,1.0, 1.0, 0.0, 1.0,1.0, 0.0, 1.0, 1.0
]);

js變換（CPU）

const newArray = new Float32Array(data.length);
const angle = Math.PI / 2;
for (let i = 0; i < data.length; i += 4) {newArray[i] = data[i] * Math.cos(angle) - data[i + 1] * Math.sin(angle);newArray[i + 1] = data[i] * Math.sin(angle) + data[i + 1] * Math.cos(angle);newArray[i + 2] = data[i + 2];newArray[i + 3] = data[i + 3];
}

著色器（GPU）

gl_Position = vec4(apos.x * cosb - apos.y * sinb, apos.x * sinb + apos.y * cosb, apos.z, 1);

旋轉矩陣

在這里插入圖片描述

縮放

手動變換

const newArray = new Float32Array([1.0, 0.0, 0.0, 1.0,1.0, 1.0, 0.0, 1.0,1.0, 0.0, 1.0, 1.0
]);const newArray = new Float32Array([2.0, 0.0, 0.0, 1.0,2.0, 1.0, 0.0, 1.0,2.0, 0.0, 1.0, 1.0
]);

js變換（CPU）

const newArray = new Float32Array(data.length);
for (let i = 0; i < data.length; i += 4) {newArray[i] = data[i] * 2;newArray[i + 1] = data[i + 1] * 2;newArray[i + 2] = data[i + 2] * 2;newArray[i + 3] = data[i + 3];
}

著色器（GPU）

gl_Position = vec4(apos.x * 2, apos.y * 2, apos.z * 2, 1);

縮放矩陣

在這里插入圖片描述

視圖變換

進入世界坐標系空間之后，物體與WebGL相機雖然建立了聯系，但是并沒有進一步確定觀察物體的狀態。當我們把相機的位置進行移動的時候，相機坐標系和世界坐標系不再重合。這意味著我們直接將世界坐標作為最終的坐標繪制，并不能正確的描述觀察者和物體之間的位置關系。如圖，我們將相機沿著x 軸正方向移動 1 個單位。此時世界坐標系的原點（0，0，0）在相機坐標系中的坐標就變成（-1，0，0），這說明我們需要在兩個坐標系之間進行轉換！這個時候就需要調整相機位置姿態，也就是視圖變換。

公式推導

可以看這個知乎的文章：視圖變換和投影變換矩陣的原理及推導，以及OpenGL，DirectX和Unity的對應矩陣

在相機坐標系當中，分別用d（向前向量 direction）, u（向上向量 up ）, r（向右向量right）和p（位置 position）來表示這四個變量。
并假設待求的視圖矩陣為V（將攝像機移動到原點），并將攝像機的三個向量分別與坐標軸對齊，d與z軸正方向對齊，u與y軸正方向對齊，r與x軸正方向對齊。假設將攝像機與坐標軸對齊的矩陣為V，那么V的推導過程如下

其中d、u、r通常這些向量是正交的，且滿足右手坐標系的關系

r = u × d , u = d × r , d = r × u

平移矩陣T：
- 將相機的位置p移到原點
旋轉矩陣R：
- 將相機的三個正交單位向量r（右）、u（上）、d（前）旋轉到與坐標軸對齊。旋轉矩陣由這三個向量作為行向量構成
組合視圖矩陣V：
- 先應用平移，再應用旋轉，因此矩陣相乘順序為R * T

在這里插入圖片描述

視圖變換案例

通過一個透視投影矩陣，模擬人眼觀察效果（FOV 視野角度）

glMatrix.mat4.perspective(projMatrix, 30.0, canvas.width / canvas.height, 1.0, 100.0);

初始化相機矩陣（視圖矩陣）使用 lookAt 函數創建視圖矩陣，表示相機的位置、目標點和上方向

參數說明：修改 x, y, z 值會改變相機的目標點，從而調整視角

[3.0, 3.0, 3.0]: 相機的初始位置（位于 (3, 3, 3) 點）
[x, y, z]: 目標點，即相機看向的方向（由 setTranslate 的參數決定）
[0.0, 1.0, 0.0]：上方向向量（Y軸向上）

const viewMatrix = glMatrix.mat4.create();
glMatrix.mat4.lookAt(viewMatrix, [3.0, 3.0, 3.0], [x, y, z], [0.0, 1.0, 0.0]);

創建模型矩陣并計算 MVP 矩陣：

模型矩陣 (modelMatrix) 表示物體本身的變換（如平移、旋轉等）

MVP 矩陣是通過將投影矩陣 (projMatrix)、視圖矩陣 (viewMatrix) 和模型矩陣 (modelMatrix) 相乘得到的
最終的 MVP 矩陣傳遞給著色器中的 u_formMatrix，用于頂點坐標變換

let modelMatrix = glMatrix.mat4.create();
u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_formMatrix');
MVPMatrix = glMatrix.mat4.create();
glMatrix.mat4.multiply(MVPMatrix, projMatrix, glMatrix.mat4.multiply(MVPMatrix, viewMatrix, modelMatrix));
gl.uniformMatrix4fv(u_ModelMatrix, false, MVPMatrix);

第一人稱視角

第一人稱視角的核心是相機始終位于觀察者的“眼睛”位置，并朝向觀察方向

視線方向與水平方向計算

lookAtDirction: 從相機位置指向目標點的方向向量（即視線方向）
rightDirection: 水平方向向量，通過視線方向與上方向叉乘得到

const lookAtDirction = glMatrix.vec3.subtract(glMatrix.vec3.create(), lookAtPosition, eyePosition);
glMatrix.vec3.normalize(lookAtDirction, lookAtDirction);const rightDirection = glMatrix.vec3.cross(glMatrix.vec3.create(), updirction, lookAtDirction);
glMatrix.vec3.normalize(rightDirection, rightDirection);

第三人稱視角

與第一人稱視角不同的是，相機始終位于觀察對象的后方或側面，用戶可以看到自己控制的角色或物體

特性	第一人稱視角	第三人稱視角
相機位置	位于“眼睛”位置，跟隨移動	固定在角色背后或側面，不隨移動變化
目標點	始終指向視線前方	始終指向角色中心
移動方式	相機位置改變，視角跟隨移動	角色移動，相機視角固定或繞其旋轉
交互操作	按鈕控制前后左右移動	按鈕控制視角繞角色旋轉
視覺體驗	用戶感覺自己在場景中行走	用戶看到角色在場景中活動

投影變換

在前面已經了解了正交投影和透視投影，WebGL圖形編程實戰【3】：矩陣操控 × 從二維到三維的跨越

公式推導

正交投影

在這里插入圖片描述

正交投影可以分為兩步：第一步為平移，第二步為縮放。將長方體（目標）投影到畫布上

在這里插入圖片描述

透視投影

在這里插入圖片描述

案例

在進行正交投影和透視投影的時候可以直接使用封裝好的函數

glMatrix.mat4.ortho(projMatrix, -1, 1, -1, 1, -1, 100);
glMatrix.mat4.perspective(projMatrix, 30.0, canvas.width / canvas.height, 1.0, 100.0);

還是以正方體展示為例：

NDC變換

在這里插入圖片描述

視口變換

該轉換的目的在于將某個在ndc坐標系的點p(x, y, z) ，轉換為屏幕坐標系中的點p1（x1, y1, z1) , 更具體的來說就是將x軸的 [-1,1]轉換為[X,X + Width]，將y軸的[-1,1]轉換為[Y,Y + Height], 將z軸的[-1,1] 轉換為[near,far]

在這里插入圖片描述