Webアプリケーションの進化は目覚ましく、その利便性と可用性は疑いようがありません。スマートフォンさえあれば、いつでもどこでもあらゆる情報にアクセスできる時代です。この「いつでも、どこでも」という利便性こそが、建設業界におけるBIM（Building Information Modeling）の世界をWebアプリケーションへと拡張したいと考える最大の動機でしょう。

技術やハードウェアの制約により、BIMをWeb上で表現することは依然として多くの課題を伴います。しかし、Three.jsを活用し、適切な最適化戦略を立てることで、それは十分に実現可能です。
本記事では、BIMビューア開発におけるThree.jsの役割と、パフォーマンス向上のために理解しておくべきBIMデータの構造的特徴、そして具体的な最適化アプローチについて解説します。

※本記事は、SHIFT ASIAでBIMエンジニアを務めるPAXTONが当社の技術ブログに投稿した記事を編集部が翻訳・編集したものです。
＜原文はこちら＞
BIM Viewer with ThreeJs: understand the structure to have a better optimization strategy

Three.jsとは何か？

Three.jsは、Webブラウザ上で3Dグラフィックスを描画するためのJavaScriptライブラリです。WebGL（Webブラウザで3Dを表示できるJavaScript API）を扱いやすくラップしたもので、Ricardo Cabello氏（通称 “Mr.doob”）によって開発され、2010年に初版がリリースされました。

Three.jsの例

現在では巨大なコミュニティとエコシステムを持ち、ゲーム、デザイン、建設、医療など、可視化（Visualization）を必要とするあらゆる産業で採用されています。多くの大手企業が自社の3Dエンジンの基盤としてThree.jsを採用し、独自の機能を追加して利用しています。

Three.jsを採用している主なBIMビューア

BIMの分野でも、以下のような主要なプロダクトがThree.jsを利用していると考えられています。

• ACC – Autodesk Construction Cloud (旧 Autodesk Forge)
• Speckle
• Dalux
• BEXEL

これらのツールに共通しているのは、非常に高いレンダリングパフォーマンスを持っている一方で、ユーザーがビューアの表示設定などを自由に操作するためのオプションはそれほど多くないという点です。
なぜでしょうか？それは、パフォーマンスを維持するという最適化戦略のために、一定の自由度をトレードオフにしているからです。その理由を深掘りしていきましょう。

BIMビューアが他の3Dアプリと異なる点

ゲームなどの一般的な3DビューアとBIMビューアには、根本的な違いがいくつか存在します。

1. 「オブジェクト」主体のデータ構造とメタデータ

BIM技術は個別のメタデータ（属性情報）を持つオブジェクトを中心に構築されます。建物内には意匠、構造、設備といった複数の分野が存在し、それぞれが多種多様なオブジェクトタイプを持っています。

例えば、ゲームにおいては主要なキャラクターやオブジェクトにリソースを集中させ、背景や重要度の低いものは簡略化したりスキップしたりすることが可能です。しかし、BIMでは「重要でないオブジェクト」は存在しません。配管のバルブ一つ、壁の一枚に至るまで、すべてのデータが等しく重要であり、正確に保持・表示される必要があります。

2. 圧倒的なスケールと多様性

BIMでは、一つのシーン（画面）内に数千というオブジェクトが存在することも珍しくありません。BIMにおけるオブジェクトタイプの多様性は、レンダリング処理を複雑にする大きな要因となります。

Three.jsにおけるレンダリングの課題

Three.jsで効果的なレンダリング戦略を立てるためには、パフォーマンスに影響を与える要素を理解する必要があります。特に重要なのが以下の2点です。

1. ドローコール（Draw calls）数
2. 頂点（Vertices）数

ドローコールとは？

ドローコールとは、CPUがGPUに対して「このオブジェクトを描画せよ」と命令を送る回数のことです。 もしドローコール数が非常に多い場合、巨大なループ処理を実行しているような状態になり、シーン全体のレンダリングに時間がかかってしまいます。基本的には、この回数を可能な限り低く抑えることがパフォーマンス向上の鍵となります。

頂点数とLOD（Level of Detail）

3D空間上の平面は、最小単位である3つの点（三角形）で構成されます。曲面のように見える物体も、実際には無数の小さな三角形の集合体です。 三角形（ポリゴン）の数が多いほど見た目は滑らかで美しくなりますが、その分レンダリングコスト（計算負荷）は跳ね上がります。
BIMモデルはオブジェクトの種類が多岐にわたるため、単純に表示しようとすると「ドローコールの増大」という問題に直面します。

最適化のための戦略

BIMモデルには「オブジェクトの数は膨大（数千個以上となることも）」だが、「マテリアル（材質）の種類は限定的（数十〜百種類程度となることが多い）」という特徴があります。この特徴を利用して、いくつかの解決策を導き出すことができます。

1. バッチング（Batching）

同じマテリアルを共有する要素同士を結合し、ひとつの巨大な形状データ（ジオメトリ）としてまとめてしまう手法です。これにより、本来なら数千回発生するはずだったドローコールを、わずか数回にまで減らすことができます。これはドローコール問題を解決する非常に強力な手段です。

2. LOD（Level of Detail：詳細度）制御

カメラとオブジェクトの距離に応じて、表示するモデルの詳細度を切り替える手法です。 遠くにあるオブジェクトは簡略化されたメッシュ（頂点数の少ないモデル）で表示し、近くにあるものだけを高精細に表示します。これにより、見た目の品質を保ちつつ、全体の頂点数処理負荷を下げることができます。

3. インスタンシング（Instancing）

同一のジオメトリを持つ要素をグループ化し、それぞれの配置情報（行列/マトリックス）だけを個別に管理する手法です。 例えば、同じ形状の「椅子」が100脚ある場合、1回のレンダリングコールで100個すべてを描画することができます。

まとめ

BIMビューアの開発において最も重要なのは、BIMモデルのコンセプトと構造を正しく理解することです。 データがどのように構成されているかを知ることで、どこがボトルネックになるかを特定し、適切な解決策を見出すことができます。

今回は「ドローコール」と「頂点数」という重要な要素に絞って解説しましたが、実際にはメモリ管理やFPS（フレームレート）の維持など、考慮すべき点はまだまだあります。これらについては、また今後の記事で掘り下げていきたいと思います。