WebARでNeural4Dモデルを使う方法

ステップ1：Webパフォーマンス向けに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（Physically Based Rendering）マテリアルがベイクされています。これらはmodel-viewerのライティングエンジンと完全に互換性があります。

Neural4Dを無料で試す

ここで解決していない疑問や問題がありますか？フィードバックページからお知らせください。すべてのメッセージに目を通しています。

WebARでNeural4Dモデルを使う方法

ステップ1：Webパフォーマンス向けにGLBをエクスポート・最適化する

ステップ2：クロスプラットフォーム対応のWebARビューアを実装する

ステップ3：臨場感の高いビジュアル品質を実現する

製品

機能

会社情報

リソース