2013年3月 のアーカイブ

openFrameworks × Arduino × 光センサー

2013.03.21 04:30 PM

[oFSketch1] ドブえもんの明と暗 / Dobuemon’s light & darkness

openFrameworksとArduinoと光センサーを使って部屋の明暗を検知して何か表現してみるテスト。
地味かつしょーもないデモ映像ですが良かったらご覧ください。
上機嫌でコマネチを繰り出すドブえもんですが部屋が暗くなると絶望します。

[oFSketch1] ドブえもんの明と暗 / Dobuemon’s light & darkness from daijimachine on Vimeo.

最近になってopenFrameworksを始めてみて、初歩的なことを一通り試していく中でできたスケッチです。
このスケッチで試したのはボーンアニメーション付きモデリングデータを読み込んでパースして表示してくれるofxAssimpModelLoaderというaddonがどんなものなのかということと、Arduinoとセンサーを絡めたらどんなことができるのかということ。

ボーンアニメーション付きモデリングデータの読み込みは特に問題なく読み込めて表示できました。
ライトや陰面消去、テクスチャの質感等の細かい3Dの設定はOpenGLを操作できるメソッドがopenFrameworksには用意されているのでそれらを使って設定しています。

Arduino × センサーの方はとりあえずは配線周りのセッティングが簡単な光センサーを使ってみました。
センサーは様々なモノが膨大にあり、セッティングが複雑なものも多そうなので、おいおい試していこうと思います。
Arduino(てか電子工作)わりと面白いのでちょこちょこいじっていこうと思います。

WebGLでBone Animation

2013.03.13 07:43 PM

daijima.jp Lab | WebGL Bone Animation Sketch

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

※Safariで閲覧する場合はWebGLを有効にしてください。SafariのWebGLの有効化方法
※WebGLがサポートされていないブラウザでは閲覧できません。(IEやスマホブラウザ等)
※画面ドラッグでカメラ移動
※マウスホイールでカメラズーム
※Qボタンでアニメパターン1再生
※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..、様々な技術的なアプローチがあるとは思いますが、案件の特性に応じてアプローチ方法を選択して自在に開発できる準備をしておくのが肝要なんだと思います。