シェーダアート

画面いっぱいの板ポリにフラグメントシェーダで絵を付けたもの

https://s.wordpress.com/mshots/v1/https://www.shadertoy.com/?&.png

板ポリが画面全体を覆っているということはすべてのピクセルで実行される

イメージとしては、2重for文

gl_FragColorに渡したものが、最終的な絵になる

vec4で渡す、vec4(R, G, B, 1.0);

色は0.0~1.0の範囲で指定する

0以下を渡すと0として扱われる、1以上は1として扱われる

https://scrapbox.io/files/60e30eab7ad07b001ce11d12.png

すべてのピクセルで真っ白に描けと命令する

正規化

https://scrapbox.io/files/60e308d2bc6a690020a3dc93.png

code:001.frag

precision mediump float; //おまじない

uniform vec2 resolution; //画面解像度、FHDなら1920, 1080という数字が入っている変数

uniform float time; //時間、アニメーションさせたい時に使う

void main() {

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

gl_FragColor = vec4(p, 0.0, 1.0);

}　　

正規化、は空間をxを-1~1、yを-1~1に変換する

gl_FragCoord.xyには、ピクセルの座標が入っている（左上が原点）

FHDだとしたら、x:0~1920、y:0~1080

2倍して、画面解像度を引くとx:-1920~1920、y:-1080~1080という空間になる

min(resolution.x, resolution.y)、つまり今回でいうと1080で割り、x:-1.77777~1.77777、y:-1~1

画面の比率を保つためにやる

やらないと綺麗な円を描きたいのにつぶれてしまう

それが各ピクセルで実行されるのであんな色になる

https://scrapbox.io/files/60e30e42a73439001f2fdbca.png