sickn33/agentic-awesome-skills · error

Shader compilation failed: ${message}

Error message

Shader compilation failed: ${message}

What it means

compileShader compiles GLSL source via WebGL and throws when gl.getShaderParameter(shader, gl.COMPILE_STATUS) is false, embedding the driver's info log. The shader object is deleted before throwing. Typical causes are GLSL syntax errors, undeclared identifiers, or WebGL2-only constructs in a WebGL1 (GLSL ES 1.00) pipeline.

Source

Thrown at skills/liuguang-banlan-ui/assets/starter/shared/spectral-field.js:219

        "linear-gradient(" + angle + "deg, transparent 6%, " +
        hexToRgba(entry.srgbFallback, alpha * 0.35) + " 28%, " +
        hexToRgba(entry.srgbFallback, alpha) + " 48%, " +
        hexToRgba(entry.srgbFallback, alpha * 0.32) + " 68%, transparent 90%)"
      );
    });

    layers.push("var(--app-canvas)");
    return layers.join(", ");
  }

  function compileShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      const message = gl.getShaderInfoLog(shader);
      gl.deleteShader(shader);
      throw new Error(`Shader compilation failed: ${message}`);
    }
    return shader;
  }

  function createProgram(gl) {
    const program = gl.createProgram();
    gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER));
    gl.attachShader(program, compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      throw new Error(`Shader link failed: ${gl.getProgramInfoLog(program)}`);
    }
    return program;
  }

  function uniform(gl, program, name) {
    return gl.getUniformLocation(program, name);
  }

View on GitHub (pinned to 58d857988f)

Solutions

1. Read the info log in the message — it names the offending line inside the shader string
2. Use GLSL ES 1.00 syntax: attribute/varying/texture2D, precision mediump float, no #version directive
3. Check for template-literal interpolation that injected 'undefined' into the GLSL source
4. Validate edited shaders in a live WebGL sandbox (Spector.js capture) before shipping

Example fix

// before (WebGL2 syntax, WebGL1 context)
const FRAGMENT_SHADER = `#version 300 es
out vec4 o; void main(){ o = vec4(1.0); }`;

// after
const FRAGMENT_SHADER = `precision mediump float;
void main(){ gl_FragColor = vec4(1.0); }`;

try { program = createProgram(gl); }
catch (e) {
  if (/Shader compilation failed/.test(e.message)) { console.error(e.message); return useFallbackRenderer(canvas); }
  throw e;
}

When it happens

Trigger: Editing VERTEX_SHADER/FRAGMENT_SHADER strings in spectral-field.js and introducing a syntax error; using #version 300 es, in/out, or texture() while the context is WebGL1; exceeding precision/uniform limits on low-end GPUs.

Common situations: Customizing the spectral-field shader for a theme; copy-pasting GLSL from a WebGL2 example into this WebGL1 pipeline; strict mobile GPU/WebView compilers.

Related errors

• Shader link failed: ${gl.getProgramInfoLog(program)}
• WebGL context unavailable
• WebGL buffer creation failed

AI-assisted analysis of sickn33/agentic-awesome-skills@58d857988f (2026-08-26). Data as JSON: /api/errors/8109e877f70606c7. Report an issue: GitHub.