remotion-dev/remotion · error · Error

Failed to create WebGL texture

Error message

Failed to create WebGL texture

What it means

Thrown by the metallic-swirl effect's WebGL setup when gl.createTexture() returns null. WebGL returns null (rather than throwing) when the GL context is lost, when GPU resources/texture memory are exhausted, or when the implementation cannot allocate the object. The effect's init path has already built the program, VAO and VBO, so failure here is specifically a texture-allocation/context-health problem.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:580

		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);

		return {
			gl,
			program,
			vao,
			vbo,
			texture,
			uSource: gl.getUniformLocation(program, 'uSource'),
			uResolution: gl.getUniformLocation(program, 'uResolution'),
			uTime: gl.getUniformLocation(program, 'uTime'),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Check gl.isContextLost() before allocating, and recreate the WebGL context (listen for the 'webglcontextlost'/'webglcontextrestored' events) before retrying.
2. Reduce the number of concurrent WebGL contexts/effects and free unused textures with gl.deleteTexture() to lower memory pressure.
3. Render in a GPU-enabled environment (real Chrome with hardware acceleration on) rather than pure software rasterization.
4. Retry the effect init once after re-acquiring a healthy context; if it still fails, surface a clearer 'WebGL context unavailable' message to the user.

Example fix

// before
const texture = gl.createTexture();
if (!texture) {
	throw new Error('Failed to create WebGL texture');
}

// after
if (gl.isContextLost()) {
	throw new Error('WebGL context is lost; recreate the context before applying the metallic-swirl effect');
}
const texture = gl.createTexture();
if (!texture) {
	throw new Error('Failed to create WebGL texture (GPU resources exhausted or context lost)');
}

// Run before invoking the metallic-swirl effect init
const assertWebGLHealthy = (gl: WebGL2RenderingContext | WebGLRenderingContext) => {
  if (gl.isContextLost()) {
    throw new Error('WebGL context is lost — recreate the context before using GPU effects');
  }
};
// canvas.addEventListener('webglcontextrestored', reinitEffect);

const isHealthyWebGLContext = (gl: unknown): gl is WebGL2RenderingContext =>
  !!gl && typeof (gl as WebGL2RenderingContext).isContextLost === 'function' &&
  !(gl as WebGL2RenderingContext).isContextLost();

try {
  effect.create(canvas);
} catch (err) {
  if (String(err?.message ?? '').includes('Failed to create WebGL texture')) {
    // wait for 'webglcontextrestored', then retry once
  } else throw err;
}

When it happens

Trigger: Calling the metallic-swirl effect's create/init routine while gl.isContextLost() is true, after allocating many concurrent WebGL contexts/textures, or running under a software rasterizer (e.g. swiftshader/headless) that cannot service the request. Also when the canvas/context was forcibly lost by the browser (driver reset, tab backgrounding).

Common situations: Headless or server-side rendering without real GPU acceleration; stacking many WebGL-based brand effects simultaneously; GPU driver crash/reset mid-render; running in a VM/container with no GPU; Chrome losing the context during long renders.

Related errors

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

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