remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

The shrinkwrap() effect's setup function calls gl.createVertexArray() to create a VAO for its fullscreen quad. If the WebGL2 context returns null, the effect throws this Error. This indicates GPU resource starvation or a context in a degraded state — the context exists but cannot allocate a vertex array object.

Source

Thrown at packages/effects/src/shrinkwrap.ts:468

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, SHRINKWRAP_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHRINKWRAP_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. Ensure GPU-accelerated WebGL2 is available in the render environment.
2. Reduce concurrency to limit simultaneous WebGL2 contexts.
3. Handle 'webglcontextlost' events and retry rendering after restoration.
4. Upgrade GPU drivers or use a host with hardware WebGL2 support.

Example fix

null

// Probe VAO allocation capability
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;
}

null

try {
  shrinkwrap({ amount: 1 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL vertex array') {
    console.warn('WebGL2 VAO allocation failed for shrinkwrap');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shrinkwrap() in an environment where WebGL2 VAO allocation fails: headless Chrome without GPU acceleration, GPU memory exhaustion from many concurrent effects, or a context that experienced a loss event after creation.

Common situations: CI runners with SwiftShader software rendering; Remotion Lambda with a misconfigured Chrome layer; high-concurrency rendering with many simultaneous WebGL2 contexts; transient context loss during setup.

Related errors

• Failed to create WebGL vertex array
• Failed to create WebGL vertex array
• Failed to create WebGL vertex array
• Failed to create shadows and highlights vertex array
• Failed to create shadows and highlights vertex buffer

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