remotion-dev/remotion · error · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

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

Source

Thrown at packages/effects/src/shine.ts:259

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

		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

		const vs = compileShader(gl, gl.VERTEX_SHADER, SHINE_VS);
		const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHINE_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 (proper Chrome flags, Lambda layer, or runner).
2. Lower render concurrency to reduce the number of live WebGL2 contexts.
3. Verify context health by checking for 'webglcontextlost' events.
4. Upgrade GPU drivers or move to 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 {
  shine({ progress: 0.5 });
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL vertex array') {
    console.warn('WebGL2 VAO allocation failed');
  } else {
    throw e;
  }
}

When it happens

Trigger: Calling shine() in an environment where the WebGL2 context exists but VAO allocation fails — headless Chrome without GPU acceleration, a GPU under memory pressure, or a context that experienced a loss event.

Common situations: CI runners with software rendering (SwiftShader); high-concurrency renders creating many simultaneous WebGL2 contexts; Remotion Lambda with a misconfigured or outdated Chrome layer; 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/2c705bafa41dd5b0. Report an issue: GitHub.