3Dの実装を1からやってみる

SparkProjectの勉強会#7でお話した部分をエントリーにしました。

FlashでとりわけActionScriptで3D表現というのは、だれしも一回くらいはやってみたいと思うことのひとつではないでしょうか。

AdobeMAX2007の城戸さんのプレゼンで、PV3Dなどを使う前に一度自分でやってみたほうがいい、という話から2年過ぎてしまいましたが、いまさらながら3D演算を1からやってみました。

途中経過をわかりやすくするためWonderflにアップしてForkしていくという方法をとります。

• 今回、参考にした本はActionScript3.0アニメーションの3Dのセクションです。

その1-Z軸の実装

3D演習その1では、まずZ軸にしたがって大きさを変化させ、奥行きをつけてみました。頂点データと表示オブジェクトが分かれてる感じです。EnterFrameイベントで随時、計算をして、それから反映させます。

その2-Z軸で動かして奥行きチェック

次に3D演習その2 +Zモーションでは、奥行きをわかりやすくするため、ZをTweenerで変化させてみました。

その3-カメラと座標変換の意味

やっぱり3d感をだすなら視点の移動があったほうがいいなと思って3D演習その3 +Camera3Dの回転ではカメラを実装してみました。といっても、カメラの位置の分だけ座標のオフセットを取ってから計算するだけです。さらに回転させたくなってきたのでがんばってみました。カメラ位置のオフセットを取ったあとに、カメラの角度のぶん回転させることでカメラからみた座標系に変換します。

座標の回転はアフィン変換をつかいます。よく3Dのチュートリアルには必ずこの式が出てくるんですが、ずっと意味がわかりませんでした。これははっきりいってカメラなど使わなければ3Dの投影そのものには関係ないです。3Dの奥行きを付けたいだけなら、その1にあるZ軸のパラメータとパースの式だけわかれば問題ありません。

また、ここでDisplayObject3D、Scene3D、Camera3Dとオブジェクトをクラスとしてパーツかしています。機能をわけるのと名前を付けて意味づけする目的です。

こういう細かい部品化もコードをみやすくするテクニックとして有効だと思います。

class Ball extends Sprite { public function Ball() { graphics.lineStyle(0,0xffffff); graphics.beginFill(0xcc6600); graphics.drawCircle( 0, 0, 10 ); graphics.endFill(); } }

その4-かっこよくする

達成感というか見た目的にダイナミックさがほしかったので、3D演習その4 +Camera3Dの回転2では、ぐるぐる回してみました。超3Dっぽいです。テンションがあがりました。ちょっとリファクタリングしましたがここではこれだけ。

その5-整える

最後に、3D演習その5 +Matrix3DとScaleとRotateでアフィン変換をMatrix(行列)をつかって計算させます。

行列は高校数学ででてくる概念で、簡単に言うと数のグループを1個の変数として扱い、グループ対グループの計算をすっきり表現する数学のテクニックです。座標(x, y, z )×変換行列(scale, rotate, offset )=変換後の座標(x, y, z) という(実際は厄介な計算でも)操作の関係性がわかりやすく表現ますよね。実際の計算はMatrixクラスがやってくれるし、公式もあるので計算も大幅に減るって便利です。

スケールの計算も盛り込みつつ、煩雑な演算部分がかなりすっきりしました。1回手動でやってから整理するフェーズに入ったので、理解も深まりました。

あと課題は高速化と、DisplayObjectContainer3D的なグループ化の仕組みとスケールの操作ですね。正直テクスチャとかはPV3Dにかなわないし、実際につかう場面を考えると、既存のMCとかをつかって簡易に奥行きやダイナミックさがつけばいい程度の軽量な3Dライブラリになればいいかなーと考えています。ただFP10が出たのでそれだと必要なくなるかもしれませんね。

でもあえてやる意味。

僕は3dといえばアフィン変換でいつもはまってたんですが、1から順番にやってみて、必要になってからつかうことで頭の中がすっきりしました。

ActionScriptも3D演算も、頭でわかっててもなかなかすぐはできないかもしれませんが、かといってやらないとなかなか身につかない感覚があると思います。ぜひめんどくさいけど一回くらい気合入れてやってみるとためになると思います！

あとは初心者の人で、Wonderflはうまくなってからって思ってる人がいたら、こうやって手探りの作業ほど、Wonderflは便利だっていうのが伝わったらうれしいです。

KAYACでは、さまざまなテクニックをつかうだけでなく自分でやってみて活かせるFlasherを募集しています！