GLSL Hello World

shader.frag

// gl_FragColor : ここに色()[vec4]を代入する
// gl_FragCoord.x : 実行中のピクセルのx座標 [float]
// gl_FragCoord.y : 実行中のピクセルのy座標 [float]
// gl_FragCoord.xy : 実行中のピクセルのxy座標 [vec2]

// おまじない（しっかり説明すると、GLESで浮動小数点の精度を低めないと動かない端末が多い）
#ifdef GL_ES
precision mediump float; 
#endif

uniform float time; // JavaScript から投げられてくる時間 [秒]
uniform vec2 resolution; // JavaScript から投げられてくる画面解像度

void main()
{
	gl_FragColor = vec4( // gl_FragColorに4次元ベクトル(赤,緑,青,透明度)を代入すると、実行中のピクセルの色がそれになる
		gl_FragCoord.x / resolution.x, // 赤：左から右に 0.0 ~ 1.0
		gl_FragCoord.y / resolution.y, // 緑：下から上に 0.0 ~ 1.0
		0.5 + 0.5 * sin( time ), // 青：時間軸方向に揺れる
		1.0 // 透明度：とりあえず1.0にしておこう
	);
}