remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Internal error from the `roughenEdges()` effect setup: `gl.createTexture()` returned `null` while allocating the source texture (the sampler that receives each effect frame). Environment-level allocation failure, not a param error. The source texture uses LINEAR filtering and CLAMP_TO_EDGE wrapping on the fullscreen quad.

Source

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

		throw new Error('Failed to create WebGL program');
	}

	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		const log = gl.getProgramInfoLog(program);
		gl.deleteProgram(program);
		throw new Error(`Roughen edges program link failed: ${log ?? '(no log)'}`);
	}

	return program;
};

const createSourceTexture = (gl: WebGL2RenderingContext): WebGLTexture => {
	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 texture;
};

const initialNoiseState = (seed: number): number => {
	const scaledSeed = Math.round(seed * 1000);
	const mixedState = (0x9e3779b9 ^ Math.imul(scaledSeed, 0x85ebca6b)) >>> 0;
	return mixedState === 0 ? 0x9e3779b9 : mixedState;
};

const nextNoiseState = (state: number): number => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Restart the render or reload the page.
2. Reduce the number of active effects or the source surface size.
3. Switch to a hardware-accelerated GPU with current drivers.
4. Listen for `webglcontextlost` and free textures on teardown.

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 texture/.test(err.message)) {
    // reduce active effects and retry after a short delay or reload
  } else {
    throw err;
  }
}

When it happens

Trigger: Context loss mid-setup; GPU texture-memory exhaustion from many concurrent effects or very large source frames; software GL backend with strict texture caps.

Common situations: Heavy Studio sessions; large-frame renders on memory-constrained GPUs; CI on llvmpipe/SwiftShader.

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/f2ca8b6452592dcf. Report an issue: GitHub.