remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Internal error from the `rings()` effect setup: `gl.createTexture()` returned `null` when allocating the source or palette texture. Environment-level allocation failure, not a user-param error. The rings effect creates exactly two textures (source sampler with LINEAR filtering, palette sampler with NEAREST filtering); both run through the same `createTexture` helper.

Solutions

1. Restart the render or reload the page to reset GPU allocations.
2. Reduce the number of active effects or the source surface size.
3. Move to a hardware-accelerated GPU with current drivers.
4. Listen for `webglcontextlost` and tear down effects to free 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 {
  rings()({...});
} 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 simultaneously mounted effects or very large source surfaces; a software GL backend that artificially caps texture object counts.

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

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL noise texture
• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL texture

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

Appendix: source

Thrown at packages/effects/src/rings.ts:333

	gl: WebGL2RenderingContext,
	vertexSource: string,
	fragmentSource: string,
): WebGLProgram => {
	const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
	const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
	const program = linkProgram(gl, vs, fs);
	gl.deleteShader(vs);
	gl.deleteShader(fs);
	return program;
};

const createTexture = (
	gl: WebGL2RenderingContext,
	filter: number,
): 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, filter);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
	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 setupRings = (target: HTMLCanvasElement): RingsState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,
	});
	if (!gl) {

View on GitHub (pinned to 78fe4bb3fd)