AutoCAD JavaScript API TIPS ～ 5 three.js編

この連載では、AutoCAD JavaScript API と連携してご利用いただける HTML5 ベースのオープンソースライブラリをご紹介いたします。

前回は、データを視覚化するためのライブラリ D3.js についてご紹介いたしました。

今回は three.js をご紹介いたします。

three.js は、 Web ブラウザ上でプラグインなしに JavaScript によって 3DCG を扱うことのできるオープンソースのグラフィックスライブラリです。 WebGL, HTML5 Canvas, SVG に対応するレンダラーを提供しており、またそれらの API をラップすることで、より扱いやすいインターフェースとなっております。

ここではまず、 three.js がサポートしている WebGL という技術についてご説明いたします。

WebGL は、OpenGL 2.0 / OpenGL ES2.0 に対応するプラットフォーム上で、特別なプラグインをインストールすることなく、ハードウェアでアクセラレートされた 3DCG を表現することができる技術です。 WebGL の API を通じて、 OpenGL や DiretX のランタイムにアクセスできるため、 Web ブラウザから GPU のリソースを活用することができます。

WebGLデモ（ Aquarium ）

WebGL は高速な描画処理を可能とし、OpenGL ES2.0 の機能を利用できるという点においては非常に強力なライブラリですが、その仕様の複雑さから、実装が難しいという問題があります。

そこで WebGL の機能をラップすることで、レンダラ、シーン、ライト、カメラ、ジオメトリ、マテリアル、テクスチャ等といったわかりやすい要素から構成されたライブラリが three.js です。

three.js　( github )

1 前提知識編でご説明したとおり、AutoCAD JavaScript API が、Google 社の Chrome ブラウザがベースとしている Chromium Embedded Framework を描画用のブラウザに採用していることにより、AutoCAD 上でもこのthree.js を利用することができます。

以下のサンプル画面は、AutoCAD の図面ドキュメント上に配置したソリッドモデルを、JavaScript API と three.js を利用して表示するサンプル（ ADN チームの Kean Walmsley が作成したサンプルプロジェクト）です。

AutoCAD の C# プログラムからソリッドモデルのリストを取得して、そのジオメトリ情報を JavaScript API を通じてJSON データとして渡し、 three.js の API から WebGL のプログラムに変換して表示しています。

three.js でのオブジェクトは、 Object3D クラスを基底クラスとするいくつかのクラス、たとえば Mesh クラス等からインスタンスを生成します。 Mesh オブジェクトのインスタンスを生成する際には、引数として Geometry オブジェクトと Material オブジェクトを渡します。 Geometry オブジェクト、 Material オブジェクトは、それぞれ形状と質感を表現する複数のクラスからなります。

シーンにカメラとライトを追加し、オブジェクトを配置して、 WebGL レンダラーの render メソッドを呼び出すというシンプルなステップで Web ブラウザ上に描画することができます。ご興味のある方は、ぜひ一度お試しください。

また three.js に関連する情報として、 Autodesk View and Data API でも、ライブラリの内部で three.js を利用しております。これにより、 WebGL を通じた高速な描画処理と OpenGL ES2.0 の機能を活用して、クロスブラウザで 3D モデルを表示することを実現しております。

本連載を通じて、AutoCAD JavaScript API と親和性の高いオープンソースのグラフィックスライブラリをご紹介してきました。
Web の世界の技術を取り入れることで、AutoCAD の新しいユーザーインターフェースデザイン、Web サービス連携、新機能による拡張など、様々な可能性を発見していただければ幸いです。

By Ryuji Ogasawara