RECIPE
GLSL Shader Intro
Write your first fragment shader and understand the GPU pipeline from pixels to uniforms.
The Fragment Shader
A fragment shader runs once per pixel. It receives normalized coordinates via gl_FragCoord and outputs an RGBA color. Every frame, the GPU executes your shader millions of times in parallel.
Your First Shader
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_resolution;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution;
vec3 color = vec3(uv.x, uv.y, 0.5);
gl_FragColor = vec4(color, 1.0);
}This maps red to the X axis, green to Y, and fills blue at half intensity. u_time and u_resolution are uniforms passed from the CPU each frame.
Built-in Variables
- gl_FragCoord— pixel position (x, y, z, 1/w)
- gl_FragColor— output RGBA
- u_time— seconds since shader start