remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

Thrown in setup() of the halftone effect when gl.createVertexArray() returns null. Identical mechanism to the linear-gradient VAO error: the GL implementation refused to allocate another VAO, normally under object-budget exhaustion or context loss. The effect cannot bind vertex attributes without a VAO, so it treats null as fatal.

Source

Thrown at packages/effects/src/halftone.ts:430

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, HALFTONE_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, HALFTONE_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. Confirm gl.isContextLost() and restart if true.
2. Reduce WebGL2 effect count or reuse effect state across frames.
3. Render on hardware with more GPU headroom.
4. Restart Chrome/Studio to clear leaked objects.

// Probe whether the context will allocate a VAO before relying on the effect.
function canCreateVao(canvas: HTMLCanvasElement): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const vao = gl.createVertexArray();
  const ok = vao !== null;
  if (vao) gl.deleteVertexArray(vao);
  return ok;
}

try {
  // ...use halftone()
} catch (e) {
  if (e instanceof Error && /Failed to create WebGL vertex array/.test(e.message)) {
    // context loss or VAO budget exhausted; restart render
  } else throw e;
}

When it happens

Trigger: Halftone setup() running when the GL context's VAO budget is exhausted or the context is lost; many simultaneous WebGL2 effects on a low-resource GPU.

Common situations: Heavy compositions stacking WebGL2 effects; long render/Studio sessions leaking GL objects; GPU process crash.

Related errors

• Failed to create WebGL program
• Failed to create WebGL buffer
• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create WebGL shader

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