remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by setupFlannel when gl.createTexture() returns null after geometry setup. WebGL returns null for texture allocation on context loss or VRAM/object exhaustion. The texture is the source sampler used to feed the flannel shader each frame.

Source

Thrown at packages/effects/src/flannel.ts:260

	gl.bindVertexArray(vao);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]),
		gl.STATIC_DRAW,
	);
	const aPos = gl.getAttribLocation(program, 'aPos');
	const aUv = gl.getAttribLocation(program, 'aUv');
	gl.enableVertexAttribArray(aPos);
	gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
	gl.enableVertexAttribArray(aUv);
	gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
	gl.bindVertexArray(null);

	const texture = gl.createTexture();
	if (!texture) {
		throw new Error('Failed to create WebGL texture');
	}

	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);

	const colorCanvas = document.createElement('canvas');
	colorCanvas.width = 1;
	colorCanvas.height = 1;
	const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
	if (!colorCtx) {
		throw new Error('Failed to acquire 2D context for color parsing');
	}

	return {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Decrease output resolution or number of WebGL layers.
  2. Retry the render with a fresh Chrome.
  3. Move to a GPU with more available memory.
Defensive patterns

Strategy: retry

Try / catch

let effect;
for (let attempt = 0; attempt < 3; attempt++) {
  try {
    effect = flannel(params);
    break;
  } catch (err) {
    if (attempt === 2 || !/WebGL|texture/i.test(String(err))) throw err;
    await new Promise((r) => setTimeout(r, 200 * (attempt + 1)));
  }
}

Prevention

When it happens

Trigger: Context lost between geometry and texture creation; VRAM exhausted by large frame textures; many simultaneous effect textures.

Common situations: High-resolution renders stacking multiple WebGL effects; headless Chrome close to its GPU memory cap.

Related errors


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