{"record":{"id":"4709067c62ccb9ba","repo":"sickn33/agentic-awesome-skills","slug":"webgl-buffer-creation-failed","errorCode":null,"errorMessage":"WebGL buffer creation failed","messagePattern":"WebGL buffer creation failed","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"skills/liuguang-banlan-ui/assets/starter/shared/spectral-field.js","lineNumber":267,"sourceCode":"      this.startTime = performance.now();\n      this.phaseTime = null;\n      this.lastFrame = 0;\n      this.frameHandle = 0;\n      try {\n        this.gl = canvas.getContext(\"webgl\", {\n          alpha: false,\n          antialias: false,\n          depth: false,\n          stencil: false,\n          powerPreference: \"low-power\",\n          preserveDrawingBuffer: true\n        });\n        if (!this.gl) throw new Error(\"WebGL context unavailable\");\n\n        this.program = createProgram(this.gl);\n        this.gl.useProgram(this.program);\n        const buffer = this.gl.createBuffer();\n        if (!buffer) throw new Error(\"WebGL buffer creation failed\");\n        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);\n        this.gl.bufferData(\n          this.gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n          this.gl.STATIC_DRAW\n        );\n        const position = this.gl.getAttribLocation(this.program, \"aPosition\");\n        if (position < 0) throw new Error(\"WebGL position attribute unavailable\");\n        this.gl.enableVertexAttribArray(position);\n        this.gl.vertexAttribPointer(position, 2, this.gl.FLOAT, false, 0, 0);\n\n        this.locations = {\n          resolution: uniform(this.gl, this.program, \"uResolution\"),\n          time: uniform(this.gl, this.program, \"uTime\"),\n          seed: uniform(this.gl, this.program, \"uSeed\"),\n          mode: uniform(this.gl, this.program, \"uMode\"),\n          overall: uniform(this.gl, this.program, \"uOverall\"),\n          colorCount: uniform(this.gl, this.program, \"uColorCount\"),","sourceCodeStart":249,"sourceCodeEnd":285,"githubUrl":"https://github.com/sickn33/agentic-awesome-skills/blob/58d857988fcfac6986206bca2b2fe223aa437e4b/skills/liuguang-banlan-ui/assets/starter/shared/spectral-field.js#L249-L285","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Handle webglcontextlost/webglcontextrestored on the canvas and rebuild the renderer on restore","Guard construction with a disposed flag so teardown cancels init","Reduce simultaneous WebGL instances on the page","Fall back to a non-GL renderer if a retry after restore still fails"],"exampleFix":"// before\nconst buffer = this.gl.createBuffer();\nif (!buffer) throw new Error('WebGL buffer creation failed');\n\n// after\ncanvas.addEventListener('webglcontextlost', e => { e.preventDefault(); this.destroyed = true; });\ncanvas.addEventListener('webglcontextrestored', () => this.rebuild());\nconst buffer = this.gl.createBuffer();\nif (!buffer) return this.destroy(); // context lost mid-init; rebuild later","handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":"try { renderer = new SpectralField(canvas); }\ncatch (e) {\n  if (/WebGL (buffer creation failed|context unavailable)/.test(e.message)) { renderer = null; mountCssFallback(canvas); }\n  else throw e;\n}","preventionTips":["Handle webglcontextlost/webglcontextrestored to rebuild the renderer","Never race unmount with construction; guard init with a disposed flag","Avoid many simultaneous WebGL canvases on one page"],"tags":["webgl","gpu","context-loss","browser"],"backgroundTag":"webgl-context-lost","analyzedSha":"58d857988fcfac6986206bca2b2fe223aa437e4b","analyzedAt":"2026-08-26T11:55:59.350Z","schemaVersion":2},"datasetVersion":"2026-08-26T14:46:13.012Z"}