remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown by dot-grid's setup() when gl.createVertexArray() returns null. A null VAO means the WebGL2 context is lost, destroyed, or resource-exhausted. Reached after the program is linked and shaders are deleted, when the geometry VAO is being constructed.

Source

Thrown at packages/effects/src/dot-grid.ts:223

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, DOT_GRID_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, DOT_GRID_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. Confirm effect cleanup runs (so VAOs are deleted via gl.deleteVertexArray in cleanup).
2. Reduce simultaneous WebGL2 effects per composition.
3. Reload the page; if the context was lost it may recover on next mount.
4. For headless rendering, use SwiftShader and adequate memory.
5. Update GPU drivers.

const supportsWebGL2 = () => {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
};

if (!supportsWebGL2()) {
  // skip the dotGrid() effect

try {
  state = dotGrid().setup(canvas);
} catch (err) {
  if (err instanceof Error && /vertex array/i.test(err.message)) {
    console.error('VAO allocation failed:', err.message);
    // fall back or recover
  } else {
    throw err;
  }
}

When it happens

Trigger: Lost WebGL2 context, exhausted VAO object limit, or GPU memory pressure. Triggered inside dotGrid().setup() during the geometry allocation phase.

Common situations: Many effects leaking VAOs (cleanup paths skipped); GPU reset; headless rendering with constrained software GL; long Studio sessions without reload.

Related errors

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

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