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