remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown by setupDropShadow when gl.createVertexArray() returns null. A null VAO means the WebGL2 context is lost, destroyed, or resource-exhausted. Reached after the four programs are built, while constructing the shared fullscreen-quad geometry.

Solutions

  1. Verify cleanupDropShadow runs (it calls gl.deleteVertexArray on unmount).
  2. Cut down the number of WebGL2 effects mounted at once.
  3. Reload to recover from a lost context; update GPU drivers.
  4. Use SwiftShader with adequate memory for headless runs.
Defensive patterns

Strategy: try-catch

Validate before calling

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

Try / catch

try {
  state = setupDropShadow(canvas);
} catch (err) {
  if (err instanceof Error && /vertex array/i.test(err.message)) {
    console.error('Drop-shadow VAO allocation failed:', err.message);
  } else {
    throw err;
  }
}

Prevention

When it happens

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

Common situations: Effects leaking VAOs (cleanup paths skipped); many drop-shadow instances; GPU driver crash; long Studio sessions; headless rendering with constrained software GL.

Related errors


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

Appendix: source

Thrown at packages/effects/src/drop-shadow/drop-shadow-runtime.ts:166

	const programHorizontal = createProgram(
		gl,
		DROP_SHADOW_VS,
		DROP_SHADOW_BLUR_FS_HORIZONTAL,
	);
	const programVertical = createProgram(
		gl,
		DROP_SHADOW_VS,
		DROP_SHADOW_BLUR_FS_VERTICAL,
	);
	const programComposite = createProgram(
		gl,
		DROP_SHADOW_VS,
		DROP_SHADOW_COMPOSITE_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);

	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);

View on GitHub (pinned to 78fe4bb3fd)