Forge Viewer は Web ブラウザ内に 2D 図面や 3D モデルを表示するための JavaScript ライブラリです。表示前に、CAD や CG ソフトウェアで作成したデザイン ファイル(シード ファイル)を、Model Derivative API で変換することで、ストリーミングで使ったカンバス領域での表示が可能になります。
Forge Viewer JavaScript ライブラリは、WebGL を土台としたオープンソースの Three.js をベースにしています。両者の最も大きな違いは、デザイン ファイル内の形状を変換してをカンバス上に描画するか、プログラミングでシーン、ライト、ポリゴンを定義して形状をカンバス上に描画するか、です。
Forge Viewer では、2D/3D 形状に加えてメタデータと呼ばれる属性、あるいはプロパティ情報も同時にストリーミング配信されるため、ダッシュボードなど、Web ブラウザ上でのリッチ コンテンツ表現が可能になっています。
ただ、カンバス上にデザイン ファイルにない形状を表示させたい、という要望は少なからず存在します。Forge Viewer の特性上、Three.js とは一定程度の親和性を持っていますが、両者コンセプトの違いから、Three.js の作法がそのまま Forge Viewer カンバスに適用出来るわけではありません。
そのため、若干ではありますが、Three.js オブジェクトを表現させるためのインタフェースが用意されています。1つめは Forge Viewer カンバスにシーンをオーバーレイ(透過的に重ねて表示)させる方法、2つめはシーン ビルダーを使ってカスタム モデルを描画させる方法です。
具体的な実現手順は、Forge ポータルの Viewer ドキュメント上、Advanced Options として記載されています。前者のオーバーレイがAdd Custom Geometry、後者のシーン ビルダーが Scene Builder、でそれぞれ説明されています。
詳細はこれらドキュメントに譲りますが、ここでは両手法によって表現された形状の差について触れておきます。
次に示すのは、シーン オーバーレイとシーン ビルダーの手法を利用してカンバスに描画させた球の例です。黒のモザイクタイルをテクスチャ マップした球がオーバーレイ、青のモザイクタイルをテクスチャ マップした球がシーン ビルダーを使っています。
いずれの球も、操作によって表示の拡大縮小、画面移動、オービットなど、デザイン モデルから変換された形状と同じように扱われていることがわかります。
一方、違いも存在します。シーン オーバーレイで描画された球と違い、シーンビルダーで描画された球は、コード上で割り当てた dbid によって、デザイン モデルから変換されたオブジェクトと同じように識別されています。この例では、球を選択操作出来たり、モデル ブラウザに Model ノードが作成されて、表示/非表示の操作対象になっていたりすることがわかります。(シーン オーバーレイで描画された球を選択しようとすると、背後のオブジェクトを選択してしまっています。)
次の例では、Forge Viewer に用意された環境を変更後、描画した球に環境光は反映されるかを示しています。この場合、シーン オーバーレイで描画した球には、環境光が反映されていないことがわかります(陰影表現の有無)。
断面解析ツールをつかった際の表現も同様です。シーン オーバーレイで描画した球は断面解析の対象になっていませんが、シーンビルダーの球は正しく切断されてきます。
どの方法を選択すべきかは目的とする用途によって異なりますが、いずれの場合も、単純な要素表現を前提にしている点にご注意ください。アニメーションなどを伴った複雑な Three.js 要素の表現は制限される場合があります。
デザイン ファイルから変換されたオブジェクトにガラスなどの透過度を持ったマテリアルが適用されていると、オーバーレイとシーンビルダーで描画されたオブジェクトをガラス越しに表示することが出来ません。次の例では、非表示にしたガラス領域内にのみ、球が見えています。
なお、シーンビルダーで描画されたオブジェクトのモデル ブラウザ上のノード名は、自動的に Model になってしまいます。また、Model ノード下に階層付けすることも出来ません。同様に、同オブジェクトを選択した際のプロパティ パネルは、常にブランク(表示内容なし)になります。
By Toshiaki Isezaki
コメント