3D Gaussian Splatting 檢視器測試

3D Gaussian Splatting 測試

#

這是一個在 Hugo 部落格中展示 3D Gaussian Splatting 模型的測試頁面。

如何建立 Shortcode

#

步驟一：建立 Shortcode 檔案

#

在你的 Hugo 網站根目錄中，找到 layouts/_shortcodes/ 資料夾（如果沒有請建立），然後建立一個新檔案 gaussian-splat.html。

步驟二：複製程式碼

#

將以下程式碼完整複製到 gaussian-splat.html 檔案中：

你可以前往參考頁面查看完整的程式碼內容並複製內容到新建立的 gaussian-splat.html 檔案中。

步驟三：準備你的模型檔案

#

將 .ply 或 .splat 檔案放在文章的目錄中：

content/
└── your-article/
    ├── index.md          ← 你的文章檔案
    └── models/           ← 建立這個資料夾
        └── your-model.ply ← 你的 3DGS 模型

步驟四：重啟 Hugo 伺服器

#

當你第一次新增這個功能時，需要重啟 Hugo 開發伺服器：

1. 在終端機中按 Ctrl + C 停止伺服器
2. 重新執行 hugo server 啟動伺服器
3. 重新整理瀏覽器頁面

互動方式

#

• 🖱️ 左鍵拖曳：旋轉視角
• 🔍 滾輪：縮放
• ✋ 右鍵拖曳：平移

SAM3D Splat 模型展示

#

預設角度：

自訂角度範例（從側面看）：

修正座標軸範例（如果模型旋轉軸不對，可以試試這些）：

技術說明

#

這個 viewer 使用 @mkkellogg/gaussian-splats-3d 函式庫，可以直接在瀏覽器中渲染 3D Gaussian Splatting 模型。

支援格式：

• .ply - 3DGS 訓練輸出的原始格式
• .splat - 壓縮後的格式（檔案更小）

注意事項：

• 需要支援 WebGL2 的瀏覽器
• 較大的模型可能需要較長的載入時間
• 效能取決於 GPU 能力

解決座標軸問題（旋轉軸不對）：

如果模型旋轉會卡住，通常是因為座標軸方向不對（Y-up vs Z-up）。可以使用以下方法：

1. 使用座標系統預設（最簡單）：

{{< gaussian-splat id="demo" src="models/model.ply" coordinateSystem="z-up" >}}

2. 手動旋轉模型（精確控制）：

{{< gaussian-splat id="demo" src="models/model.ply" 
    rotateX="90" 
    rotateY="0" 
    rotateZ="0" >}}

常見的修正：

• 如果模型是 Z-up 但需要 Y-up：rotateX="-90" 或 coordinateSystem="z-up"
• 如果模型上下顛倒：rotateX="180"
• 如果模型左右相反：rotateY="180"

其他調整：

3. 自動適配：讓系統自動計算模型邊界並調整相機

{{< gaussian-splat id="demo" src="models/model.ply" autoFit="true" >}}

4. 手動調整模型位置/縮放：

{{< gaussian-splat id="demo" src="models/model.ply" 
    modelX="0" modelY="0" modelZ="0"
    modelScale="1" >}}

自訂相機角度：

• cameraX, cameraY, cameraZ：相機位置（預設：0, 0, 5）
• lookAtX, lookAtY, lookAtZ：相機看向的位置（預設：0, 0, 0）
• cameraUpX, cameraUpY, cameraUpZ：相機上方方向（預設：0, -1, 0）

模型變換參數：

• modelX, modelY, modelZ：模型位置偏移（預設：0, 0, 0）
• modelScale：模型縮放比例（預設：1）
• rotateX, rotateY, rotateZ：模型旋轉角度（度數，用於修正座標軸方向）（預設：0, 0, 0）
• coordinateSystem：座標系統預設（“y-up” 或 “z-up”，預設：“y-up”）
• autoFit：自動適配模型並調整相機（預設：false）