remotion-dev/remotion · error · Error

Failed to create WebGL shader

Error message

Failed to create WebGL shader

What it means

Thrown by compileShader in corner-pin-runtime.ts when gl.createShader(type) returns null. The WebGL2 context was acquired (context creation has its own error) but the GPU could not allocate a shader object. This is a resource-exhaustion or context-loss issue internal to the corner-pin effect's WebGL setup.

Source

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

	vbo: WebGLBuffer;
	textureSource: WebGLTexture;
	uniforms: {
		uSource: WebGLUniformLocation | null;
		uTopLeft: WebGLUniformLocation | null;
		uTopRight: WebGLUniformLocation | null;
		uBottomRight: WebGLUniformLocation | null;
		uBottomLeft: 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. Reduce the number of simultaneously active WebGL-backend effects.
2. Ensure headless Chrome (for Remotion CLI/Lambda) has GPU acceleration or full SwiftShader.
3. Check gl.isContextLost() and handle webglcontextlost.
4. Use a rendering environment with adequate GPU resources.

// Check context health before applying corner pin
const gl = target.getContext('webgl2');
if (!gl || gl.isContextLost()) {
  // skip or fall back
}

try {
  cornerPin({...})(source, target);
} catch (e) {
  if (e instanceof Error && e.message === 'Failed to create WebGL shader') {
    // GPU resource issue — reduce active WebGL effects or use a better environment
  }
  throw e;
}

When it happens

Trigger: setupCornerPin runs, the WebGL2 context is obtained from the target canvas, but gl.createShader(gl.VERTEX_SHADER) or gl.createShader(gl.FRAGMENT_SHADER) returns null during createProgram.

Common situations: GPU resource exhaustion from many simultaneous WebGL effects; WebGL context lost event; rendering in a constrained headless/CI/VM environment with limited GPU resources; browser tab backgrounded reclaiming GPU objects.

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/955e03a8f9385691. Report an issue: GitHub.