読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

はてなブログを使ってみるテスト

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

Windows WebGL IE11 Firefox Chrome

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

f:id:cx20:20140614172159p:plain

以下のサンプルは、

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

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

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

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

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

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

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

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

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

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

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

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

スライド 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

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