remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown by setupCheckerboard() when gl.createVertexArray() returns null. The VAO holds the quad's vertex attribute bindings for the checkerboard shader; a null return means the context is lost, destroyed, or out of VAO objects, so the effect cannot configure its draw call and setup aborts.

Source

Thrown at packages/effects/src/checkerboard.ts:362

};

const setupCheckerboard = (target: HTMLCanvasElement): CheckerboardState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {
		throw createWebGL2ContextError('checkerboard effect');
	}

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const program = createProgram(gl, CHECKERBOARD_VS, CHECKERBOARD_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 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 <Checkerboard {...props} />;
} catch (err) {
  if (/Failed to create WebGL vertex array/.test(String(err))) return <FallbackFrame />;
  throw err;
}

When it happens

Trigger: setupCheckerboard() calls gl.createVertexArray() at checkerboard.ts:360 after program creation; it returns null and the guard at :361 throws.

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

Related errors

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

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