remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

In the speckle() setup, gl.createVertexArray() returned null, so the effect throws 'Failed to create WebGL vertex array'. Without a VAO the effect cannot bind its fullscreen-quad geometry, so setup aborts. A null VAO reflects a lost or resource-exhausted WebGL2 context, not a parameter error.

Source

Thrown at packages/effects/src/speckle.ts:231

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, SPECKLE_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, SPECKLE_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. Render with ANGLE (--gl=angle / chromiumOptions.gl='angle' / Studio OpenGL=angle).
2. Reduce concurrency and/or the number of WebGL2 effects per frame to free VAO slots.
3. Confirm the effect cleanup path (gl.deleteVertexArray) actually runs so resources are reclaimed.
4. Use a host with a conformant GPU and current drivers.

Example fix

// before
npx remotion render main MyComp out.mp4 --concurrency=16
// after
npx remotion render main MyComp out.mp4 --concurrency=4 --gl=angle

function webgl2Available(): boolean {
  try {
    return !!document.createElement('canvas').getContext('webgl2');
  } catch {
    return false;
  }
}

try {
  await renderMedia({ composition, codec: 'h264', chromiumOptions: { gl: 'angle' }, concurrency: 4 });
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL vertex array/.test(err.message)) {
    console.error('speckle() VAO allocation failed (context lost/exhausted). Reduce concurrency/effects.', err);
    throw err;
  }
  throw err;
}

When it happens

Trigger: Context loss or VAO exhaustion right after program linking in the speckle setup; exceeding the driver's bound on simultaneous vertex array objects because many WebGL2 effects are live at once.

Common situations: High render concurrency with numerous stacked WebGL2 effects; long renders leaking VAOs; headless or software-GPU environments with tight resource caps; driver reset mid-setup.

Related errors

• Failed to create WebGL geometry
• 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/a6fe5f07328264e8. Report an issue: GitHub.