Expert guide for writing efficient GLSL shaders (Vertex/Fragment) for web and game engines, covering syntax, uniforms, and common effects.
A comprehensive guide to writing GPU shaders using GLSL (OpenGL Shading Language). Learn syntax, uniforms, varying variables, and key mathematical concepts like swizzling and vector operations for visual effects.
Understand the pipeline:
gl_Position).gl_FragColor).// Vertex Shader (basic)
attribute vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Fragment Shader (basic)
uniform vec3 color;
void main() {
gl_FragColor = vec4(color, 1.0);
}
uniform: Data constant for all vertices/fragments (passed from CPU).varying: Data interpolated from vertex to fragment shader.// Passing UV coordinates
varying vec2 vUv;
// In Vertex Shader
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// In Fragment Shader
void main() {
// Gradient based on UV
gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);
}
Access vector components freely: vec4 color = vec4(1.0, 0.5, 0.0, 1.0);
color.rgb -> vec3(1.0, 0.5, 0.0)color.zyx -> vec3(0.0, 0.5, 1.0) (reordering)float sdSphere(vec3 p, float s) {
return length(p) - s;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
vec3 ro = vec3(0.0, 0.0, -3.0); // Ray Origin
vec3 rd = normalize(vec3(uv, 1.0)); // Ray Direction
float t = 0.0;
for(int i = 0; i < 64; i++) {
vec3 p = ro + rd * t;
float d = sdSphere(p, 1.0); // Sphere radius 1.0
if(d < 0.001) break;
t += d;
}
vec3 col = vec3(0.0);
if(t < 10.0) {
vec3 p = ro + rd * t;
vec3 normal = normalize(p);
col = normal * 0.5 + 0.5; // Color by normal
}
fragColor = vec4(col, 1.0);
}
mix() for linear interpolation instead of manual math.step() and smoothstep() for thresholding and soft edges (avoid if branches).vec4) to minimize memory access.if-else) inside loops if possible; it hurts GPU parallelism.Problem: Shader compiles but screen is black.
Solution: Check if gl_Position.w is correct (usually 1.0). Check if uniforms are actually being set from the host application. Verify UV coordinates are within [0, 1].