What causes "Failed to create WebGL noise texture" in remotion-dev/remotion?

Ensure cleanup deletes both paper textures between usages and cap concurrent WebGL2 effects.

remotion-dev/remotion · critical · Error

Failed to create WebGL noise texture

Error message

Failed to create WebGL noise texture

What it means

Thrown by createNoiseTexture (packages/effects/src/paper.ts:762) when gl.createTexture() returns null while creating the 256×256 noise lookup texture the paper effect samples. Null means context loss, GPU-memory exhaustion, or too many live textures; this is distinct from the source-texture error (777) because it is the dedicated noise LUT.

Source

Thrown at packages/effects/src/paper.ts:762

	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
	gl.texImage2D(
		gl.TEXTURE_2D,
		0,
		gl.RGBA,
		NOISE_TEXTURE_SIZE,
		NOISE_TEXTURE_SIZE,
		0,
		gl.RGBA,
		gl.UNSIGNED_BYTE,
		data,
	);
};

const createNoiseTexture = (gl: WebGL2RenderingContext): WebGLTexture => {
	const texture = gl.createTexture();
	if (!texture) {
		throw new Error('Failed to create WebGL noise texture');
	}

	uploadNoiseTexture(gl, texture, DEFAULT_SEED);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
	gl.bindTexture(gl.TEXTURE_2D, null);
	return texture;
};

const setupPaper = (target: HTMLCanvasElement): PaperState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Ensure cleanup deletes both paper textures between usages and cap concurrent WebGL2 effects.
Render on a GPU host with WebGL enabled in headless Chrome.
Handle context-loss events and re-render after restore.

Example fix

// before
const noiseTexture = createNoiseTexture(gl); // createTexture() returned null

// after
if (gl.isContextLost()) {
  throw new Error('WebGL2 context lost; cannot create paper noise texture');
}

Defensive patterns

Strategy: try-catch

Validate before calling

function canCreatePaperNoiseTexture(): 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 / catch

try {
  scene.push(paper({amount: 1}));
} catch (err) {
  if (/Failed to create WebGL noise texture/.test(String(err?.message))) {
    // noise LUT allocation failed: omit the effect
  } else throw err;
}

Prevention

Delete both paper textures via cleanup between usages.
Limit concurrent WebGL2 effects and texture-heavy compositions.
Handle context-loss events and render on a GPU host.

When it happens

Trigger: setupPaper creating the noise LUT on a lost context or under memory pressure; running paper alongside many other texture-heavy effects; rendering with corrupted GL state.

Common situations: Low-texture-memory integrated GPUs; leaked textures across sessions; headless software WebGL; GPU process crash mid-render.

Related errors

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