如何在 WebAR 中使用 Neural4D 模型？

步骤 1：导出并优化 GLB，提升 Web 性能

WebAR 体验需要兼顾高画质与大幅优化，确保通过移动网络快速加载。.glb（二进制 GLTF）格式是 WebAR 的行业标准。

从 Neural4D Studio 导出时，我们的系统会自动采用以下可直接用于生产的标准：

标准	优势
Draco 压缩	在不损失细节的情况下，最多可将几何数据大小减少 90%。
KTX2 纹理编码	优化纹理的 GPU 内存占用，避免低端设备上的浏览器崩溃。

步骤 2：实现跨平台 WebAR 查看器

为了在 Android（Scene Viewer）和 iOS（AR Quick Look）上提供一致的体验，我们建议使用 Google 的 <model-viewer> 库。

首先，将该库添加到 HTML 的 header 中：

<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，提升 Web 性能

步骤 2：实现跨平台 WebAR 查看器

步骤 3：确保高张力视觉品质

产品

功能

公司

资源