WebGPUにおけるUE5 Nanite技術

 (github.com/Scthe)
1 ポイント 投稿者 GN⁺ 2024-09-06 | 1件のコメント | WhatsAppで共有

Nanite WebGPU

要約

  • Nanite WebGPUは、WebブラウザでWebGPUを使ってNaniteを実装したプロジェクト。
  • Chromeでのみ利用可能。
  • Meshlet LOD階層、ソフトウェアラスタライザ、ビルボードインポスターなどを含む。
  • フラスタムおよびオクルージョンカリングをサポート。
  • テクスチャと頂点法線をサポート。
  • Denoを使ってオフラインでも動作。

機能

  • Meshlet LOD階層

    • ブラウザでWebAssemblyを使ってメッシュを前処理する。
    • ファイルのエクスポート機能も提供する。

  • ソフトウェアラスタライザ

    • WebGPUはatomic<u64>をサポートしていない。
    • 深度(u16)とオクタヘドラルエンコードされた法線(2 * u8)を32ビットに圧縮する。

  • ビルボードインポスター

    • カメラ位置に応じて12枚の画像をブレンドして表示する。
    • 上下ビューは処理しない。

  • カリング

    • インスタンス単位: フラスタムおよびオクルージョンカリング。
    • Meshlet単位: フラスタムおよびオクルージョンカリング。
    • 三角形単位: ハードウェアのバックフェースカリングおよびz-バッファ。

  • GPUベースレンダリングとCPU実装を切り替え可能。

  • テクスチャ付きモデルとさまざまなオブジェクトを同時にサポート。

  • 実行時にパラメータ変更が可能。

  • 統計情報を提供: メモリ、ジオメトリ、Meshlet数、三角形数など。

  • カスタムファイル形式をサポート。

  • 頂点位置の量子化およびオクタヘドラルエンコードされた法線をサポート。

  • ウィンドウサイズ変更に対応する。

  • Denoを使ってオフラインでも動作。

  • WebGPUおよびWGSLコードをプロジェクトにコピー可能。

目標

  1. シンプルさ: OBJファイルから始め、すべての作業をアプリ内で処理する。
  2. 実験: さまざまな設定を変更して性能をテストできる。

デモシーン

  • Jinx: 120*120インスタンス、640m三角形。
  • Lucyとドラゴン: 70*70インスタンス、1.7b三角形。
  • Lucy: 110*110インスタンス、1.2b三角形。
  • ドラゴン: 70*70インスタンス、1.2b三角形。
  • ウサギ: 500*500インスタンス、1.2b三角形。
  • インポスタープレビュー: インポスターテクスチャサイズを拡大。

使い方

  • **[W, S, A, D]キーで移動し、[Z, SPACEBAR]**で上下移動する。
  • カリングオプションをトグルしてバグを解消できる。
  • プロファイルボタンを使って性能を測定できる。

FAQ

  • UE5のNaniteとの主な違い

    • 単純化の誤差メトリクスが単純。
    • Meshletの単純化が単純。
    • 2段階のオクルージョンカリングがない。
    • シェーダーに作業キューがない。
    • VRAM内で未使用のLODを削除してストリーミングする仕組みがない。
    • 可視性バッファがない。
    • 組み込みのシャドウ/マルチビューがない。
    • 多数の異なるオブジェクトを処理できない。
    • GPUプロファイラがない。

  • 数十億個の三角形が意味すること

    • 高密度メッシュは性能に悪影響を与える可能性がある。
    • インスタンス数が多いとVRAMを多く消費する。
    • シーンの配列が性能に影響する。

  • Naniteの驚くべき点

    1. DAGの目的は、遠くのオブジェクトに対して少ない三角形を使うことではない。
    2. Nanite自体よりも、カリングとMeshlet処理に多くの時間を費やす。
    3. Meshlet LOD階層は簡単に機能する。
    4. メッシュがきれいに単純化されないと性能が落ちる。

  • メッシュ単純化

    • 単純化の過程では多くの問題が発生しうる。
    • UE5は独自のメッシュ単純化コードを使用している。

  • 誤差メトリクス

    • 適切なMeshletを選ぶことがNaniteの核心。

  • Nanite実装を自分で書くべきか?

    • UE5を使うのが最も簡単な方法。
    • 学習目的なら自分で実装してみる価値がある。

  • Meshletバックフェースコーンカリングの価値

    • 高密度メッシュで効果的。
    • オクルージョンカリングと重複する可能性がある。
    • WebAssembly呼び出しにより性能低下が発生する可能性がある。

