remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by setupNoise (packages/effects/src/noise.ts:232) when gl.createTexture() returns null while creating the source texture the noise effect uploads each frame into. Null means context loss, GPU-memory exhaustion, or too many live textures.

Source

Thrown at packages/effects/src/noise.ts:232

	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');
	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_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	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.bindTexture(gl.TEXTURE_2D, null);

	return {
		gl,
		program,
		vao,
		vbo,
		texture,
		uSource: gl.getUniformLocation(program, 'uSource'),
		uResolution: gl.getUniformLocation(program, 'uResolution'),
		uAmount: gl.getUniformLocation(program, 'uAmount'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Dispose textures via cleanup between compositions and limit concurrent WebGL2 effects.
2. Render on a GPU host with WebGL enabled in headless Chrome.
3. Handle context-loss events and re-render after restore; fall back to no-effect render if allocation keeps failing.

Example fix

// before
const texture = gl.createTexture(); // null -> throws

// after
const texture = gl.createTexture();
if (!texture) {
  throw new Error('noise effect unavailable: cannot allocate WebGL2 texture');
}

function canCreateNoiseTexture(): boolean {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl || gl.isContextLost()) return false;
    const t = gl.createTexture();
    const ok = !!t;
    if (t) gl.deleteTexture(t);
    return ok;
  } catch {
    return false;
  }
}

try {
  scene.push(noise({amount: 0.2}));
} catch (err) {
  if (/Failed to create WebGL texture/.test(String(err?.message))) {
    // texture budget exhausted or context lost: omit the effect
  } else throw err;
}

When it happens

Trigger: noise() applied on a lost context or under GPU-memory pressure; many texture-allocating effects running at once; rendering at very large frame dimensions.

Common situations: Integrated GPUs with low texture memory; leaked textures in long sessions; headless software rendering; GPU crash mid-batch.

Related errors

• Failed to create WebGL noise texture
• Failed to create WebGL texture
• Failed to create WebGL shader
• Failed to create WebGL program
• Failed to create WebGL vertex array

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