phaserjs/phaser · error · Error

Vertex Shader failed:

Error message

Vertex Shader failed:

What it means

Thrown by WebGLProgramWrapper when a shader program fails to link AND the vertex shader failed to compile. The error message is 'Vertex ' + 'Shader failed:\n' + the GL info log, and the vertex source is console.logged just before throwing so the developer can inspect the offending GLSL.

Source

Thrown at src/renderer/webgl/wrappers/WebGLProgramWrapper.js:336

     * @private
     * @since 4.0.0
     */
    _completeProgram: function ()
    {
        var program = this.webGLProgram;
        var renderer = this.renderer;
        var gl = renderer.gl;
        var vs = this._vertexShader;
        var fs = this._fragmentShader;

        var failed = 'Shader failed:\n';

        if (!gl.getProgramParameter(program, gl.LINK_STATUS))
        {
            if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
            {
                console.log(this.vertexSource);
                throw new Error('Vertex ' + failed + gl.getShaderInfoLog(vs));
            }

            if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
            {
                console.log(this.fragmentSource);
                throw new Error('Fragment ' + failed + gl.getShaderInfoLog(fs));
            }
            console.log(this.vertexSource, this.fragmentSource);
            throw new Error('Link Shader failed:' + gl.getProgramInfoLog(program));
        }

        this._setupAttributesAndUniforms();

        this.compileTimeMs = performance.now() - this._compileStartTime;
        this.compiling = false;
    },

    /**

View on GitHub (pinned to 41be1e462b)

Solutions

1. Read the info log appended to the error; it names the line and the GLSL error.
2. Inspect the console.log of the vertex source to see exactly what the compiler received (after additions are applied).
3. Match the GLSL version to the context version (WebGL1 = glsl 1.0 with attribute/varying; WebGL2 = 3.0 es with in/out and #version 300 es).
4. Validate the shader in a tool like ShaderToy or the GLSL validator before loading.
5. Disable suspect shaderAdditions one at a time to isolate which injection broke the source.

Example fix

// before (WebGL2 context, wrong qualifiers)
attribute vec2 aPos;

// after
#version 300 es
in vec2 aPos;

function validateVertexShaderGLSL(src, isWebGL2) {
  if (isWebGL2 && !/^#version\s+300\s+es/m.test(src) && /\battribute\b|\bvarying\b/.test(src)) {
    console.warn('Vertex shader uses WebGL1 qualifiers under WebGL2');
  }
}

try { program.create(vertexSource, fragmentSource); } catch (e) { if (/Vertex Shader failed/.test(e.message)) { console.error('Vertex compile error:', e.message, vertexSource); /* fix GLSL */ } else throw e; }

When it happens

Trigger: Supplying a vertex shader with a syntax error, undeclared uniform/attribute, unsupported GLSL version/extension, type mismatch, or undefined function. Triggered when the program is created and link is attempted.

Common situations: Typing errors in custom GLSL; using WebGL2-only syntax (e.g. 'in'/'out' qualifiers, #version 300 es) on a WebGL1 context or vice versa; referencing an attribute the layout doesn't declare; shader injection via shaderAdditions producing invalid GLSL; vendor-specific reserved keywords.

Related errors

• Fragment Shader failed:
• Link Shader failed:
• BaseFilterShader: No fragment shader source provided and no
• BatchHandler must have a name
• BatchHandlerStrip: Vertex count exceeds maximum per batch (

AI-assisted analysis of phaserjs/phaser@41be1e462b (2026-08-13). Data as JSON: /api/errors/398f609154ec1160. Report an issue: GitHub.