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.

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.

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 {
  roughenEdges()({...});
} catch (err) {
  if (err instanceof Error && /Failed to create WebGL noise texture/.test(err.message)) {
    // reduce active effects and retry
  } else {
    throw err;
  }
}

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

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

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

Appendix: 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)