remotion-dev/remotion · critical · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by `createRgbaTexture` in the barrel distortion runtime when `gl.createTexture()` returns `null`. WebGL returns null for resource allocations when the context is lost, GPU memory is exhausted, or too many textures are already allocated. This is an environmental/resource failure, not a logic error in the effect.

Source

Thrown at packages/effects/src/barrel-distortion/barrel-distortion-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 setupBarrelDistortion = (
	target: HTMLCanvasElement,
): BarrelDistortionState => {
	const gl = target.getContext('webgl2', {
		premultipliedAlpha: true,
		alpha: true,
		preserveDrawingBuffer: true,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Reduce the number of simultaneously active WebGL-backed effects; call the effect's `cleanup` (cleanupBarrelDistortion) to release textures before creating new ones.
  2. Check for a lost WebGL context (`gl.isContextLost()`) and reinitialize the effect on restore.
  3. Lower frame resolution to reduce texture memory pressure.
  4. Ensure hardware acceleration is enabled in the browser/headless Chrome used for rendering.
  5. Update GPU drivers; older drivers leak texture handles and eventually return null.

Example fix

// before: setup once, never release
const state = setupBarrelDistortion(canvas);
// ...

// after: release when the canvas/effect is no longer needed
cleanupBarrelDistortion(state);
Defensive patterns

Strategy: try-catch

Validate before calling

if (gl.isContextLost()) { /* skip, await restore */ }

Try / catch

try {
  const state = setupBarrelDistortion(canvas);
} catch (err) {
  if (/Failed to create WebGL texture/.test(err.message)) {
    // reduce active effects or await context restore, then retry
  } else { throw err; }
}

Prevention

When it happens

Trigger: Called from `setupBarrelDistortion` -> `createRgbaTexture(gl)` on line 78. Fires when `gl.createTexture()` yields a null WebGLTexture handle.

Common situations: Too many concurrent WebGL contexts/canvases in one Studio render (each effect setup holds GPU resources); GPU memory pressure from very large frame textures; a WebGL context lost event that has not been handled; running in an environment with a constrained software renderer.

Related errors


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