グラフィックス開発コミュニティは、 Three.js を使用して Unreal Engine の Nanite スタイルの動的レベル・オブ・ディテール（LOD）システムを再現することを目指す THREE-Nanite の出現により、ブラウザベースの3Dレンダリングにおける興味深い進展を目の当たりにしています。この開発は、Webアプリケーションにおいてブラウザベースの3Dグラフィックスの重要性が増している時期に登場しました。
 |
|---|
| このグラフィックは、ダイナミック LOD システムを説明しており、3Dモデルが視点からの距離に応じて複雑さを変化させる様子を示しています |
動的LODの実装
このプロジェクトは、3Dモデルを動的にクラスタリングし単純化する高度なメッシュ処理システムを実装しています。まだ初期段階にありますが、印象的なパフォーマンスを示しており、ユーザーからは古いハードウェアでも適切なフレームレートが報告されています。あるコミュニティメンバーによると、2010年代後半の Celeron 搭載機器でも、内蔵グラフィックスで数十万個の三角形を効果的に処理し、20-40 fpsを達成しているとのことです。
性能指標：
- 70万個の三角形を処理可能
- レガシーハードウェアでの近距離表示時20 fps
- 遠距離LOD削減時40 fps
技術的課題とコミュニティの洞察
この実装は、開発コミュニティ内で最適化戦略に関する詳細な技術的議論を引き起こしています。現在のバージョンは有望な結果を示していますが、専門家は以下のような改善点を指摘しています：
「LODクアッドツリーカリングとビューフラスタムを使用した単純な実装でも、三角形の数を大幅に削減し、レンダリング速度をさらに向上させることができるでしょう」
現在の実装機能：
- メッシュクラスタリング（ meshlets ）
- 隣接クラスターのグループ化
- メッシュの簡略化（最大128の三角形まで半減）
- 機能を2つのパートに分割
業界全体の動向
このプロジェクトは、Webブラウザにおける3Dグラフィックスの進歩という大きな文脈の中に位置しています。並行して、 WebGPU による Nanite の実装や、 Nanite サポートはまだないものの WebGPU を通じて動作する Unreal Engine 5 など、さまざまな開発が進められています。これらの開発は、Webブラウザでより高度な3Dグラフィックス機能が実現されつつあることを示しています。
今後の開発方針
プロジェクトのロードマップには、LODとDAGカット実装のさらなるテスト、GPUへのジオメトリストリーミングの最適化など、重要な改善が含まれています。コミュニティの関与は、特に複雑なジオメトリを効率的に処理する必要のあるWebベースの3Dアプリケーションにおいて、この技術の成熟を期待する強い関心を示しています。
技術的注釈：LOD（Level of Detail）とは、3Dモデルが視点から遠ざかるにつれて複雑さを減少させる手法を指し、DAG（Directed Acyclic Graph）は異なるディテールレベルを効率的に整理・管理するために使用されます。
参考：THREE-Nanite