Camera and project matrix

object space → world space → camera space → clip space → screen space

今天也來講一些比較基本功、概念類的東西。（因為時差的關係，不小心把整個下午都睡掉了，嗚嗚嗚好慘）
在 render pipeline 裡，物件會先經過一系列的座標轉換，最終透過 shader 畫出來，非常的簡而言之的話座標系的轉換就是決定 3D 到 2D 的過程。
這個概念在理解上並不會是太困難的概念，但實作上是非常重要的，因為它決定了物體在 3D 空間中的位置和如何被 render 到螢幕上。困難的部分是因為其中的運算牽扯到矩陣，那大家都知道數學不會就是不會，還好有 Three.js 來拯救世界。因此今天就只會討論基本的概念，最後用 Three.js 來介紹一下實作的話，可以怎麼寫。

坐標空間

1. Object Space：物體自身的本地坐標系，物體的頂點和其他屬性（像是旋轉、縮放都都會有一個初始值）都定義在這個空間中。
2. World Space：當物體被放置在場景中時，它們的座標會從物體空間轉換到世界空間。這個轉換依賴於物體的 transform 矩陣，包括平移 (translation)、旋轉 (rotation) 和縮放 (scale)，上次有提到，而 transform 矩陣就是把這些變移量合在一起成為 4x4 的矩陣，矩陣的好處是可以一次計算就把改變都應用上去，原本的平移跟縮放會是 vector3、旋轉會是矩陣或是一個角度，合在一起後可以稱為 homogeneous，除了讓這個 transform 可以一次計算，也可以也可以把把算式過程倒推回去。
3. Camera Space：當物體的 world space 座標被轉換到 view space (camera space) 後，相機會將它們相對於相機的位置透過 view matrix 進行處理。
4. Clip Space：接著當物體的座標轉換到 view space 後，使用 projection matrix 和 clip 操作把多餘的地方剔除，進一步轉換到 clip space。在這個空間中，座標會被標準化到一個範圍內，通常是從 -1 到 1，所以我們也稱這個 space 為 NDC (normalized device coordinates)。
5. Screen Space：最後，clip space 的座標會被轉換成 screen space，也就是最終顯示在 2D 螢幕上的圖像。

實作

Three.js 的 API 都包得很高階，真是太神奇、太方便了！！

Model matrix

const localPosition = new THREE.Vector3(1, 1, 1)
const worldPosition = object.localToWorld(localPosition.clone())
   

反之，則可以 call worldToLocal

View matrix

const worldPosition = newTHREE.Vector3(5, 5, 5)
const viewPosition = worldPosition.applyMatrix4(camera.matrixWorldInverse)   

Projection matrix

const viewPosition = newTHREE.Vector3(0, 0, -5)
const clipPosition = viewPosition.applyMatrix4(camera.projectionMatrix)   

這些轉換我自己沒有直接在 Three.js 中使用過，在 OpenGL 這類的語言中，這三個矩陣轉換，又稱 MVP 矩陣，常在 vertex shader 使用以定義物件頂點的位置，然後以利 render pipeline 接下來的步驟方便操作，如 rasterization 等。