{"record":{"id":"2c705bafa41dd5b0","repo":"remotion-dev/remotion","slug":"failed-to-create-webgl-vertex-array-2c705b","errorCode":null,"errorMessage":"Failed to create WebGL vertex array","messagePattern":"Failed to create WebGL vertex array","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/shine.ts","lineNumber":259,"sourceCode":"\t\t\tpremultipliedAlpha: true,\n\t\t\talpha: true,\n\t\t\tpreserveDrawingBuffer: true,\n\t\t});\n\t\tif (!gl) {\n\t\t\tthrow createWebGL2ContextError('shine effect');\n\t\t}\n\n\t\tgl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);\n\n\t\tconst vs = compileShader(gl, gl.VERTEX_SHADER, SHINE_VS);\n\t\tconst fs = compileShader(gl, gl.FRAGMENT_SHADER, SHINE_FS);\n\t\tconst program = linkProgram(gl, vs, fs);\n\t\tgl.deleteShader(vs);\n\t\tgl.deleteShader(fs);\n\n\t\tconst vao = gl.createVertexArray();\n\t\tif (!vao) {\n\t\t\tthrow new Error('Failed to create WebGL vertex array');\n\t\t}\n\n\t\tgl.bindVertexArray(vao);\n\n\t\tconst data = new Float32Array([\n\t\t\t-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,\n\t\t]);\n\n\t\tconst vbo = gl.createBuffer();\n\t\tif (!vbo) {\n\t\t\tthrow new Error('Failed to create WebGL buffer');\n\t\t}\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\t\tgl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n\n\t\tconst aPos = gl.getAttribLocation(program, 'aPos');\n\t\tconst aUv = gl.getAttribLocation(program, 'aUv');","sourceCodeStart":241,"sourceCodeEnd":277,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/shine.ts#L241-L277","documentation":"The shine() effect's setup function calls gl.createVertexArray() to create a VAO for its fullscreen quad geometry. If the WebGL2 context returns null, the effect throws this Error. This indicates the context was created but cannot allocate a vertex array object — a sign of GPU resource starvation or a context in a degraded state.","triggerScenarios":"Calling shine() in an environment where the WebGL2 context exists but VAO allocation fails — headless Chrome without GPU acceleration, a GPU under memory pressure, or a context that experienced a loss event.","commonSituations":"CI runners with software rendering (SwiftShader); high-concurrency renders creating many simultaneous WebGL2 contexts; Remotion Lambda with a misconfigured or outdated Chrome layer; transient context loss during setup.","solutions":["Ensure GPU-accelerated WebGL2 is available (proper Chrome flags, Lambda layer, or runner).","Lower render concurrency to reduce the number of live WebGL2 contexts.","Verify context health by checking for 'webglcontextlost' events.","Upgrade GPU drivers or move to a host with hardware WebGL2 support."],"exampleFix":"null","handlingStrategy":"try-catch","validationCode":"// Probe VAO allocation capability\nfunction canCreateVao(canvas: HTMLCanvasElement): boolean {\n  const gl = canvas.getContext('webgl2');\n  if (!gl) return false;\n  const vao = gl.createVertexArray();\n  const ok = vao !== null;\n  if (vao) gl.deleteVertexArray(vao);\n  return ok;\n}","typeGuard":"null","tryCatchPattern":"try {\n  shine({ progress: 0.5 });\n} catch (e) {\n  if (e instanceof Error && e.message === 'Failed to create WebGL vertex array') {\n    console.warn('WebGL2 VAO allocation failed');\n  } else {\n    throw e;\n  }\n}","preventionTips":["Ensure GPU-accelerated WebGL2 is available.","Reduce concurrency to limit simultaneous VAO allocations.","Handle context-loss events.","Keep GPU drivers updated."],"tags":["webgl2","gpu","resource-allocation","vao","headless"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}