GLSL Sandboxで遊ぼう

無題
Pocket

GLSL Sandboxは、ピクセルシェーダをリアルタイムプレビューしながらガリガリ書いていけるサービスです。

適当にいじっているうちに面白い絵が出てくるので、暇つぶしによく遊んでいます。

ピクセルシェーダは万能なので、頑張ればこんな絵も出せるらしいです。

 

さっそく何か書いていってみましょう!

 

(1)中心位置を合わせる

GLSL Sandbox

新規作成した直後です。

デフォルトのコードだと中心位置がズレていてやりにくいので、適当に原点を中心に持ってきました。

ついでに無駄なソースコードを削り落としました。

 

(2)レイを飛ばす

GLSL Sandbox

レイを飛ばす処理を書いていきます。

よくdemoscene等で使われている「レイマーチング」法を使っています。

distanceFunctionで現在地点から最も近い点までの距離を取得し、その分レイが向いている方向へ進めて行き、DistanceFunctionの結果が定数以下になったら(ここでは0.001)当たったということにして中断します。

distanceFunctionの構造が非常にシンプルになるため、形の定義が楽になるのが特徴です。

ここでは球を定義してみました。

 

(3)法線を取得する

GLSL Sandbox

調べたい場所から少しずらした場所のdistanceFunctionを比較することで、法線を取得できます。

法線がカメラの向きに平行なほど、白く光るようにしました。

(4)沢山の箱を出してみる

GLSL Sandbox

割った余りを返す関数、modを使って箱を量産してみます。

位置をmodで割ると0~1の間を繰り返す値が得られるので、それを元に無限に繰り返すオブジェクトを表現することが出来ます。

また、ベクトルからatanで角度を取得し、それに対してmodを適用した後pos = vec2(cos(angle), sin(angle)) * length(pos)のように再代入することで、万華鏡のような、角度による繰り返しの表現ができます。

 

(5)あとは適当に

glsl
GLSL Sandbox

あとは、以下のサイトなどを参考に書いていきます。

Igo Quilez – fractals, computer graphics, mathematics, demoscene and more
length(max(abs(p)-b,0.0))-r; …

何種類か無限に繰り返すオブジェクトを定義し、bool演算で組み合わせてやるといい感じになります。

なんとなく、考えてデザインするより「適当にやったらなんかカッコイイのできた!」のノリの方が良い物が出来る気がしました。

Pocket

Pingbacks/Trackbacks

  1. [Pixel Shader]GLSL Sandboxでデジタルなタイマーを作る | notargs.com - 2015年8月21日

    […] ▼ 前回の記事 GLSL Sandboxで遊ぼう | notargs.com […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

(Required)

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com