remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

The radial-progressive-blur runtime allocates an RGBA texture for the source and intermediate ping-pong surfaces via gl.createTexture(). If the WebGL2 context returns null, there are insufficient GPU resources or the context is in a lost state, and the effect cannot set up its render targets.

Source

Thrown at packages/effects/src/radial-progressive-blur/radial-progressive-blur-runtime.ts:113

const getUniforms = (
	gl: WebGL2RenderingContext,
	program: WebGLProgram,
): RadialProgressiveBlurUniforms => ({
	uSource: gl.getUniformLocation(program, 'uSource'),
	uTexelSize: gl.getUniformLocation(program, 'uTexelSize'),
	uCenter: gl.getUniformLocation(program, 'uCenter'),
	uWidth: gl.getUniformLocation(program, 'uWidth'),
	uHeight: gl.getUniformLocation(program, 'uHeight'),
	uRotation: gl.getUniformLocation(program, 'uRotation'),
	uStart: gl.getUniformLocation(program, 'uStart'),
	uStartBlur: gl.getUniformLocation(program, 'uStartBlur'),
	uEndBlur: gl.getUniformLocation(program, 'uEndBlur'),
});

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 setupRadialProgressiveBlur = (
	target: HTMLCanvasElement,
): RadialProgressiveBlurState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Dispose of unused effects and their WebGL resources before creating new ones
  2. Reduce composition resolution or the number of concurrent GPU effects
  3. Handle context loss/restore events and reinitialize textures after restoration
  4. Render on a machine with more VRAM or a discrete GPU
Defensive patterns

Strategy: retry

Try / catch

canvas.addEventListener('webglcontextlost', (e) => { e.preventDefault(); }, false);
canvas.addEventListener('webglcontextrestored', () => {
  // re-create all textures and effects
}, false);

Prevention

When it happens

Trigger: Calling setupRadialProgressiveBlur() when GPU memory is exhausted, when the context has been lost, or when too many textures have already been allocated without being reclaimed by the garbage collector.

Common situations: Large video resolutions consuming all VRAM; many effects running concurrently in a single composition; long render sessions with gradual VRAM fragmentation; mobile or integrated GPUs with small memory budgets.

Related errors


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