remotion-dev/remotion · critical · Error

Failed to create WebGL vertex array

Error message

Failed to create WebGL vertex array

What it means

While setting up the noiseDisplacement effect's geometry, gl.createVertexArray() returned null. The WebGL2 context created shaders, program, and linked successfully, but cannot allocate a VAO — indicating context degradation, resource limits, or driver issues late in the setup sequence.

Source

Thrown at packages/effects/src/noise-displacement.ts:467

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

	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

	const vs = compileShader(gl, gl.VERTEX_SHADER, NOISE_DISPLACEMENT_VS);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, NOISE_DISPLACEMENT_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 the environment fully supports WebGL2 VAOs — update GPU drivers.
  2. Handle WebGL context loss and retry rendering.
  3. Reduce concurrent WebGL effects.
  4. For headless/CI rendering, verify Chrome GPU flags enable WebGL2 VAO operations.
Defensive patterns

Strategy: try-catch

Try / catch

try {
  // apply noiseDisplacement effect
} catch (e) {
  if (e instanceof Error && e.message.includes('WebGL vertex array')) {
    console.warn('WebGL VAO creation failed, skipping noiseDisplacement effect');
    // fallback path
  } else {
    throw e;
  }
}

Prevention

When it happens

Trigger: During setupNoiseDisplacement, after the program is linked and shaders deleted, gl.createVertexArray() returns null. The VAO is needed to encapsulate the aPos and aUv attribute bindings.

Common situations: Context loss during setup; GPU driver hitting VAO allocation limits; headless environments with incomplete WebGL2 VAO support; resource exhaustion from many concurrent effects.

Related errors


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