remotion-dev/remotion · critical · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

During thermal vision effect `setup` (`setupThermalVision`), via `createProgram` -> `compileShader`, `gl.createShader()` returned `null`. The WebGL2 context could not allocate a shader object, indicating context loss, resource exhaustion, or a degraded context. The error fires before shader source is uploaded.

Source

Thrown at packages/effects/src/thermal-vision.ts:156

	}

	vec3 rgb = texColor.rgb / alpha;
	float luminance = dot(rgb, vec3(0.299, 0.587, 0.114));
	vec3 thermalRgb = paletteColor(luminance);
	vec3 mixedRgb = mix(rgb, thermalRgb, clamp(uAmount, 0.0, 1.0));

	fragColor = vec4(mixedRgb * alpha, alpha);
}
`;

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(
			`Thermal vision shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

const linkProgram = (
	gl: WebGL2RenderingContext,
	vs: WebGLShader,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce concurrent webgl2 effect instances in the composition.
2. Restart the render/session for a fresh context.
3. Launch headless Chrome with WebGL2-capable flags (`--use-gl=angle --use-angle=swiftshader`).
4. Handle `webglcontextlost` to recreate contexts.

// Probe WebGL2 shader creation on a scratch canvas before relying on the effect.
const supportsWebGL2Shaders = (): boolean => {
  try {
    const gl = document.createElement('canvas').getContext('webgl2');
    return !!gl?.createShader(gl.VERTEX_SHADER);
  } catch {
    return false;
  }
};
if (!supportsWebGL2Shaders()) { /* use fallback */ }

try {
  thermalVision({...params});
} catch (e) {
  if (/Failed to create WebGL/.test((e as Error).message)) {
    renderFallbackFrame();
  } else throw e;
}

When it happens

Trigger: WebGL2 context lost before setup; too many shader objects in the page; headless browser with incomplete WebGL2; destroyed GL context.

Common situations: Many concurrent webgl2 effects; long Studio sessions after a driver crash/reset; CI with software WebGL2 and low caps; mobile under memory pressure.

Related errors

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

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