{"record":{"id":"c8daf87ee815102c","repo":"remotion-dev/remotion","slug":"linear-gradient-shader-compile-failed-log","errorCode":null,"errorMessage":"Linear gradient shader compile failed: ${log ?? '(no log)'}","messagePattern":"Linear gradient shader compile failed: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/linear-gradient.ts","lineNumber":178,"sourceCode":"}\n`;\n\nconst compileShader = (\n\tgl: WebGL2RenderingContext,\n\ttype: number,\n\tsource: string,\n): WebGLShader => {\n\tconst shader = gl.createShader(type);\n\tif (!shader) {\n\t\tthrow new Error('Failed to create WebGL shader');\n\t}\n\n\tgl.shaderSource(shader, source);\n\tgl.compileShader(shader);\n\tif (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n\t\tconst log = gl.getShaderInfoLog(shader);\n\t\tgl.deleteShader(shader);\n\t\tthrow new Error(\n\t\t\t`Linear gradient shader compile failed: ${log ?? '(no log)'}`,\n\t\t);\n\t}\n\n\treturn shader;\n};\n\nconst createProgram = (gl: WebGL2RenderingContext): WebGLProgram => {\n\tconst vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n\tconst fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n\tconst program = gl.createProgram();\n\tif (!program) {\n\t\tthrow new Error('Failed to create WebGL program');\n\t}\n\n\tgl.attachShader(program, vs);\n\tgl.attachShader(program, fs);\n\tgl.linkProgram(program);","sourceCodeStart":160,"sourceCodeEnd":196,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/linear-gradient.ts#L160-L196","documentation":"Thrown by compileShader() in the linear-gradient effect after gl.compileShader() reports a non-COMPILE_STATUS. The accompanying info log is interpolated so the driver's actual compiler message is surfaced. The vertex/fragment sources are fixed strings shipped with the library, so a compile failure almost always points at the GL driver rather than user input.","triggerScenarios":"The linear-gradient GLSL (`gradientProgress`, `mix(uStartColor, uEndColor, ...)`) is rejected by the GPU driver — typically an incomplete or buggy WebGL2 implementation, a GLSL ES 3.00 parser bug, or a context that silently lost shader support after a GPU process crash.","commonSituations":"Older mobile GPU drivers, virtual-display CI machines with mesa/software rasterizers that lack full GLSL ES 3.00, a Chrome GPU process that crashed mid-session leaving a zombie context, or a remote desktop/VNC session with feature-poor GL.","solutions":["Read the interpolated driver log first — it names the exact GLSL line/feature the driver rejected, which determines the real fix.","Switch the renderer to a software GL backend: `--gl=angle --angle-backend=swiftshader` (local) or the equivalent Remotion config for Lambda.","Restart Chrome / the render worker to discard a corrupted context, then retry.","Update Chrome and GPU drivers; on Linux CI install/upgrade mesa and vulkan packages.","If the log shows an unsupported GLSL feature, report it against @remotion/effects with the driver string — the shipped shader may need a fallback path."],"exampleFix":"// before — driver rejects the fixed GLSL on the host's default GL\n//   npx remotion render MyComp out.mp4\n\n// after — use a GL backend with full GLSL ES 3.00 support\n//   npx remotion render MyComp out.mp4 --gl=angle --angle-backend=swiftshader","handlingStrategy":"retry","validationCode":"// Report whether the host driver can compile GLSL ES 3.00 before relying on a fixed-shader effect.\nfunction canCompileLinearGradientShader(canvas: HTMLCanvasElement): boolean {\n  const gl = canvas.getContext('webgl2');\n  if (!gl) return false;\n  const s = gl.createShader(gl.FRAGMENT_SHADER);\n  if (!s) return false;\n  gl.shaderSource(s, '#version 300 es\\nprecision highp float;\\nout vec4 o;\\nvoid main(){o=vec4(0.0);}');\n  gl.compileShader(s);\n  const ok = Boolean(gl.getShaderParameter(s, gl.COMPILE_STATUS));\n  gl.deleteShader(s);\n  return ok;\n}","typeGuard":null,"tryCatchPattern":"try {\n  renderWithLinearGradient();\n} catch (err) {\n  if (err instanceof Error && err.message.startsWith('Linear gradient shader compile failed')) {\n    // The interpolated driver log is the real clue — log it, switch GL backend, retry.\n    console.error(err.message);\n    await withGlBackend('swiftshader', () => renderWithLinearGradient());\n  } else throw err;\n}","preventionTips":["Prefer a software GL backend (SwiftShader/ANGLE) on CI and serverless for deterministic GLSL support.","Keep Chrome and GPU drivers current on developer machines.","Capture the interpolated info log when this fires — it identifies the unsupported GLSL feature.","Avoid remote-desktop/VNC sessions with thin GL for final renders."],"tags":["webgl","gpu","glsl","shader","rendering","driver"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}