three.js のメッシュ探索をBVHで組み立てる

three.js のメッシュ探索をBVHで組み立てる。gkjohnson-three-mesh-bvh

three-mesh-bvh は three.js のメッシュに対するレイキャスティングと空間クエリを、バウンディングボリューム階層で処理する実装です。三角形を毎回すべて調べる代わりに、境界ボリュームで候補を絞る構造を使います。README の対象は、交差判定や最近傍探索を行う three.js アプリです。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。three.js のメッシュ探索をBVHで組み立てる。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

既存メッシュへ拡張関数を付ける流れ。gkjohnson-three-mesh-bvh

README は既製の拡張関数を利用する入口と、BVHを直接クエリする入口を分けています。既存の Mesh に機能を加える場合と、点や線など別のプリミティブを扱う場合では、選ぶ API が違います。まずサンプルのジオメトリで交差結果を照合し、元の three.js の座標系と更新タイミングが一致しているかを確認します。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。既存メッシュへ拡張関数を付ける流れ。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

非同期生成とシリアライズのトレードオフ。gkjohnson-three-mesh-bvh

BVH の生成は同期処理だけでなく非同期の経路が用意されています。大きなジオメトリでは生成を画面処理と同じタイミングに置くかが問題になります。シリアライズ機能を使う場合は、保存した構造を別の実行時に読み戻せるか、ジオメトリ変更後に再生成が必要かを、README の例と実際のバージョンで確認します。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。非同期生成とシリアライズのトレードオフ。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

three.js メッシュのためのバウンディングボリューム階層。gkjohnson-three-mesh-bvh

three-mesh-bvh は、three.js の BufferGeometry オブジェクトに対してバウンディングボリューム階層（BVH）を構築する JavaScript ライブラリです。README では、メッシュに対するレイキャスティングを高速化し、空間クエリを可能にする方法として説明されています。主な例では、80,000 ポリゴンのモデルに対して毎秒 60 フレームで 500 本のレイを投射しています。BVH はジオメトリをバウンディングボリュームのツリーに編成するため、レイ交差テストはレイと交差しないメッシュの大部分をスキップできます。プロジェクトには、この技術に馴染みのない読者のために、バウンディングボリューム階層に関する Wikipedia の記事へのリンクが含まれています。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。three.js メッシュのためのバウンディングボリューム階層。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

既製の拡張関数を使用する。gkjohnson-three-mesh-bvh

README には、ライブラリを使用する 2 つの方法が示されています。1 つ目は、computeBoundsTree や acceleratedRaycast などの関数を three.js のプロトタイプにパッチし、ジオメトリに対して computeBoundsTree を呼び出して BVH を生成します。2 つ目は、MeshBVH を手動で構築し、ジオメトリの boundsTree プロパティに割り当てます。その後、three.js の Raycaster によるレイキャスティングは加速関数で動作します。README はまた、raycaster.firstHitOnly を true に設定すると、raycast 関数がより高速な 'raycastFirst' パスを使用することにも言及しています。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。既製の拡張関数を使用する。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

点、線、その他のプリミティブのための専用 BVH。gkjohnson-three-mesh-bvh

三角形メッシュに加えて、ライブラリは THREE.Points、THREE.Line、THREE.LineLoop、THREE.LineSegments のジオメトリ向けに PointsBVH、LineBVH、LineLoopBVH、LineSegmentsBVH を提供します。これらは、computeBoundsTree に type オプションを渡すか、クラスを直接構築して使用できます。各 BVH タイプは、そのプリミティブタイプ向けに shapecast や raycastObject3D を含むコア API を実装しています。README は、これらの専用 BVH では現時点で Web Worker 生成やシリアライゼーションなどの一部の機能がサポートされていないと述べています。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。点、線、その他のプリミティブのための専用 BVH。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

BVH を直接クエリする。gkjohnson-three-mesh-bvh

より多くの制御が必要なアプリケーションでは、MeshBVH インスタンスを直接クエリできます。README の例では、bvh.raycastFirst(ray) を使用して最初のヒットを取得し、bvh.intersectsSphere(sphere) を使用して球体交差をテストしています。クエリはローカルジオメトリ空間で動作するため、レイや球体はメッシュのワールド行列の逆行列で変換する必要があり、hit.point などの結果はワールド空間に変換し直す必要があります。README は、three.js の組み込みレイキャスティングを使用する場合、結果は自動的にワールド座標に変換されると警告しています。

gkjohnson-three-mesh-bvhについてこの章から確定できるのは、READMEに書かれた機能と前提の範囲です。BVH を直接クエリする。gkjohnson-three-mesh-bvhを別のツールの説明で補わず、入力、処理、出力のどこまでが資料に現れているかを切り分けます。記載のないAPI、対応環境、性能値は推測せず、採用条件には含めません。

編集部の結論

gkjohnson-three-mesh-bvhはthree.js のメッシュ探索をBVHで組み立てるを必要とする開発者に向きます。記載された機能と無関係な用途や、資料にない性能保証を求めるチームには向きません。採用前に既存メッシュへ拡張関数を付ける流れの条件を確認し、READMEに示された入口と対象環境で判断してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes