remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown by setupChromaticAberration() when gl.createVertexArray() returns null. The VAO holds the quad's vertex attribute bindings (aPos/aUv at locations 0/1); a null return means the context is lost/destroyed or out of VAO objects, so the draw path cannot be configured and setup aborts.

Source

Thrown at packages/effects/src/chromatic-aberration/chromatic-aberration-runtime.ts:114

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

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const program = createProgram(
		gl,
		CHROMATIC_ABERRATION_VS,
		CHROMATIC_ABERRATION_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)

Solutions

1. Reduce concurrent WebGL-using effects/compositions.
2. Enable GPU acceleration in the browser.
3. Recreate the effect on 'webglcontextrestored' after a loss.
4. Update GPU drivers; verify VAO support via WebGL2.
5. Use a GPU-enabled/higher-memory render instance.

function probeWebGL2(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
  const vao = gl.createVertexArray();
  const ok = !!vao;
  if (vao) gl.deleteVertexArray(vao);
  return ok && !gl.isContextLost();
  } catch {
  return false;
  }
}
if (!probeWebGL2()) skipOrFallback();

try {
  return <ChromaticAberration {...props} />;
} catch (err) {
  if (/Failed to create WebGL vertex array/.test(String(err))) return <FallbackFrame />;
  throw err;
}

When it happens

Trigger: setupChromaticAberration() calls gl.createVertexArray() at chromatic-aberration-runtime.ts:112 after program creation; it returns null and the guard at :113 throws.

Common situations: Lost/destroyed GL2 context, GPU process crash, many VAOs across live compositions, or software rendering under pressure.

Related errors

• Failed to create WebGL vertex array
• Failed to create WebGL shader
• Shader compile failed: ${log ?? '(no log)'}
• Failed to create WebGL program
• Program link failed: ${log ?? '(no log)'}

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