はじめようGLSL

glsl.md

はじめようGLSL

会社の朝会でこういう発表しました https://www.youtube.com/watch?v=gFIPZUWY_xg

これをハンズオンします

まずは GLSL sandbox を開きます

http://glslsandbox.com/

• void main() がメイン
• gl_FragColor にvec4型の値を入れることで動く
  • RGBA値

gl_FragCoord をいじってみよう

• gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); とか

time を使ってみよう

• gl_FragColor = vec4(sin(time), cos(time), 0, 1); とか

円を書いてみよう

main関数の中身を書き換えます

vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
float l = length(p);

gl_FragColor = vec4(l);

中心からの距離に応じて色が変わる

float l = length(p);
float c = step(1.0, l);

gl_FragColor = vec4(c);

距離 1.0 で色が変わりましたね〜

角度を取得

float a = atan(p.y, p.x) * 2.0;

float c = a;
gl_FragColor = vec4(c);

角度で色つく

float a = atan(p.y, p.x) * 2.0;
float c = sin(a);

しましま〜

float a = atan(p.y, p.x) * 2.0;
float l = sin(a * 10.0);

しましましましま〜

float a = atan(p.y, p.x) * 2.0;
float c = sin(a * 10.0 + l * 16.0);

ぐるぐる〜

float a = atan(p.y, p.x) * 2.0;
float c = sin(a * 10.0 + floor(l * 16.0));

同心円で分割

float a = atan(p.y, p.x) * 2.0;
float c = sin(a * 10.0 + floor(l * 16.0) * time);

ギュルルルル！！

🤗