remotion-dev/remotion · error · Error
Failed to create WebGL program
Error message
Failed to create WebGL program
What it means
Thrown by linkProgram() in the chromatic aberration runtime when gl.createProgram() returns null. A null program means the WebGL2 context is lost/destroyed or out of program objects, so the chromatic aberration shaders cannot be linked and setup aborts.
Source
Thrown at packages/effects/src/chromatic-aberration/chromatic-aberration-runtime.ts:49
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 => {
const program = gl.createProgram();
if (!program) {
throw new Error('Failed to create WebGL program');
}
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const log = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
throw new Error(`Program link failed: ${log ?? '(no log)'}`);
}
return program;
};
const createProgram = (
gl: WebGL2RenderingContext,
vertexSource: string,
fragmentSource: string,View on GitHub (pinned to 78fe4bb3fd)
Solutions
- Reduce concurrent chromatic-aberration / WebGL effects.
- Enable GPU acceleration; remove --disable-gpu.
- Recreate the effect after 'webglcontextrestored'.
- Update GPU drivers; confirm WebGL2 program support.
- Use a higher-memory/GPU render instance server-side.
Defensive patterns
Strategy: try-catch
Validate before calling
function probeWebGL2(): boolean {
try {
const c = document.createElement('canvas');
const gl = c.getContext('webgl2');
return !!gl && !gl.isContextLost();
} catch {
return false;
}
}
if (!probeWebGL2()) skipOrFallback(); Try / catch
try {
return <ChromaticAberration {...props} />;
} catch (err) {
if (/Failed to create WebGL program/.test(String(err))) return <FallbackFrame />;
throw err;
} Prevention
- Reduce concurrent chromatic-aberration / WebGL effects to stay within program budgets.
- Enable GPU acceleration; remove --disable-gpu.
- Handle context loss/restore and recreate the effect.
- Use a GPU/higher-memory render instance server-side.
When it happens
Trigger: createProgram() -> linkProgram() calls gl.createProgram() at chromatic-aberration-runtime.ts:47 during setupChromaticAberration(); it returns null and the guard at :48 throws.
Common situations: Lost/destroyed GL context, GPU process crash, many concurrent programs across live compositions, or software rendering under load.
Related errors
- Program link failed: ${log ?? '(no log)'}
- Failed to create WebGL program
- Checkerboard program link failed: ${log ?? '(no log)'}
- Failed to create WebGL shader
- Shader compile failed: ${log ?? '(no log)'}
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/4b3495438b6448e0.
Report an issue: GitHub.