remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by the blur effect's `compileShader` helper when `gl.createShader(type)` returns `null`. This means the GL implementation refused to allocate a new shader object — an environmental failure (context loss, resource limit), not a problem with the GLSL source (that is reported separately by the compile-status check).

Source

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

		uRadius: WebGLUniformLocation | null;
		uTexelSize: WebGLUniformLocation | null;
		uSource: WebGLUniformLocation | null;
	};
	vertical: {
		uRadius: WebGLUniformLocation | null;
		uTexelSize: WebGLUniformLocation | null;
		uSource: WebGLUniformLocation | null;
	};
};

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create WebGL shader');
	}

	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		const log = gl.getShaderInfoLog(shader);
		gl.deleteShader(shader);
		throw new Error(`Shader compile failed: ${log ?? '(no log)'}`);
	}

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,
	fs: WebGLShader,
): WebGLProgram => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Check `gl.isContextLost()` before calling setup; reinitialize on restore.
2. Call `cleanupBlur` on blur states no longer in use to free shaders/programs.
3. Limit concurrently active blur/other-WebGL effects.
4. Run on hardware-accelerated WebGL2; update GPU drivers if shader allocation persistently fails.

Example fix

const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  // do not setupBlur; await context restoration
} else {
  const state = setupBlur(canvas);
}

if (gl.isContextLost()) { /* skip setupBlur */ }

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

When it happens

Trigger: Called from `createProgram(gl, BLUR_VS, BLUR_FS_*)` -> `compileShader` (line 36-38). Fires when `gl.createShader(gl.VERTEX_SHADER)` or `gl.createShader(gl.FRAGMENT_SHADER)` returns null, before any source is attached.

Common situations: WebGL2 context lost during blur setup; too many live shader objects across effects; a constrained software renderer in CI; a GPU driver crash/reset just before setup.

Related errors

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

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