remotion-dev/remotion · error · Error

Failed to create WebGL noise texture

Error message

Failed to create WebGL noise texture

What it means

Internal error from the `roughenEdges()` effect setup: `gl.createTexture()` returned `null` while allocating the dedicated noise texture (a 256×256 RGBA byte texture seeded by an xorshift PRNG). Environment-level allocation failure, not a param error. Distinct from the source-texture error so the failure point is unambiguous in stack traces.

Source

Thrown at packages/effects/src/roughen-edges.ts:409

	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
	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 setupRoughenEdges = (target: HTMLCanvasElement): RoughenEdgesState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Reload the page or restart the render.
  2. Lower the count of concurrently mounted effects.
  3. Update GPU drivers / use hardware acceleration.
  4. Handle `webglcontextlost` to tear down and re-create textures.
Defensive patterns

Strategy: try-catch

Validate before calling

const canAllocateTexture = (): boolean => {
  try {
    const c = document.createElement('canvas');
    const gl = c.getContext('webgl2');
    if (!gl) return false;
    const t = gl.createTexture();
    if (t) gl.deleteTexture(t);
    return !!t;
  } catch {
    return false;
  }
};

Try / catch

try {
  roughenEdges()({...});
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL noise texture/.test(err.message)) {
    // reduce active effects and retry
  } else {
    throw err;
  }
}

Prevention

When it happens

Trigger: Context loss between source-texture and noise-texture creation; GPU texture-memory exhaustion; software GL backend with low texture limits.

Common situations: Many effects mounted at once; constrained CI GPU; systems resuming from sleep with a stale context.

Related errors


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