remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown in setup() of the halftone-linear-gradient effect when gl.createTexture() returns null. The effect allocates one source texture used to sample the incoming frame; a null texture means the GL implementation would not hand out another texture object, normally because of texture-budget limits or context loss.

Source

Thrown at packages/effects/src/halftone-linear-gradient.ts:482

		if (!vbo) {
			throw new Error('Failed to create WebGL buffer');
		}

		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
		gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

		const aPos = gl.getAttribLocation(program, 'aPos');
		const aUv = gl.getAttribLocation(program, 'aUv');
		gl.enableVertexAttribArray(aPos);
		gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
		gl.enableVertexAttribArray(aUv);
		gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);

		gl.bindVertexArray(null);

		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_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
		gl.bindTexture(gl.TEXTURE_2D, null);

		const colorCanvas = document.createElement('canvas');
		colorCanvas.width = 1;
		colorCanvas.height = 1;
		const colorCtx = colorCanvas.getContext('2d', {willReadFrequently: true});
		if (!colorCtx) {
			throw new Error('Failed to acquire 2D context for color parsing');
		}

		return {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Check gl.isContextLost(); restart the render if the context is lost.
2. Reduce the number of media layers feeding WebGL2 effects, or lower the output resolution to shrink per-texture memory.
3. Render on hardware with adequate texture memory; avoid pure-software GL for large frames.
4. Update the GPU driver to one that respects the real hardware texture limits.

// Probe whether the context will hand out a texture at the size you need.
function canCreateTexture(canvas: HTMLCanvasElement, width: number, height: number): boolean {
  const gl = canvas.getContext('webgl2');
  if (!gl) return false;
  const tex = gl.createTexture();
  if (!tex) return false;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  try {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  } catch {
    gl.deleteTexture(tex);
    return false;
  }
  gl.deleteTexture(tex);
  return true;
}

try {
  // ...use halftoneLinearGradient()
} catch (e) {
  if (e instanceof Error && /Failed to create WebGL texture/.test(e.message)) {
    // reduce output resolution, fewer media layers, or restart on context loss
  } else throw e;
}

When it happens

Trigger: Allocating the effect's source texture after many other effects/textures already hold GPU memory; rendering very large frame textures on a GPU with a low MAX_TEXTURE_IMAGE_UNITS or low total texture memory; context-lost state.

Common situations: Compositions with many image/video layers each feeding a WebGL2 effect; headless rendering against a software GL with stingy texture limits; rendering after a GPU crash.

Related errors

• Failed to create WebGL vertex array
• Failed to create WebGL buffer
• Failed to create WebGL texture
• Failed to create WebGL shader
• Failed to create WebGL program

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