ActionScript で立体のブーリアン演算+AGALで擬似屈折+反射シェーダ(1)


Boolean Crystal | Si+ (wonderfl.net)

FlashPlayer11 ではステンシルバッファが使えるようになったので、お約束の立体ブーリアン演算をやってみました。ただ、コレだけだと寂しいので、incubator時代に実装したAGAL擬似屈折+反射シェーダーの改良版と組み合わせてみました。あんまり本筋と関係ないところでなかなか苦労はしたのですが、全体を通してわりと素直に実装できました。FlashPlayer11の仮想GPU、良いね!
今回はFlashPlayer11で扱えるようになった3D基本技術のごった煮みたいな感じです。擬似屈折+反射シェーダには Cube Texture を使って、ブーリアン演算にはステンシルバッファを使っています。ブレンドファンクションはまだポイントスプライト用加算演算くらいにしか使ってないですが、これで一応一通り触ってみた感じにはなるのかな。


ここではまず,立体のブーリアン演算方法について解説したいと思います。一見3次元計算をしているようですが、実は2次元の画像処理で描画しています。近年のリアルタイム3DCGでは(といってもかなり昔からですが)、こういった2次元画像処理による擬似3次元計算技術が、実際の3次元計算以上に重要になって来ています。ちょっと頑張って解説を書いてみたので、3DCGにおける2次元画像処理について少しでも理解が深まれば幸いです。
なお、擬似屈折についてはまた次回詳しく解説したいと思っています。

続きを読む

ActionScript でスピログラフ


Spirographical Ingot Cast | Si+ (wonderfl.net)


前回、PointSpriteのデモを作成した際、何か面白いパーティクルの動きは出来ないかなーと試行錯誤していました。その中でスピログラフを3次元に展開できたら面白そうだなと思って、いろいろ数式をいじってたら想像以上に面白いものができそうだったので、1つのコンテンツにしてみました。
見せ方次第でまだまだ面白くなりそうでしたが(例えば Point Sprite Particle みたいにスピログラフ上のモーションをBPMに合わせたり)、今回は色々数式をいじって形状を確認できるような方向で丁寧に作ってみました。
3D関連の技術的にはMetallic soft cube - wonderfl build flash onlinePoint Sprite Particle - wonderfl build flash onlineの組み合わせなので新しい事はあまり無いのですが、今回の3次元スピログラフは結構汎用性が高そうなので、そこら辺を中心に書いてみたいと思います。

続きを読む

ActionScriptでPoint Sprite


Point Sprite Particle | Si+ (wonderfl.net)

わりとマジメに Stage3D で Point Sprite を実装してみました。
Point Sprite というは、平たく言えば、どんなに回転しても常に自分の方向を向いている四角形を作成してテクスチャを張ったものです。大昔はビルボードとも呼ばれ、そこそこ面倒くさい技術でしたが、最近はGPUにPoint Spriteを書いてと命令するだけで勝手に処理してくれるようになりました。
しかし残念ながら、劣化 OpenGL こと FlashPlayer11 の Stage3D では、この PointSprite 命令は今のところ実装されていません(drawLines と drawPoints 位はあっても良いと思うんですが。将来的には実装される気もします)。そこで今回はこの Point Sprite を作ってみました。Point Sprite は非常に汎用性の高い技術なので、今回はいつものようにやっつけではなく、あとあと使いやすいように慎重に簡潔に実装しました(使用例として3Dパーティクルシステムも実装してみましたが、こっちはやっつけです)。

続きを読む

ActionScriptでジオメトリブレンディング+AGALで金属光沢シェーダ


Metallic Soft Cube | Si+ (wonderfl.net)


ついにwonderflが、FlashPlayer11に対応しましたね。
3Dライブラリ系のFlashPlayer11対応版へのアップデートはまだなので(というか、既存3Dライブラリって過去との互換性を保ちながらアップデート可能なんだろうか?)、本格的に盛り上がるのはもう少し先かなと思ってますが、せっかく使えるようになったことだし、早速1本投稿してみました。


ついでにモルヒル時代に(wonderfl上では動かないけど)投稿してた作品も、無事動くようになったので再コンパイルしました。技術解説的なものは、ActionScript で屈折レンダリング+Molehill雑感 - Simple Inspirationあたりに書いてますので、ご参考ください。
Clear Water with refraction rendering | Si+ (wonderfl.net)

さて、今回の投稿ですが、ジオメトリブレンディングした立体を、基本的なグローシェーディング+擬似環境マッピングレンダリングしただけの非常にシンプルなデモです。シンプルですが、デモシーンでよく使われる定番のひとつで、これをベースに応用を利かせれば実はかなり色々なことができます。立体の選び方やカメラワーク等、工夫次第で最新のデモシーンでも問題なく使っていけるような汎用性の高い手法ですので、簡単に概要を書いておきます(さすがに最新シーンでグローシェーディング+擬似環境マッピングのみって事はあまりありませんが)。

続きを読む