{"record":{"id":"f3f8836589ecbe38","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-buffer-f3f883","errorCode":null,"errorMessage":"Failed to create WebGL buffer","messagePattern":"Failed to create WebGL buffer","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/paper.ts","lineNumber":803,"sourceCode":"\tconst fs = compileShader(gl, gl.FRAGMENT_SHADER, PAPER_FS);\n\tconst program = linkProgram(gl, vs, fs);\n\tgl.deleteShader(vs);\n\tgl.deleteShader(fs);\n\n\tconst vao = gl.createVertexArray();\n\tif (!vao) {\n\t\tthrow new Error('Failed to create WebGL vertex array');\n\t}\n\n\tgl.bindVertexArray(vao);\n\n\tconst data = new Float32Array([\n\t\t-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,\n\t]);\n\n\tconst vbo = gl.createBuffer();\n\tif (!vbo) {\n\t\tthrow new Error('Failed to create WebGL buffer');\n\t}\n\n\tgl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\tgl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n\n\tconst aPos = gl.getAttribLocation(program, 'aPos');\n\tconst aUv = gl.getAttribLocation(program, 'aUv');\n\tgl.enableVertexAttribArray(aPos);\n\tgl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);\n\tgl.enableVertexAttribArray(aUv);\n\tgl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);\n\n\tgl.bindVertexArray(null);\n\n\tconst sourceTexture = createSourceTexture(gl);\n\tconst noiseTexture = createNoiseTexture(gl);\n\tgl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);\n","sourceCodeStart":785,"sourceCodeEnd":821,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/paper.ts#L785-L821","documentation":"The paper() effect builds a fullscreen-quad vertex buffer object (VBO) during WebGL2 setup. gl.createBuffer() returns null when the GL context is lost, already destroyed, or the driver refuses further allocations. This guard converts that silent null into an explicit setup failure so the renderer does not continue against a dead context.","triggerScenarios":"Reached inside setupPaper() after the WebGL2 context is acquired, the paper shaders compile and link, and gl.createVertexArray() succeeds. The very next allocation (gl.createBuffer() for the quad vertices) returns null. Happens during any render or Studio preview frame that instantiates the paper effect under context-loss or GPU pressure.","commonSituations":"Headless Chrome rendering under memory pressure; long-running Studio sessions where the OS evicted the GL context; machines with buggy/outdated GPU drivers; compositions stacking many GPU effects so the driver hits object limits; tab backgrounded then resumed.","solutions":["Confirm the render environment has a working WebGL2 context (for headless Chrome pass GPU flags such as --use-gl=angle / --enable-unsafe-swiftshader instead of disabling WebGL).","Register 'webglcontextlost' / 'webglcontextrestored' listeners on the canvas and re-run setupPaper() on restore.","Cut down the number of simultaneous GPU-heavy effects in the composition so the driver stays under its object budget.","Update GPU drivers; fall back to SwiftShader software rendering in CI."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"// Context-loss aware render wrapper for a GPU effect.\nconst canvas = document.createElement('canvas');\ncanvas.addEventListener('webglcontextlost', (e) => {\n  e.preventDefault(); // allow restoration\n  pendingRestore = true;\n});\ncanvas.addEventListener('webglcontextrestored', () => {\n  pendingRestore = false;\n  initEffect(); // re-run setupPaper()\n});\n\nfunction renderFrame() {\n  try {\n    drawWithPaper(state); // uses the VBO from setupPaper\n  } catch (err) {\n    if (isContextLostError(err)) initEffect(); // rebuild GL objects\n    else throw err;\n  }\n}","preventionTips":["Render on an environment with a verified WebGL2 context (check with a getContext probe before rendering).","In headless CI, pass Chromium GPU flags (--use-gl=angle, --enable-unsafe-swiftshader) rather than disabling WebGL.","Handle webglcontextlost/webglcontextrestored and rebuild GL state instead of reusing dead objects.","Limit how many GPU-heavy effects run concurrently in one composition."],"tags":["webgl","gpu","rendering","paper-effect","context-loss"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}