Shader Programming GLSL

Overview

When to Use This Skill

• Use when creating custom visual effects in WebGL, Three.js, or game engines.
• Use when optimizing graphics rendering performance.
• Use when implementing post-processing effects (blur, bloom, color correction).
• Use when procedurally generating textures or geometry on the GPU.

Step-by-Step Guide

1. Structure: Vertex vs. Fragment

• Vertex Shader: Transforms 3D coordinates to 2D screen space (

  gl_Position

  ).
• Fragment Shader: Colors individual pixels (

  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);
}

2. Uniforms and Varyings

• 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);
}

3. Swizzling & Vector Math

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)

Examples

Example 1: Simple Raymarching (SDF Sphere)

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);
}

Best Practices

• ✅ Do: Use

  mix()

  for linear interpolation instead of manual math.
• ✅ Do: Use

  step()

  and

  smoothstep()

  for thresholding and soft edges (avoid

  if

  branches).
• ✅ Do: Pack data into vectors (

  vec4

  ) to minimize memory access.
• ❌ Don't: Use heavy branching (

  if-else

  ) inside loops if possible; it hurts GPU parallelism.
• ❌ Don't: Calculate constant values inside the shader; pre-calculate them on the CPU (uniforms).

Troubleshooting

gl_Position.w

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.