GN⁺のまとめ

  • Nanite WebGPUは、WebブラウザでNaniteを実装した興味深いプロジェクト。
  • さまざまなカリング手法とソフトウェアラスタライザによって性能を最適化している。
  • UE5と比べると、単純化と誤差メトリクスに違いがある。
  • 学習目的なら自分で実装してみる価値はあるが、実際のプロジェクトではUE5を使うほうがよいかもしれない。
  • 類似機能を持つプロジェクトとして、Unreal Engine 5のNaniteがある。

関連記事

1件のコメント

 
GN⁺ 2024-09-06
Hacker Newsの意見

  • Naniteのサードパーティ実装が興味深い

    • Naniteはグラフィックメッシュを表現する非常に巧妙な方法
    • 繰り返しはリンクで処理され、再帰的にサブメッシュを共有できる
    • メッシュ内部の詳細度レベルをサポートしており、小さなサブメッシュは削除される
    • 大規模な反復コンテンツを少ないデータで高速にレンダリングできる
    • 現在のGPU設計はNaniteに適しておらず、新しいハードウェア対応が必要
    • Unreal Engineのデモでは、同じ彫像を繰り返し使うシーンが示されている
    • Naniteメッシュの作成は複雑で、現時点ではUnreal Engineのエディタでしか行えない
    • フォーマット内部のオフセットは攻撃対象領域を生む可能性がある

  • BevyにもNaniteのアイデアを実装したVirtual Geometryがある

    • Bevyの作者自身が直接質問に答えられる
    • SctheがBevyのコード改善に貢献している

  • デモがユーザーエージェント文字列を使って互換性を判定しているのはよくない

    • 機能互換性は個別に検出して使うべき
    • Chromiumを使っていてWebGPUも頻繁に使うが、デモはChromeを要求する

  • iPhone 12 Pro MaxでWebGPUが動作しない

    • 実験的機能でWebGPUを有効にしたが、他のウェブサイトでは動作する
    • ウェブアプリが失敗原因についてもっと多くの情報を提供してほしい

  • WebGPUの64ビットアトミック不足を解決するために妥協が必要だった

    • デスクトップ級ハードウェアではほぼ普遍的にサポートされている

  • 名前と説明が混乱を招き、商標侵害の可能性もある

    • 実際のNaniteとは無関係で、UE5とも無関係な人物が実装したもの
    • BevyのVirtual Geometryのほうが有用かもしれない

  • 他のエンジンのLODシステム比較

    • Godotは自動LODを提供する
    • UnityはLODモデルを手動で生成する必要がある
    • NeoAxisは興味深いアプローチを持っているが、性能はよくない
    • Unrealは多くのオブジェクトを画面に表示する点で大きく先行している

  • three.jsフォーラムで仮想ジオメトリ実装についての興味深い議論を読んだ

    • ウェブグラフィックス実装に関する議論とトレードオフが興味深かった

  • ソフトウェアラスタライザがハードウェアラスタライザより速いという主張への疑問

    • GPUの目的はラスタライゼーションを高速化すること
    • ソフトウェアラスタライザがGPU上で動作する場合を除けば理解しづらい

  • M2 Maxでjinxデモ実行中にWebGPUエラーが発生

    • "Fill size (7398781) is not a multiple of 4 bytes" というエラーメッセージが表示される