phaserjs/phaser · error · Error

Fragment Shader failed:

Error message

Fragment Shader failed:

What it means

Thrown by WebGLProgramWrapper when the program fails to link and the fragment shader (not the vertex shader) failed to compile. Message is 'Fragment ' + 'Shader failed:\n' + the info log; the fragment source is console.logged first so you can see the exact GLSL the compiler saw.

Source

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

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

    /**
     * Set up the attributes and uniforms for this program.
     * This is called after the program is created or re-created.
     *
     * @method Phaser.Renderer.WebGL.Wrappers.WebGLProgramWrapper#_setupAttributesAndUniforms
     * @private
     * @since 4.0.0

View on GitHub (pinned to 41be1e462b)

Solutions

1. Read the info log in the error for the exact line/cause.
2. Look at the console.log of fragmentSource to confirm what was actually compiled.
3. Add the required precision statement for WebGL1-style shaders.
4. Ensure output variable style matches the GLSL version (gl_FragColor vs declared out vec4).
5. Validate sampler/texture type pairs (sampler2D vs samplerCube etc.).

Example fix

// before
void main() { gl_FragColor = texture2D(uMainSampler, vUv); } // WebGL2 throws

// after
#version 300 es
out vec4 fragColor;
void main() { fragColor = texture(uMainSampler, vUv); }

function hasFragmentPrecision(src) { return /precision\s+(lowp|mediump|highp)\s+float/.test(src) || /^#version\s+300/m.test(src); }

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

When it happens

Trigger: Fragment shader with a syntax error, undefined function, precision qualifier problems, unsupported extension, type mismatch, or a uniform/texture lookup that doesn't match.

Common situations: Missing precision qualifiers (e.g. no 'precision mediump float;'); using #version 300 es 'out' declaration but writing gl_FragColor; sampling a texture with the wrong sampler type; vendor-specific extension requirements; typo in a uniform name used in a lookup.

Related errors

• Vertex 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/573b43ee7e3c2c73. Report an issue: GitHub.