remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

During zoomBlur setup, `gl.createTexture()` returned `null`, meaning the GPU could not allocate another texture object. This is a resource exhaustion or context-loss condition, not a parameter validation issue. The effect creates one RGBA texture for its source image during setup.

Solutions

1. Reduce the number of concurrent WebGL effects or large image sources.
2. Downscale source images before applying the effect.
3. Handle WebGL context loss and recreate the effect.
4. Use a GPU with more available memory.

try {
  zoomBlur({ amount: 40 });
} catch (err) {
  if (err instanceof Error && err.message.includes('WebGL texture')) {
    // reduce concurrent effects or source image size and retry
  } else {
    throw err;
  }
}

When it happens

Trigger: WebGL context lost, GPU texture memory exhausted by other effects or large images, or a driver refusing further texture allocation.

Common situations: Compositions with many concurrent WebGL effects each allocating textures, very large source images filling GPU memory, headless rendering with limited GPU memory, or context loss after system GPU reset.

Related errors

• Failed to create WebGL buffer
• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL vertex array
• Program link failed

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

Appendix: source

Thrown at packages/effects/src/zoom-blur/zoom-blur-runtime.ts:80

};

const createProgram = (
	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 createRgbaTexture = (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;
};

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

View on GitHub (pinned to 78fe4bb3fd)