🎡GLSLで蛍光灯みたいな光の輪を描くデモ
GLSLなどの一部のコーディングでは、他の描画命令よりも少ない量でコーディングができるように見えます。実際GLSLではどのように図形の描画をしているのでしょうか？
ここでは円の方程式から簡単な描画例を見ながら、GLSLの入門編とします。
円の方程式とGLSLの描画モデル
実際に上の方程式で縁を描くことができます。
実際にGLSLsandbox上で、上の方程式に近いものを描画してみましょう。
glslsandboxの輝度表現となるgl_FragColorはvec4で宣言されています。 https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf
反転させる =割り算の母数にする 1/cとか
限りなくゼロに近いという意味で、１など小さい数をもともとの輝度で割ると、画面が反転したようになります。
動かして見る。
まずは、方程式のa,bとなっているところにマウスの座標をいれてみましょう。mouse/resolutionとも仕様がみつからなかったですが、mouseには正規化（0-1）された値、resolutionには実際の画面サイズがそれぞれvec2で入っているみたいです。ですので、二つの数字をかけてこんなふうにします
float c =(((gl_FragCoord.x-mouse.x*resolution.x)*(gl_FragCoord.x-mouse.x*resolution.x))+((gl_FragCoord.y-mouse.y*resolution.y)*(gl_FragCoord.y-mouse.y*resolution.y)))/2500.;
— m_oka (@m_oka) January 4, 2023
c=c; #uglyversion #つぶやきGLSL pic.twitter.com/oD0iqC4MQq
GLSL特有の関数やベクトルの考えに慣れる length
length関数を使います
length はgenType xを引数としていますが、説明文からgenTypeにvectorが含まれていることがわかります。(仕様書では８章に「以下の組み込み関数が指定され、入力引数（および対応する出力）が float、vec2、vec3、または vec4 である場合、引数として genType が用いられる。」と言う記述もあります）
上記のコードに、先ほどと同じようにマウスの動きを適用させてみましょう。vec2はそのままで足しひきができるようになっています（演算オペレータがオーバーロードされている）のでかなり簡単にできます。
absで輪っかにする
「r」の値を一旦マイナスなるように特定の大きさの値を引き算する。absを適用すると、マイナス（黒）だったところがすべてプラスになるので、結果ゼロ以外の箇所がすべて光る。先ほどの反転と併用してこんな感じで輪っかを作ります。
P5でもやる
いいなと思ったら応援しよう！
