Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Shader.preDestroy leaks its ShaderQuad's vertex buffer and VAO on every create/destroy cycle (4.2.1)

Open Beginner friendly
#7,394 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
86/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
game-dev

Research direction

Start at preDestroy in the Shader game object source (src/gameobjects/Shader/Shader.js) and trace renderNode into the ShaderQuad, its WebGLVertexBufferLayoutWrapper and ProgramManager. Read how WebGLRenderer registers and releases wrappers (glBufferWrappers, glVAOWrappers, deleteBuffer) to mirror that pattern for VAOs, possibly adding a deleteVAO. Done when the issue's HTML probe prints 0, 0, 0, 0 for both counts, including the destroyed-before-first-draw case, without freeing the shared program or genericQuadIndexBuffer.

Written by the indexing model from the issue text.

Description

In WebGL mode, every Shader game object builds its own ShaderQuad render node. The node allocates a vertex buffer

(WebGLVertexBufferLayoutWrapper → renderer.createVertexBuffer, registered in renderer.glBufferWrappers).

On first draw, its ProgramManager creates a VAO per linked program

(renderer.createVAO, registered in renderer.glVAOWrappers).

Shader.preDestroy only nulls this.renderNode. Neither the vertex buffer nor the VAO is released, so both stay registered with the renderer, and their GL objects stay allocated, for the life of the game.

This adds up quickly when shaders are created and destroyed repeatedly. For example, a UI button that draws its background with a Shader and lives in an overlay that is rebuilt on every show leaks one buffer and one VAO per button per show.

Expected: after each create/draw/destroy cycle, the buffer and VAO wrapper counts return to their baseline.

Actual: both counts grow by one per cycle. A shader destroyed before its first draw still leaks its vertex buffer.

Example Test Code

Run against unpatched Phaser 4.2.1:

<!doctype html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<script>
const config = {
    name: 'LeakProbe',
    fragmentSource: `
        precision mediump float;
        varying vec2 outTexCoord;
        void main() { gl_FragColor = vec4(outTexCoord, 0.0, 1.0); }
    `
};

new Phaser.Game({
    type: Phaser.WEBGL,
    width: 128,
    height: 128,
    audio: { noAudio: true },
    scene: {
        create: function () {
            const renderer = this.game.renderer;
            let baseBuffers = null;
            let baseVAOs = null;
            let shader = null;
            let cycle = 0;

            // Each cycle: create a Shader, let it draw once (which creates its VAO), then destroy it.
            this.game.events.on('postrender', () => {
                if (baseBuffers === null) {
                    baseBuffers = renderer.glBufferWrappers.length;
                    baseVAOs = renderer.glVAOWrappers.length;
                } else if (shader) {
                    shader.destroy();
                    shader = null;
                    cycle++;
                    console.log(
                        `Cycle ${cycle}: retained buffers = ${renderer.glBufferWrappers.length - baseBuffers},`,
                        `retained VAOs = ${renderer.glVAOWrappers.length - baseVAOs}`
                    );
                }

                if (cycle < 4) {
                    shader = this.add.existing(new Phaser.GameObjects.Shader(this, config, 64, 64, 64, 64));
                }
            });
        }
    }
});
</script>
</body>
</html>

Expected counts: 0, 0, 0, 0 for both.
Actual counts: 1, 2, 3, 4 for both.

Additional Information

Releasing the render node's own resources in Shader.preDestroy eliminates the growth:

preDestroy: function ()
{
    var renderNode = this.renderNode;

    if (renderNode)
    {
        //  Release this Shader's own GL resources. The program and the
        //  index buffer are shared, so they stay.
        var renderer = renderNode.renderer;
        var programs = renderNode.programManager.programs;

        for (var key in programs)
        {
            var vao = programs[key].vao;
            var vaoIndex = renderer.glVAOWrappers.indexOf(vao);

            if (vaoIndex !== -1)
            {
                renderer.glVAOWrappers.splice(vaoIndex, 1);
            }

            vao.destroy();
        }

        renderer.deleteBuffer(renderNode.vertexBufferLayout.buffer);
    }

    this.renderNode = null;

    // ... existing preDestroy body unchanged
}

The shader program is shared through ShaderProgramFactory's key cache, and the index buffer is the renderer's shared genericQuadIndexBuffer, so neither should be deleted here. WebGLRenderer has no VAO counterpart to deleteBuffer, which is why the fix removes the VAO from glVAOWrappers directly. A deleteVAO method on the renderer might be the cleaner upstream shape.

The same leak affects any ShaderQuad-based object that is destroyed; Shader is just the most direct way to reproduce it. The master branch's Shader.preDestroy is unchanged from 4.2.1.

Dominant language
JavaScript
Stars
40.4k
Forks
7.2k
PR merge metrics
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from phaserjs/phaser

All issues in phaserjs/phaser

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.