{"record":{"id":"b93d7cb68f21652f","repo":"remotion-dev/remotion","slug":"failed-to-create-vibrance-vertex-array","errorCode":null,"errorMessage":"Failed to create vibrance vertex array","messagePattern":"Failed to create vibrance vertex array","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/vibrance.ts","lineNumber":171,"sourceCode":"\treturn texture;\n};\n\nconst setupVibrance = (target: HTMLCanvasElement): VibranceState => {\n\tconst gl = target.getContext('webgl2', {\n\t\tpremultipliedAlpha: true,\n\t\talpha: true,\n\t\tpreserveDrawingBuffer: true,\n\t});\n\tif (!gl) {\n\t\tthrow createWebGL2ContextError('vibrance effect');\n\t}\n\n\tgl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);\n\n\tconst program = createProgram(gl);\n\tconst vao = gl.createVertexArray();\n\tif (!vao) {\n\t\tthrow new Error('Failed to create vibrance vertex array');\n\t}\n\n\tconst vbo = gl.createBuffer();\n\tif (!vbo) {\n\t\tthrow new Error('Failed to create vibrance vertex buffer');\n\t}\n\n\tgl.bindVertexArray(vao);\n\tgl.bindBuffer(gl.ARRAY_BUFFER, vbo);\n\tgl.bufferData(\n\t\tgl.ARRAY_BUFFER,\n\t\tnew Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),\n\t\tgl.STATIC_DRAW,\n\t);\n\n\tconst aPos = gl.getAttribLocation(program, 'aPos');\n\tconst aUv = gl.getAttribLocation(program, 'aUv');\n\tgl.enableVertexAttribArray(aPos);","sourceCodeStart":153,"sourceCodeEnd":189,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/vibrance.ts#L153-L189","documentation":"Thrown during vibrance setup when gl.createVertexArray() returns null. The VAO object cannot be allocated, indicating WebGL context loss or the GL implementation refusing another object. The vibrance pipeline needs a VAO to bind the fullscreen-quad attributes, so it cannot proceed without one.","triggerScenarios":"setupVibrance() calls gl.createVertexArray() after creating the program; it returns null on a lost context or when the driver's VAO budget is exhausted.","commonSituations":"Lost WebGL2 context in Studio with many effects; a driver/GPU that caps VAO count; context loss between getContext('webgl2') succeeding and the createVertexArray call.","solutions":["Reload the page/Studio to re-establish a fresh WebGL2 context.","Reduce concurrent WebGL effect instances so fewer VAOs are live at once.","Confirm WebGL2 is hardware accelerated (chrome://gpu) and update drivers if context loss recurs.","For headless rendering, use a Chrome build with working VAO support and adequate resources."],"exampleFix":"// before\nconst effect = vibrance({amount: 1});\n\n// after\nconst effect = (() => {\n  try { return vibrance({amount: 1}); } catch { return null; }\n})();","handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"let effect = null;\ntry {\n  effect = vibrance({amount: 1});\n} catch (err) {\n  console.warn('vibrance VAO alloc failed, skipping effect', err);\n}","preventionTips":["Reduce concurrent WebGL effect instances to stay under driver object caps.","Handle context loss/restore events and re-create the effect.","Free effects on unmounted sequences so VAOs are released.","Use hardware-accelerated WebGL2 where VAO support is reliable."],"tags":["webgl2","gpu-memory","context-loss","vibrance"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}