研究の背景
これまで、Web上で3Dコンテンツを扱う場合、専用のplug-inを導入する必要があったが、plug-in無しで3Dコンテンツを扱うことが現実的になってきている。
これを実現するのが、クロノス・グループにより管理され、規格策定中であるWebGLである。
WebGLワーキンググループには、Google、Mozilla、Opera、Appleが参加していることもあり、今後Webの標準となると想定されるため、技術的な調査を行うことにする。
本研究の目的
本研究では、WebGLの技術的な理解を深め、WebGLを利用したWebアプリケーションを開発するために必要なツール、ライブラリ、および開発フローについて調査することを目的とする。
今回は、以下を利用しデモアプリケーションを開発する。
・モデリングソフト ： Blender
・WebGLライブラリ ： GLGE
将来的には、市場へ3Dコンテンツを投入するために必要な開発フロー、および開発環境の整備も検討する。
WebGLについて
WebGLは、ブラウザ上で3Dグラフィックスを表示するためのGraphics APIである。
特徴
・ グラフィックスハードウェアを利用し3Dグラフィックスを高速に処理できる。
・ プラグインは不用
・ JavaScriptから利用する。
Blenderについて
Blenderは、オープンソースで開発が進められている3Dグラフィックスソフトウェアである。モデリング、レンダリング、アニメーションなど多くの機能を備え、Pythonスクリプトにより、プラグイン開発が可能である。
現在では、多くのプラグインが公開されている。
GLGEについて
WebGL向けのライブラリである。Sceneベースで構築が可能であり、picking、LOD、Animationなど多彩な機能が備わっている。
3Dモデルデータ作成
今回のデモアプリケーションでは、モデルデータの表示だけではなく、アニメーションも実現する。
モデルデータの作成は、大きく分けて以下の1～3の工程がある。
※Blenderの基本的な操作については、「参考URL」を参照のこと。
※今回は、BlenderのデータをGLGEライブラリで利用できる形式へ変換して利用することを前提に説明する。変換スクリプトは、Blender一部の情報のみ対応しているため、モデルデータ作成時に制限がある。
1.モデリング
モデルの形状、マテリアル、テクスチャなどを設定し、モデルデータを製作する。
図 1 モデリング
以下のことに注意し、モデリング作業を行う必要がある。
・ Blenderの座標系はZupであるため、WebGLアプリケーションの実装にあわせる必要がある。今回のデモアプリケーションは、Yupであるため、モデリングの際はYupにて製作する。
・ テクスチャのサイズが縦、横ともに2の累乗であること。
・ テクスチャはメッシュあたり、1枚であること。※変換スクリプトの制限
・ テクスチャは、外部ファイルを参照する形式にする。
・ モデリング中に、平行移動、回転などの変換を行った場合、
blenderにて、Object Mode → スペース → Transform → clear / apply にて変換を座標へ適用すること。
※変換スクリプトの制限
・ 頂点、および面の数は、処理速度に影響するため、最小限にする。
2.アニメーション
モデルデータに、ボーンを設定し、頂点データを各ボーンに登録する。
図 2 ボーン構造
各ボーンに対して、アニメーションの設定を行う。
図 3 アニメーション
アニメーションを利用するためには、Blenderにてアニメーションを製作する際、以下のことに注意する必要がある。
・ アニメーションにはArmature + IPO(Interpolation)機能を利用する。※変換スクリプトの制限
3.データ変換
作成したモデルデータを、変換スクリプトにて、GLGEライブラリで利用できるXML形式へ変換する。
※COLLADAによるデータ読み込みも可能だが、今回はアニメーションを取り入れるため独自のXML形式を利用することにする。
デモについて
「3データ変換」にて生成したXMLデータを読み込み、3D空間上でアニメーションを行うデモアプリケーションを製作する。
 |  |
図 4 デモイメージ
1.機能について
機能として、以下を実装する。
・ 視点の移動・回転・オブジェクトへの追従
・ オブジェクトの移動、回転、指定位置への移動
・ アニメーション
UIのボタンをクリックすることで、Blenderにて作成したアニメーションを実行する。
今回は、「静止」、「歩く」、「走る」、「ジャンプ」のアニメーションを可能とする。
・ 日本語を含むコメントの表示
コメントの表示については、Canvas上に描画した文字列をpng形式で取得し、3D空間上のオブジェクトにテクスチャとしてマッピングすることで実現。
・ オブジェクトのpicking
マウスでクリックした3D空間上のオブジェクトを特定し、指定した地点へオブジェクトの移動を行う。
2.開発環境
・ 言語：JavaScript、Python
・ ライブラリ：GLGE v0.52、glMatrix v0.9.4、jQuery-UI v1.87
・ ツール：Blender v2.49b、FireFox v4.0b11、Google Chrome v9.0.597.98
3.動作環境（推奨）
FireFox 4.0b以上、またはGoogle Chrome 9.0.597.84以上
以下からダウンロードしインストールする。
FireFox ： http://www.mozilla.com/en-US/firefox/beta/
Google Chrome ： http://www.google.co.jp/chrome/
4.性能評価
今回のデモアプリケーションでは、以下のデータを利用し、各種変換（回転、アニメーション）を同時に実行した場合、60fps程度のパフォーマンスが確認できた。
表 1 利用したデータ
| 頂点数 | 約30000 |
| 面数 | 約28000 |
| テクスチャ | Png形式、総数10、総容量1MB |
表 2 計測環境
| ブラウザ | Fire Fox v4.0b11 |
| 解像度（表示領域） | 1280 * 768 |
| GPU | NVIDIA GeForce 210 |
| GPU | CPU Intel Core i5 CPU 760 |
結果考察
1.開発環境について
開発環境（ツール、ライブラリ）については、発展途上であるため今後の動向に注目していく必要がある。
今回利用したBlenderについては、今後もWebGL向けのプラグインが開発されると思われる。また、WebGL向けのライブラリも多数存在するため、それぞれの特徴を理解して有効に利用していきたい。
2.パフォーマンスについて
描画処理については、GPUを利用するためCPUへの負荷は少なく高速である。ただし、大規模なアプリケーションを想定した場合、JavaScriptにて処理している座標変換処理がボトルネックとなりやすいため、JavaScriptの処理速度向上が必須である。
性能評価については、WebGLの規格が正式発表された後、再度大量なデータにて測定を行う必要がある。
3.今後の課題について
今回は、3Dアプリケーションを開発する際に必要となるデータ作成、および基本機能の実装を行うことで、WebGLにて実現可能な領域について把握することができた。
機能的にはゲームなども実装できるレベルであり、充実したものになっている。ただし、日本語入力については、今後も検討が必要である。
また、WebSocketと連携するなど、実際にサービスとして成り立つようなレベルでの検証も必要といえる。
4.今後の可能性について
WebGLのブラウザ上で動作するという特性上、プラットフォームへの依存が無いため、PC向けだけてはなくスマートフォンやその他デバイスへの展開も可能である。
グラフィックスハードウェアの普及や、WebGLの正式発表を考えると、近い将来Web上に3Dコンテンツが普及することも想定できる。
補足
参考URL
KHRONOS GROUP ： http://www.khronos.org/
GLGE ： http://www.glge.org/
Google glMatrix ： http://code.google.com/p/glmatrix/
Blender ： http://blender.jp/