如何在 WebAR 中使用 Neural4D 模型？

步驟 1：匯出並最佳化 GLB，提升網頁效能

WebAR 體驗需要兼顧高度逼真的視覺效果與積極的最佳化，確保透過行動網路也能快速載入。.glb（二進位 GLTF）格式是 WebAR 的業界標準。

從 Neural4D Studio 匯出時，我們的系統會自動套用以下符合正式上線需求的標準：

標準	效益
Draco 壓縮	在不損失細節的情況下，最多可將幾何資料大小縮減 90%。
KTX2 紋理編碼	針對 GPU 記憶體最佳化紋理，避免低階裝置上的瀏覽器當機。

步驟 2：實作跨平台 WebAR 檢視器

為在 Android（Scene Viewer）與 iOS（AR Quick Look）之間提供一致的體驗，我們建議使用 Google 的 <model-viewer> 程式庫。

首先，將程式庫加入 HTML 標頭：

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>

接著，使用以下響應式設定嵌入 Neural4D 模型：

<model-viewer 
    src="path/to/neural4d_model.glb" 
    ios-src="path/to/neural4d_model.usdz"
    ar ar-modes="webxr scene-viewer quick-look" 
    camera-controls 
    poster="poster.webp" 
    shadow-intensity="1" 
    auto-rotate>
    <button slot="ar-button" class="ar-button">View in your space</button>
</model-viewer>

步驟 3：確保高張力的視覺品質

WebAR 的光照效果往往會顯得平淡。若要維持 Neural4D 模型的「高張力」美學，請務必使用 HDR 環境貼圖。如此可確保模型的金屬與玻璃表面準確反射真實環境。

Neural4D 模型採用預先烘焙、符合物理特性的 PBR（基於物理的渲染）材質，並完全相容於 model-viewer 的光照引擎。

免費試用 Neural4D

有問題，或遇到這裡未涵蓋的狀況嗎？請造訪我們的意見回饋頁面告訴我們。我們會閱讀每一則訊息。

如何在 WebAR 中使用 Neural4D 模型？

步驟 1：匯出並最佳化 GLB，提升網頁效能

步驟 2：實作跨平台 WebAR 檢視器

步驟 3：確保高張力的視覺品質

產品

功能

公司

資源