前言
剛好被抓去支援做3D gaussian splatting online viewer。雖然說是WebGPU，但其實這篇更貼近typescript怎麼用webgpu數學函式庫。
Code可以在個人網站剪貼。
以前作業寫過一個很破的trackball control，這次剛好又要再寫一次，做個筆記複習一下。
WebGPU
WebGPU 是一種現代化的網頁圖形和計算 API，旨在提供高效能的 3D 圖形和資料平行運算。
- 現代化設計：它支援 Vulkan、Direct3D 12 和 Metal 等現代 GPU API，提供比 WebGL 更進階的功能。
- 廣泛支援：目前已在 Chrome、Firefox 和 Safari 中開發，並支援多種操作系統。
WebGPU 和 WebGL 都是用於網頁圖形渲染的 API，但它們最主要差在：
- 著色器語言：WebGL 使用 OpenGL 著色語言 (GLSL)，而 WebGPU 則使用 WebGPU 著色語言 (WGSL)。雖然這兩種語言不同，但基礎概念大致相同。
- WebGPU支援Compute shader。
- 注意：目前瀏覽器支援普及程度還不及WebGL，用它開發請三思。
WebGPU數學函式庫
GLM沒有web插件，所以找了wgpu-matrix : greggman/wgpu-matrix: Fast WebGPU 3d math library- WebGPU uses clip space Z 0 to 1, vs WebGL -1 to 1. So ortho, perspective, frustum are different
- WebGPU是column major ( translation vector is in elements 12, 13, 14)
Trackball control
(冷知識，下面這隻allmight是3D掃描的，有18多萬片Gaussian組成)
在電腦圖形學中，Trackball Control（軌跡球控制）是一種用於操控 3D 視圖的互動方式。它模擬了使用者手動旋轉一個虛擬球體來改變視角的操作。這種控制方式常見於 3D 建模軟體和圖形應用中，提供了一種直觀的方式來旋轉、平移和縮放 3D 場景。
以下是 Trackball Control 的一些特點：
1. 旋轉 (Rotate)：使用者可以通過拖動滑鼠來旋轉 3D 物體或視角，模擬了手動旋轉一個球體的效果。
2. 平移(Pan)：可以通過按住特定按鍵（如 Shift）並拖動滑鼠來平移視圖。
3. 縮放(Zoom)：通常通過滑鼠滾輪或特定按鍵組合來進行縮放操作。
2. 平移(Pan)：可以通過按住特定按鍵（如 Shift）並拖動滑鼠來平移視圖。
3. 縮放(Zoom)：通常通過滑鼠滾輪或特定按鍵組合來進行縮放操作。
Pan
把look center 與eye的方向當成z軸，由此分別算出up與right axis。有了up跟right軸後就能想像我們的滑鼠在該軸建立的平面上平移。
接著根據平移量(panVector)一起移動eye與center位置。
Zoom
一樣先用look center與eye位置算出z軸，接著再根據scalar在該軸上平移即可。
Rotate
一樣先算出z軸。
算出沿著y軸旋轉x度的rotation矩陣，套用在剛剛算出的forward(z)向量。
同理算出x軸，套用在旋轉矩陣以沿著該軸旋轉forward(z)向量。
最後的centerToEye是旋轉過後的。
由於我算好look center與eye位置後，用lookat函式幫我算view matrix，這就有個缺點是當旋轉到一定角度後視角會突然flip (如轉視角過頭頂)，這邊之後就比較暴力的限制旋轉角度，進階的解法可以參考OpenGL Camera 最下面的demo檔案，用四元數算旋轉比較穩定。
這個trackball control很基本，如果能做到像blender那樣的手感應該就出師了。
