株式会社ヘキサドライブ | HEXADRIVE

気が付いたらもう冬が傍までやってきていますね。
ハートは冬にも負けずにホットです。
とてもお久しぶりです。
GoodSun!こと山口です。
ご無沙汰していましたが、今回こそWebGLネタをやってみました。
何か面白そうなネタは無いかなと考えてみた結果、RayTraceでもやってみようと思い至りました。
RayTraceをやるにしても普通にやったのでは面白くない!
という事で今回は古典的ではありますがRayMarchingに挑戦してみました。
みなさん色々と凄い事をやっている為、
プログラムのソースコードを書くようなblogは毎回恐縮の極みです。
さて、このRayMarchingというのはボリュームレンダリング等に利用される技法でして、
一言で言い表すなら“力技”といった感じで個人的に大好きな技法の一つです。
雲のような3次元ボリュームデータをレンダリングする時がイメージしやすいのですが、
場所によって密度や色が違う情報に対して少しずつレイを進ませながら密度や色を収集して、
最終的な色味を決定します。
まさに積分を力技で表現している直観的な技法ではないでしょうか?
簡単な図解。

解説よりも動いているものを見てもらうのが一番かと思います。
デモ兼ソースコードはこちらから。(ソースコードはリンク先をファイルとして保存したり、開いたページのソース表示を行って下さい。)
※今回のサンプルはMacOSX(Lion)とWindows7のGoogle Chromeにて動作確認を行っています。
残念ながらOperaでは動きませんでした。今度はきっとOperaでも動くものを目指そうと思います。
※GPUに多大な負担がかかる為、環境によっては動作が非常に遅い可能性があります。
ボックスのシェーダにRayMarchingするシェーダを適応していて、
ヒットした面から視線方向に順次レイを進めていきます。
そのため、通常は表面の表現を行うシェーダはボックスの内部を表現する振る舞いになっています。
少し怪しいところがありますが…まぁ概ね期待通りの結果です。
かなり重いシェーダも動かす事が出来て驚きです。
今更ながらRayTraceアピールという事で床を作って反射やればよかったと思っています。
この手法を利用すれば床面に広がるドライアイスの煙とかをよりいい感じに表現出来るかもしれません。
(処理が重すぎる為現実的ではないですが…)
今回のサンプルではオープンソースの以下のライブラリを利用させて頂きました。
glMatrix(ジオメトリ計算 https://github.com/toji/gl-matrix ※今回はhttp://code.google.com/p/glmatrix/ こちらを使用)
webgl-noise(ノイズ https://github.com/ashima/webgl-noise )
先人様ありがとうございます。
これからもJavaScriptの面白さを皆さんにお伝えしていこうと思います。
(今回は直接的にJavaScript全く関係なかったですけど)
では、本日はこの辺で。