daijima.jp Lab | WebGL Bone Animation Sketch

ここのところWebGLを試していたんですが、その時作ったスケッチを晒してみようと思います。

※Safariで閲覧する場合はWebGLを有効にしてください。SafariのWebGLの有効化方法
※WebGLがサポートされていないブラウザでは閲覧できません。（IEやスマホブラウザ等）
※画面ドラッグでカメラ移動
※マウスホイールでカメラズーム
※Qボタンでアニメパターン１再生
※Wボタンでアニメパターン2再生
※Eボタンでアニメパターン3再生
※3Dライブラリはthree.jsを使用しました。
※気持ち悪いスケッチで申し訳ありません。

以下、ざっくりですが技術的なこと。
キャラクターのモデリング、ボーン設定、ボーンアニメーション作成はBlenderを使用。
BlenderでUV画像をエクスポートしてそれを元にPhotoshopでテクスチャ作成。
ボーンアニメーション付きモデリングデータをCollada形式でエクスポート。
※Blenderにthree.js用のアドオンをインストールするとモデリングデータをjson形式でエクスポートすることもできるんですが、いざthree.jsで読み込んだところ、表示が崩れてしまってうまくいかなかったので今回はCollada形式でエクスポートしてthree.jsで読み込みました。

three.jsを使えばいわゆるFlash用の3Dライブラリ（Away3D/Alternativa3Dなど）ライクに、わりと簡単に3D表現はできるようです。ボーンアニメーションもそれなりにすんなり実装できました。

現時点で大半のスマホブラウザでWebGLをサポートしていないというのが、いまひとつWebGLが流行らない原因なのだとは思いますが、近い将来多くのスマホブラウザでWebGLがサポートされるようになれば、大いに活用できるAPIになり得ると思います。

いずれにせよ、FlashのStage3D、WebGL、Unity、openFrameworks、etc..、様々な技術的なアプローチがあるとは思いますが、案件の特性に応じてアプローチ方法を選択して自在に開発できる準備をしておくのが肝要なんだと思います。

タグ: 3D, Blender, Collada, DAE, Dobuemon, HTML5, Javascript, Modeling, WebGL, ドブえもん