remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by wave-runtime's compileShader when gl.createShader() returns null. A null shader object means WebGL refused the allocation on context loss or GL object-limit exhaustion. The wave warp cannot compile its internal shaders without it.

Solutions

1. Reload to reset the WebGL2 context.
2. Reduce the number of WebGL effects applied at once.
3. Verify hardware-accelerated WebGL2 and update drivers.
4. Dispose offscreen effects so shader objects are freed.

Example fix

// before
const effect = wave({amplitude: 60, wavelength: 240}); // compileShader may throw

// after
const effect = (() => {
  try { return wave({amplitude: 60, wavelength: 240}); } catch { return null; }
})();

let effect = null;
try {
  effect = wave({amplitude: 60, wavelength: 240});
} catch (err) {
  console.warn('wave shader alloc failed, skipping effect', err);
}

When it happens

Trigger: wave setup calls createProgram, which calls compileShader for the internal VERTEX_SHADER/FRAGMENT_SHADER; gl.createShader(type) returns null because the context is lost or too many shader objects are live.

Common situations: Context loss under many concurrent wave/other WebGL effects; GPU/driver object caps; headless Chrome on a constrained runner.

Related errors

• Failed to create WebGL program
• Failed to create WebGL shader
• Failed to create WebGL shader
• Failed to create WebGL shader
• Shader compile failed

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

Appendix: source

Thrown at packages/effects/src/wave/wave-runtime.ts:29

	textureSource: WebGLTexture;
	uniforms: {
		uSource: WebGLUniformLocation | null;
		uResolution: WebGLUniformLocation | null;
		uAmplitude: WebGLUniformLocation | null;
		uWavelength: WebGLUniformLocation | null;
		uPhase: WebGLUniformLocation | null;
		uDirection: 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)