remotion-dev/remotion · error · Error
Vibrance shader link failed: ${log ?? '(no log)'}
Error message
Vibrance shader link failed: ${log ?? '(no log)'} What it means
Thrown by the vibrance effect's internal createProgram during setup when gl.linkProgram reports LINK_STATUS === false. The program info log is appended (or '(no log)' if absent). Vibrance compiles and links its own hardcoded GLSL ES 3.00 vertex+fragment shaders, so a link failure means the GPU driver rejected the linked program rather than user-supplied GLSL.
Source
Thrown at packages/effects/src/vibrance.ts:135
const createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
const program = gl.createProgram();
if (!program) {
throw new Error('Failed to create vibrance shader program');
}
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const log = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
throw new Error(`Vibrance shader link failed: ${log ?? '(no log)'}`);
}
return program;
};
const createTexture = (gl: WebGL2RenderingContext): WebGLTexture => {
const texture = gl.createTexture();
if (!texture) {
throw new Error('Failed to create vibrance texture');
}
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
return texture;View on GitHub (pinned to 78fe4bb3fd)
Solutions
- Reload the page/Studio to reset the WebGL2 context and re-run setup.
- Reduce the number of WebGL-backed effects applied concurrently on screen.
- Update GPU drivers / enable hardware-accelerated WebGL2 in the browser or headless Chrome flags.
- For server rendering, confirm the Chrome build advertises WebGL2 (chrome://gpu) and that software rendering (SwiftShader) is not rejecting the program.
- If reproducible, capture the appended info log and report it against @remotion/effects with the GPU/driver details.
Example fix
// before - effect setup throws on context loss, breaking the composition
import {vibrance} from '@remotion/effects';
export const Comp = () => (
<VideoEffects effects={[vibrance({amount: 1})]} src={src} />
);
// after - tolerate setup failure and fall back to the plain source
import {vibrance} from '@remotion/effects';
const tryEffect = (factory) => {
try {
return factory();
} catch (err) {
console.warn('effect unavailable, falling back', err);
return null;
}
};
export const Comp = () => {
const effect = tryEffect(() => vibrance({amount: 1}));
return (
<VideoEffects effects={effect ? [effect] : []} src={src} />
);
}; Defensive patterns
Strategy: try-catch
Validate before calling
// Vibrance shaders are internal library GLSL; no caller validation can prevent a driver link failure.
// Best pre-check is the host's WebGL2 capability (context loss can still strike later):
const supportsWebGL2 = () => {
try {
const c = document.createElement('canvas');
return !!c.getContext('webgl2');
} catch {
return false;
}
}; Try / catch
let effect = null;
try {
effect = vibrance({amount: 1});
} catch (err) {
console.warn('vibrance unavailable on this GPU/context, skipping', err);
effect = null; // render the plain source instead
} Prevention
- Keep the number of simultaneously-active WebGL2 effects low to avoid context loss.
- Handle the canvas 'webglcontextlost' event and re-create effects on 'webglcontextrestored'.
- Confirm WebGL2 is hardware accelerated (chrome://gpu) before relying on shader-heavy effects.
- Dispose effects when their sequence is offscreen to free GL program objects.
When it happens
Trigger: vibrance() effect setup() runs createProgram, which attaches the compiled internal vertex/fragment shaders and calls gl.linkProgram; the driver returns LINK_STATUS false. This occurs on WebGL context loss mid-setup, a driver that rejects the internal GLSL, or a GPU pushed into a degraded state.
Common situations: Too many simultaneous WebGL2 contexts in Remotion Studio forcing context loss; headless Chrome (e.g. Remotion Lambda) whose SwiftShader/software GL rejects the program; outdated or buggy GPU drivers; virtual machines without hardware GL acceleration.
Related errors
- Vignette shader compile failed: ${log ?? '(no log)'}
- Vignette program link failed: ${log ?? '(no log)'}
- Shader compile failed: ${log ?? '(no log)'}
- Program link failed: ${log ?? '(no log)'}
- Failed to create WebGL shader
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/0be90e63e15bbff8.
Report an issue: GitHub.