remotion-dev/remotion · critical · Error

Failed to create white balance shader

Error message

Failed to create white balance shader

What it means

Thrown by compileShader() in the white balance effect when gl.createShader(type) returns null. WebGL's createShader returns null on context loss, context destruction, or resource exhaustion. The shader source (VERTEX_SHADER / FRAGMENT_SHADER) is a static library constant incorporating COLOR_SPACE_GLSL and WHITE_BALANCE_GLSL.

Source

Thrown at packages/effects/src/white-balance.ts:128

	}

	vec3 unpremultiplied = sourceColor.rgb / alpha;
	vec3 linear = srgbToLinear(unpremultiplied);
	vec3 balanced = applyWhiteBalanceLinear(linear, uTemperature, uTint);
	vec3 corrected = linearToSrgb(balanced);

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

const compileShader = (
	gl: WebGL2RenderingContext,
	type: number,
	source: string,
): WebGLShader => {
	const shader = gl.createShader(type);
	if (!shader) {
		throw new Error('Failed to create white balance 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(
			`White balance shader compile failed: ${log ?? '(no log)'}`,
		);
	}

	return shader;
};

const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Handle 'webglcontextlost'/'webglcontextrestored' events and re-run setupWhiteBalance on a fresh canvas.
2. Ensure cleanup of old white balance effect states before creating new instances.
3. Reduce concurrent effect instances to lower shader object pressure.
4. Update GPU drivers or switch render backends.

const gl = canvas.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  return;
}
try {
  const state = setupWhiteBalance(canvas);
} catch (e) {
  if ((e as Error).message === 'Failed to create white balance shader') {
    console.warn('White balance shader allocation failed:', (e as Error).message);
  }
}

When it happens

Trigger: Called transitively from setupWhiteBalance() at packages/effects/src/white-balance.ts:194 via createProgram(gl) which calls compileShader for both vertex and fragment shaders. Fires when the GL context is lost or shader object slots are exhausted. User params (temperature, tint) do not cause this.

Common situations: WebGL context loss during effect setup; long-running sessions with many white balance effect instances leaking shader objects; constrained GPU environments (mobile, VM, older drivers); GPU process crash mid-setup.

Related errors

• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create WebGL shader
• White balance shader compile failed: ${log ?? '(no log)'}

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