🎡GLSLでパルックみたいな光の輪

あたり総研

2023年1月4日 18:53

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.;
c=c;　#uglyversion #つぶやきGLSL pic.twitter.com/oD0iqC4MQq
— m_oka (@m_oka) January 4, 2023

GLSL特有の関数やベクトルの考えに慣れる length

length関数を使います

length はgenType xを引数としていますが、説明文からgenTypeにvectorが含まれていることがわかります。(仕様書では８章に「以下の組み込み関数が指定され、入力引数（および対応する出力）が float、vec2、vec3、または vec4 である場合、引数として genType が用いられる。」と言う記述もあります）