remotion-dev/remotion · critical · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown during Gridlines setup when gl.createVertexArray() returns null. Vertex array objects are core in WebGL2, so a null return almost always indicates a lost context or resource exhaustion rather than a missing feature. The library throws because bindVertexArray would fail on null.

Source

Thrown at packages/effects/src/gridlines.ts:439

			premultipliedAlpha: true,
			alpha: true,
			preserveDrawingBuffer: true,
		});
		if (!gl) {
			throw createWebGL2ContextError('gridlines effect');
		}

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, GRIDLINES_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, GRIDLINES_FS);
		const program = linkProgram(gl, vs, fs);
		gl.deleteShader(vs);
		gl.deleteShader(fs);

		const vao = gl.createVertexArray();
		if (!vao) {
			throw new Error('Failed to create WebGL vertex array');
		}

		gl.bindVertexArray(vao);

		const data = new Float32Array([
			-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,
		]);

		const vbo = gl.createBuffer();
		if (!vbo) {
			throw new Error('Failed to create WebGL buffer');
		}

		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
		gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

		const aPos = gl.getAttribLocation(program, 'aPos');
		const aUv = gl.getAttribLocation(program, 'aUv');

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle webglcontextlost and recreate effect state on webglcontextrestored.
2. Free GL objects via cleanup() so VAOs do not accumulate across renders.
3. Reduce concurrent WebGL2 effects; render sequentially.
4. Restart the GPU/browser; update drivers if the failure persists.

Example fix

// before: setup called in a loop without cleanup -> VAOs leak -> null
frame.forEach(() => gridlines.setup(canvas));

// after: one setup, paired cleanup, context-loss handling
const s = gridlines.setup(canvas);
canvas.addEventListener('webglcontextlost', (e) => e.preventDefault());
// ... on restore: gridlines.cleanup(s); s = gridlines.setup(canvas);

if (gl.isContextLost()) {
  throw new Error('WebGL2 context lost; cannot create VAO');
}

null

try {
  gridlines.setup(canvas);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL vertex array') {
    // context loss / VAO budget exhausted
  }
  throw e;
}

When it happens

Trigger: Called once per effect setup right after the shaders/program are ready (gridlines.ts:437). Happens when the WebGL2 context was lost, or the driver has exhausted its VAO/object budget.

Common situations: Many WebGL effects/compositions alive at once; a leaked context; a GPU reset; running on a constrained software renderer.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create WebGL vertex array

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/d218975f9b5bb031. Report an issue: GitHub.