Shadertoy 勉強日記＋忘備録＃１

こちらのチュートリアルを元にGLSLを学んでいこうと思います。

smoothstep(edge0, edge1, x) は x <= edge0なら０を返し、x >= edge1なら１を返し、edge0 とedge1の間ならエルミート補間 をして、多項式をつかって滑らかな曲線の値を返す。ここでは、UV座標と中心点の長さをxとし、ぼんやりしているところは補間がされている。

0.1 * cos(atan(q.y, q.x)*10) では中心点と座標の差からatan関数を使って角度を出し、それをcos関数に入れることで-0.1 から0.1を周期的に出力する。cos関数の中の数字が大きくなればなるほど、周期が短くなり、atan関数の係数の数でスパイクの数が変わる。q は 標準化した全てのuv座標から中心座標(0.5, 0.5)を引いたベクトル。

幹の描き方

幹の作り方が自分にとってはとても新鮮だったので、手順を細分化してみた。手書きが簡単だったので手書きで。

col *= 1.0 - (1.0 - (smoothstep(r, r+0.0002, abs(q.x)))) * (1.0 - (smoothstep(0.0, 0.1, q.y)));

幹にsin関数で曲線を加えてupdate

r = 0.015;
r += 0.002*cos(120.0*q.y); //幹を傾ける
r += exp(-40.0*uv.y);     //地面からの曲線を指数関数で表現
col *= 1.0 - (1.0 - (smoothstep(r, r+0.0002, abs(q.x-0.25*sin(2.0*q.y))))) * (1.0 - (smoothstep(0.0, 0.1, q.y))); 
   

グラデーションを追加

vec3 col = mix(vec3(1.0, 0.4, 0.1), vec3(1.0, 0.8, 0.3), sqrt(uv.y));
//orange -> yellow
//Square root関数で直線をカーブさせてもっと黄色が出力されるようにし、オレンジを抑える。

完成

このチュートリアルでは、指数関数を使った時のピクセルの動きの説明が少なかったように感じました。イメージだけなら十分でしたが、詳細な説明が不足していたと思います。

今回のメモを少しでも便利だと思ってくればありがたいです。