{"record":{"id":"76ff84434c801d33","repo":"remotion-dev/remotion","slug":"skew-shader-compile-failed-log-no-log","errorCode":null,"errorMessage":"Skew shader compile failed: ${log ?? '(no log)'}","messagePattern":"Skew shader compile failed: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/effects/src/skew.ts","lineNumber":172,"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(`Skew shader compile failed: ${log ?? '(no log)'}`);\n\t}\n\n\treturn shader;\n};\n\nconst setupSkew = (target: HTMLCanvasElement): SkewState => {\n\tconst gl = target.getContext('webgl2', {\n\t\tpremultipliedAlpha: true,\n\t\talpha: true,\n\t\tpreserveDrawingBuffer: true,\n\t});\n\tif (!gl) {\n\t\tthrow createWebGL2ContextError('skew effect');\n\t}\n\n\tgl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);\n\tconst vertexShader = compileShader(gl, gl.VERTEX_SHADER, SKEW_VS);\n\tconst fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, SKEW_FS);","sourceCodeStart":154,"sourceCodeEnd":190,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/skew.ts#L154-L190","documentation":"After gl.createShader() succeeded, the skew() effect's GLSL ES 3.00 shader failed to compile and gl.getShaderParameter(shader, gl.COMPILE_STATUS) returned false. The library deletes the bad shader and throws, embedding the driver's info log. Because the shaders are hardcoded library-internal strings (SKEW_VS/SKEW_FS), a compile failure almost always indicates a non-conformant WebGL2 implementation rather than a caller mistake.","triggerScenarios":"Running skew() against a WebGL2 context whose driver does not truly support GLSL ES 3.00 (#version 300 es), or that rejects the precision/in/out qualifiers used by the shader. The driver's info log (appended to the message) names the offending line/feature.","commonSituations":"Software rasterizers (SwiftShader, llvmpipe) with incomplete GLSL ES 3.00 support; outdated or blacklisted GPU drivers; virtualized remoting/headless environments stripping WebGL2 capabilities; a Remotion upgrade that introduced a GLSL construct an old driver cannot parse.","solutions":["Force the ANGLE backend (--gl=angle / chromiumOptions.gl='angle' / Studio OpenGL=angle), which provides a conformant GLSL ES 3.00 compiler via D3D/Vulkan translation.","Read the info log embedded in the error message to confirm it is a compiler/feature gap, then upgrade or replace the GPU driver.","Run the render on a host with a real, supported GPU or a known-good ANGLE build.","If unavoidable, replace the skew effect with a CSS transform-based skew for that composition as a temporary workaround."],"exampleFix":"// before\nnpx remotion render main MyComp out.mp4\n// error: Skew shader compile failed: ERROR: ... GLSL ES 3.00 ...\n\n// after\nnpx remotion render main MyComp out.mp4 --gl=angle","handlingStrategy":"try-catch","validationCode":"// Skew shaders are library-internal, so no caller-side source validation helps.\n// The only useful pre-check is WebGL2 + GLSL ES 3.00 capability:\nfunction supportsGLSL300(): boolean {\n  const c = document.createElement('canvas');\n  const gl = c.getContext('webgl2');\n  if (!gl) return false;\n  const s = gl.createShader(gl.VERTEX_SHADER);\n  if (!s) return false;\n  gl.shaderSource(s, '#version 300 es\\nvoid main(){}');\n  gl.compileShader(s);\n  return gl.getShaderParameter(s, gl.COMPILE_STATUS) === true;\n}","typeGuard":null,"tryCatchPattern":"try {\n  await renderMedia({ composition, codec: 'h264', chromiumOptions: { gl: 'angle' } });\n} catch (err) {\n  if (err instanceof Error && /Skew shader compile failed/.test(err.message)) {\n    console.error('skew() GLSL compile failed — driver lacks GLSL ES 3.00 support:', err.message);\n    // fall back to a CSS-transform skew, or switch the GL backend and retry\n    throw err;\n  }\n  throw err;\n}","preventionTips":["Prefer the ANGLE backend everywhere; it ships a conformant GLSL ES 3.00 compiler.","Keep GPU drivers current on render hosts.","Do not trust headless 'webgl2' availability without verifying GLSL ES 3.00 actually compiles.","Capture the driver info log from the error text when reporting the issue."],"tags":["webgl","gpu","glsl","shader","effects","skew","driver"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}