remotion-dev/remotion · critical · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

In the `setup` callback, `gl.createVertexArray()` returned `null`. WebGL2 returns null on context loss or resource exhaustion; the program linked successfully before this step, so it is an environment/resource failure. The vertex array object is required to bind the quad geometry.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:552

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
		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. Reduce the number of simultaneously mounted WebGL2 effects.
2. Ensure effects are unmounted/disposed so their GL resources are freed.
3. Update GPU drivers / use a hardware-accelerated browser with full VAO support.
4. Verify the WebGL2 context is healthy before mounting many effects.

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

const hasHealthyWebGL2 = (canvas: HTMLCanvasElement): boolean => {
  const gl = canvas.getContext('webgl2');
  return !!gl && !gl.isContextLost();
};

try {
  metallicSwirl({speed: 1})(...);
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL vertex array/.test(err.message)) {
    // reduce effect count or fall back
  } else {
    throw err;
  }
}

When it happens

Trigger: WebGL2 context lost mid-setup; GPU object limit reached after many effects; broken/incomplete WebGL2 implementation (e.g. a software renderer without VAO support).

Common situations: Many metallic-swirl (or other WebGL2) effects mounted simultaneously; leaked VAOs across remounts; virtualized or software WebGL2 backends; long-running sessions.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL buffer
• Metallic swirl shader compile failed: ${log ?? '(no log)'}
• Metallic swirl program link failed: ${log ?? '(no log)'}

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