GLSL ray marching を試してみるテスト

昨日、Tokyo WebGL Meetup でレイマーチングなるものを教えてもらったのでスライドの内容を試してみました。

以下のサンプルは、

全能感UP! GLSLで進めレイマーチング « demoscene.jp

と

GLSL ray marching -フラグメントシェーダでレイマーチング-

のスライドを見ながら作成しました。

その１ 「シェーダの基本となるコード」の実行結果

スライド 61 / 120 の「シェーダの基本となるコード」

その２ 「シェーダ内で ray (レイ)を定義」の実行結果

スライド 64 / 120 の「シェーダ内で ray (レイ)を定義」

その３ 「球体のサイズと distance function」の実行結果

スライド 76 / 120 の「球体のサイズと distance function」

その４ 「法線を求める関数を定義」の実行結果

スライド 87 / 120 の「法線を求める関数を定義」

その５「同じオブジェクトの複製」の実行結果

スライド 93 / 120 の「同じオブジェクトの複製」

参考情報

GLSL ray marching -フラグメントシェーダでレイマーチング-

全能感UP! GLSLで進めレイマーチング « demoscene.jp

Iñigo Quilez - fractals, computer graphics, mathematics, demoscene and more

Tokyo WebGL Meetup

Tokyo WebGL meetup行った #webgl_tokyo - pirosikick's diary

スライドの理解は、法線ベクトルとか、勾配あたりで、挫折しました。。。orz

もうちょっと時間かけて、覚えたいと思います。