WebGL Volume1.0 | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2013.8.12

WebGL Volume1.0

お久しぶりです!
猛暑続く日々に部屋のエアコンは28.5℃設定なgood sunこと山口です。
水分補給等に気を配りましょう。
本日は久しぶりにWebGLデモ紹介をしたいと思います。
以前のレイマーチングデモを改造した、パーティクルをレイマーチングするデモです。
実はパーティクルの動きをCurl-Noiseを利用した
疑似流体シミュレーションネタにしたかったのですが、
時間が足りずにカールしない版をお届けする事になりました。
という事で、完成版は次回のお楽しみとして、
WebGLでの任意ボリュームデータをレンダリングする話をしようと思います。

※デモはGoogleChrome(Windows7 / MacOSX)でのみ動作します。
(IE,FireFox,Operaでは動作しません)
デモはこちら
以前のデモはノイズ関数で作成したボリュームをサンプリングしていましたが、
今回はテクスチャを使ってボリュームのサンプリングを行っています。
ボリュームを表現するならピッタリなのが3Dテクスチャですが、
残念なことに現在のWebGLでは3Dテクスチャが使えませんでした。
そこでZ軸方向のデータをテクスチャのU方向に配置する事にしました。
32×32のテクスチャの断面図を横に32個敷き詰めた感じです。
その為、テクスチャのサイズは横32×32,縦32の1024×32というサイズになっています。
サンプリング時はZの補間用に2回サンプリングしてGLSLのmix関数で補間を行っています。
レイマーチングは以前と同じく一定距離レイを進めてその時の密度と遮蔽量を蓄積していきます。
今回はさりげなくコリジョンの玉もレイトレースで一緒に描画してみました。
さて描画に関しては以上です。
最適化していない割に結構速度が出るのが驚きです。
巷ではWebGLでグローバルイルミネーションを利用した綺麗なデモ等が出てきていますが、
レイトレースなデモも増えてくるかもしれないですね。
次回はきちんとカールしたり、コリジョンが動いたり、ジェネレータが動いたり
アクティブなデモにしたいと思います。
今回及び次回に向けて以下サイトを参考にしてパーティクルの動きを作成しています。
http://prideout.net/blog/?p=63
またジオメトリ計算にはBrandon Jonesさんのgl-matrixを利用させて頂いています。
https://github.com/toji/gl-matrix
先人はいつだって偉大です。
では次回Volume2.0をお楽しみに!