sickn33/agentic-awesome-skills · error

WebGL buffer creation failed

Error message

WebGL buffer creation failed

What it means

After creating the context and program, the constructor calls gl.createBuffer(); if the GL returns null it throws 'WebGL buffer creation failed'. A null buffer almost always means the context is lost or was just lost — browsers asynchronously revoke WebGL contexts under GPU pressure and subsequent GL calls return null.

Source

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

      this.startTime = performance.now();
      this.phaseTime = null;
      this.lastFrame = 0;
      this.frameHandle = 0;
      try {
        this.gl = canvas.getContext("webgl", {
          alpha: false,
          antialias: false,
          depth: false,
          stencil: false,
          powerPreference: "low-power",
          preserveDrawingBuffer: true
        });
        if (!this.gl) throw new Error("WebGL context unavailable");

        this.program = createProgram(this.gl);
        this.gl.useProgram(this.program);
        const buffer = this.gl.createBuffer();
        if (!buffer) throw new Error("WebGL buffer creation failed");
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
          this.gl.STATIC_DRAW
        );
        const position = this.gl.getAttribLocation(this.program, "aPosition");
        if (position < 0) throw new Error("WebGL position attribute unavailable");
        this.gl.enableVertexAttribArray(position);
        this.gl.vertexAttribPointer(position, 2, this.gl.FLOAT, false, 0, 0);

        this.locations = {
          resolution: uniform(this.gl, this.program, "uResolution"),
          time: uniform(this.gl, this.program, "uTime"),
          seed: uniform(this.gl, this.program, "uSeed"),
          mode: uniform(this.gl, this.program, "uMode"),
          overall: uniform(this.gl, this.program, "uOverall"),
          colorCount: uniform(this.gl, this.program, "uColorCount"),

View on GitHub (pinned to 58d857988f)

Solutions

1. Handle webglcontextlost/webglcontextrestored on the canvas and rebuild the renderer on restore
2. Guard construction with a disposed flag so teardown cancels init
3. Reduce simultaneous WebGL instances on the page
4. Fall back to a non-GL renderer if a retry after restore still fails

Example fix

// before
const buffer = this.gl.createBuffer();
if (!buffer) throw new Error('WebGL buffer creation failed');

// after
canvas.addEventListener('webglcontextlost', e => { e.preventDefault(); this.destroyed = true; });
canvas.addEventListener('webglcontextrestored', () => this.rebuild());
const buffer = this.gl.createBuffer();
if (!buffer) return this.destroy(); // context lost mid-init; rebuild later

try { renderer = new SpectralField(canvas); }
catch (e) {
  if (/WebGL (buffer creation failed|context unavailable)/.test(e.message)) { renderer = null; mountCssFallback(canvas); }
  else throw e;
}

When it happens

Trigger: Constructing the renderer while the GPU resets or the driver crashes; the same context already received WEBGL_lose_context; memory pressure on mobile revoking the context between program and buffer creation; racing unmount/teardown against the constructor.

Common situations: Mobile browsers under memory pressure with several WebGL canvases; laptops waking from sleep with driver resets; tests forcing context loss; component unmount calling loseContext while init still runs.

Related errors

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

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