アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

WOWEngine+Away3Dを使ってFlex上で3D物理エンジンを試してみる

こんにちは。松田です。
今回はFlash用の3D物理エンジンWOWEngineを簡単に試してみたいと思います。

WOWEngineはFlash用の3D物理エンジンですが、3Dオブジェクトの描画はしてくれません。あくまでオブジェクトの位置関係を計算するだけです。
なので、3Dオブジェクトの描画自体はPapervision3DAway3Dなどの3D描画ライブラリを使用する必要があります。

今回はてっとりばやく実装するために、以前のエントリで使ったことのあるAway3Dを使って描画します。
そして今回も前回同様、Flex上で作成しています。


作成の流れとしては、
Away3Dで何か描画してみる」→「動きの処理部分にWOWEngineを組み込む」
という感じになるわけですが、Away3Dの描画方法については以前書いたこちらのエントリへどうぞ。
上記エントリのonEnterFrame()あたりでやっているオブジェクトの移動処理をWOWEngineの処理に置き換えます。


まずはWOWEngineをダウンロード。
http://seraf.mediabox.fr/datas/as/wow-engine.zip

次にWOWEngineが必要とするライブラリAS3DSをダウンロードします。
http://lab.polygonal.de/ds/

そして前回書いたAway3Dソースコードをちょっと変えつつWOWEngineを埋め込んでいきます。埋め込んだ箇所はそれほど多くないのでソースコードを見て確認してください。
これだけで一応完成。

ソースコードFlash画面内を右クリック→「ソースの表示」で表示できます。

画面をクリックするとボールが次々増えていきます。やりすぎ注意。
ボール同士に衝突判定が付いているなんとなくわかると思います。
まだまだいじり始めたばかりなので今回はここまでしかやってませんが、けっこう簡単に実装できそうですね。

Away3Dを使ってFlex上で3Dを表示させてみる

前回に引き続きFlexの勉強中の松田です。

Flashで3Dを表示しなければならない機会があったので、Flash用の3D描画ライブラリを探して試してみました。
有名どころにPaperVision3Dというライブラリがあるのですが、今回はこれから派生したAway3Dを使ってみました。
ここのデモページでどんなことが出来るのか見ることができます。すごいです。



3Dを扱うこと自体が初めてなので、とりあえずは付属のサンプルを表示させるところからやってみたいと思います。

ダウンロードページから最新版のソースコードをダウンロードします。
解凍すると「lessons」というディレクトリがあってその中にサンプルがいくつか入っているので、その中から「Lesson_Basic_02_Primitives.swf」を表示させてみたいと思います。

同梱のflaファイルはAdobe Flash CS3等のアプリケーションが無いと開けませんが、サンプルのソースコードだけはこのページで見ることができるのでこっちから取得しましょう。

まずは通常のFlexプロジェクトの作成と同様に<mx:Application>タグまで生成します。
その後、<mx:Script>タグを追加してこのソースコードを貼り付けることになるのですが、このソースコードFlex用に作られたものではないので、これだけでは動作しません。
サンプルコード上では、CubeやSphereを乗せたView3DオブジェクトをaddChild()しているだけですが、Flex上で動作させるには、View3DをUIComponentにaddChild()した後、そのUIComponentをaddChild()することになります。
UIComponentを経由してaddChildさせる感じです。

あとはそのスクリプトを<mx:Application>のcreationCompleteで呼び出します。
これで実行。


やった。無事表示できました。
ソースコードは表示画面を右クリックして「ソースの表示」を選択してください。
物体上で右クリックするとAway3Dのメニューが開いちゃうので、背景で右クリックしてください。



これでFlex上で動作できるようになったので、あとはサンプルを見ながらいじりまくってみます。
Away3Dソースコードを覗いてみるとわかりますが、このライブラリはほっとんどコメントがありません。
Googleとカンと根性を頼りに試しまくるとなんとなく効果がわかってくるのでがんばりましょう。


そして今回触ってみてわかった成果が下の通りです。
覚えたことを思いつくまま羅列していきます。

物体の表示、移動
表示させる物体は全てObject3Dクラスを継承している
Object3Dクラスを移動させるにはmoveFoward(), moveBackward(), moveUp(), moveDown(), moveRight(), moveLeft(), moveTo()あたりを使う
物体を回転させるには、rotationX, rotationY, rotationZの値を増減させる

カメラ
カメラもObject3Dを継承したCamera3Dオブジェクトなので、Object3Dと同じメソッドで移動させることができる
カメラは移動しただけじゃ向いてる方向は変わらないので、どこかを向かせたいときはlookAt()メソッドを使う
moveTo()やlookAt()で指定する引数はNumber3Dオブジェクト(x,y,zの値だけを持つオブジェクト)
Object3Dの座標もこのNumber3D型のpositionという変数で持っている
なので、カメラを特定の方向に向けたければ view.camera.lookAt(new Number3D(100, 200, 300)); 
cubeの方を向かせたければ view.camera.lookAt(cube.position);

物体の色
new Cube({material:"grey#black",・・・ ここで指定するmaterialで物体の色や特性を決める
単純に色だけ指定する場合は、"面の色#線の色"
光源を反映する物体にする場合は、new ShadingColorMaterial(何かの色)

光源
光源はLight3Dオブジェクトを配置
光源によって色が変わるオブジェクトは、 material に new ShadingColorMaterial(0xFF0000) とか指定

ちょっとはまった細かいところ
カメラをY軸上から(0,0,0)を向かせるとうまく表示されない (0,0,1)あたりにして回避
灰色は"gray"じゃなく"grey"で定義されてる

分からないこと
ある物体を見ながら回りこむ動きって出来るの?
moveRight(target.position);の直後にlookAt(target.position);するとそれっぽくなるけど違うような・・・
地道に座標計算するしかないのか


役に立つかどうかは分かりませんが、このあたりを勉強したときに出来たサンプルを置いておきます。
何かの役に立てば幸いです。
ソースコードは上と同じで、右クリックして「ソースを表示」してください。