Generate GLSL Shaders for Visual Effects

Shader Programming GLSL is a comprehensive guide to writing GPU shaders in GLSL (OpenGL Shading Language), covering syntax, uniforms, varying variables, and mathematical concepts like swizzling and vector operations for visual effects. It walks the vertex/fragment pipeline (vertex shaders transform 3D coordinates to 2D screen space via gl_Position, fragment shaders color individual pixels via gl_FragColor), the uniform/varying data model (uniform is constant data passed from the CPU, varying is interpolated from vertex to fragment shader, illustrated with a UV-coordinate gradient example), and swizzling for freely reordering vector components (color.rgb, color.zyx). A full raymarching example renders a signed-distance-field 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);
}

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

Given a shader task, the skill outputs GLSL vertex/fragment shader code plus five stated best practices - use mix() for linear interpolation instead of manual math, use step() and smoothstep() for thresholding and soft edges to avoid branches, and pack data into vec4 to minimize memory access - and two anti-patterns to avoid: heavy if-else branching inside loops (hurts GPU parallelism) and calculating constant values inside the shader instead of pre-computing them as CPU-supplied uniforms. It also covers a specific troubleshooting case: a shader that compiles but renders a black screen, diagnosed by checking gl_Position.w (usually should be 1.0), confirming uniforms are actually being set from the host application, and verifying UV coordinates fall within [0, 1].

Targets GLSL as used in WebGL, Three.js, and game engine shader pipelines, including Shadertoy-style entry points (mainImage/fragCoord/iResolution) as shown in the raymarching example.

Graphics programmers writing custom GLSL shaders for WebGL, Three.js, or game engines who need the vertex/fragment pipeline, uniform/varying data flow, swizzling syntax, and performance-conscious patterns (branch avoidance, CPU-side pre-computation) rather than trial-and-error shader debugging.