Create a gist now

Instantly share code, notes, and snippets.

@fand /glsl.md
Created Jul 30, 2017

What would you like to do?
はじめようGLSL

はじめよう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);

ギュルルルル!!

🤗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment