fix(playground): report GLSL compiler errors (#72)

devallibus · web-flow · commit c2a6042f4dd7 · 2026-03-10T19:55:26.000+01:00
* fix(playground): report GLSL compiler errors

* test(playground): cover GLSL link fallback
diff --git a/apps/web/src/components/playground/PlaygroundCanvas.tsx b/apps/web/src/components/playground/PlaygroundCanvas.tsx
@@ -1,5 +1,6 @@
 import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
 import { buildTslPreviewModule } from '../../../../../packages/schema/src/tsl-preview-module.ts'
+import { collectShaderDiagnostics, diagnosticsToMessages } from '../../lib/webgl-shader-errors'
 import TslPreviewCanvas from '../TslPreviewCanvas'
 
 type THREE = typeof import('three')
@@ -186,32 +187,40 @@ export default function PlaygroundCanvas(props: PlaygroundCanvasProps) {
     mesh = new THREE.Mesh(geometry, material)
     scene.add(mesh)
 
-    // Test compile
-    renderer.render(scene, camera)
-    const gl = renderer.getContext()
-    const glProgram = gl.getParameter(gl.CURRENT_PROGRAM)
-
-    if (glProgram) {
-      // Check vertex shader
-      const vertShader = gl.getAttachedShaders(glProgram)
-      const errors: string[] = []
-      if (vertShader) {
-        for (const s of vertShader) {
-          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
-            const log = gl.getShaderInfoLog(s)
-            if (log) errors.push(log)
-          }
-        }
-      }
-      if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
-        const log = gl.getProgramInfoLog(glProgram)
-        if (log) errors.push(log)
-      }
+    const shaderDiagnostics: ReturnType<typeof collectShaderDiagnostics> = []
+    const previousShaderError = renderer.debug.onShaderError
+
+    renderer.debug.onShaderError = (gl, program, glVertexShader, glFragmentShader) => {
+      shaderDiagnostics.splice(
+        0,
+        shaderDiagnostics.length,
+        ...collectShaderDiagnostics({
+          gl,
+          program,
+          vertexShader: glVertexShader,
+          fragmentShader: glFragmentShader,
+        }),
+      )
+    }
 
-      if (errors.length > 0) {
-        props.onError(errors)
-        return
-      }
+    try {
+      renderer.render(scene, camera)
+    } catch (renderError) {
+      const fallbackMessage = renderError instanceof Error
+        ? renderError.message
+        : 'Shader compilation failed'
+
+      props.onError(
+        shaderDiagnostics.length > 0 ? diagnosticsToMessages(shaderDiagnostics) : [fallbackMessage],
+      )
+      return
+    } finally {
+      renderer.debug.onShaderError = previousShaderError
+    }
+
+    if (shaderDiagnostics.length > 0) {
+      props.onError(diagnosticsToMessages(shaderDiagnostics))
+      return
     }
 
     // No errors — clear any previous errors and capture screenshot
diff --git a/apps/web/src/lib/webgl-shader-errors.test.ts b/apps/web/src/lib/webgl-shader-errors.test.ts
@@ -0,0 +1,77 @@
+import assert from 'node:assert/strict'
+import { collectShaderDiagnostics, diagnosticsToMessages } from './webgl-shader-errors.ts'
+
+function runTest(name: string, callback: () => void) {
+  callback()
+  console.log(`ok ${name}`)
+}
+
+type MockShader = {
+  ok: boolean
+  log: string | null
+}
+
+type MockProgram = {
+  log: string | null
+}
+
+const mockGl = {
+  COMPILE_STATUS: 1,
+  getProgramInfoLog(program: unknown) {
+    return (program as MockProgram).log
+  },
+  getShaderInfoLog(shader: unknown) {
+    return (shader as MockShader).log
+  },
+  getShaderParameter(shader: unknown) {
+    return (shader as MockShader).ok
+  },
+}
+
+runTest('collectShaderDiagnostics returns shader and link logs', () => {
+  const diagnostics = collectShaderDiagnostics({
+    gl: mockGl,
+    program: { log: 'Program Info Log: link failed' },
+    vertexShader: { ok: false, log: 'VERTEX ERROR: undeclared identifier' },
+    fragmentShader: { ok: false, log: 'FRAGMENT ERROR: syntax error' },
+  })
+
+  assert.deepEqual(diagnostics, [
+    { kind: 'glsl-compile', message: 'VERTEX ERROR: undeclared identifier' },
+    { kind: 'glsl-compile', message: 'FRAGMENT ERROR: syntax error' },
+    { kind: 'glsl-link', message: 'Program Info Log: link failed' },
+  ])
+  assert.deepEqual(diagnosticsToMessages(diagnostics), [
+    'VERTEX ERROR: undeclared identifier',
+    'FRAGMENT ERROR: syntax error',
+    'Program Info Log: link failed',
+  ])
+})
+
+runTest('collectShaderDiagnostics falls back to a generic compile message', () => {
+  const diagnostics = collectShaderDiagnostics({
+    gl: mockGl,
+    program: { log: null },
+    vertexShader: { ok: false, log: null },
+    fragmentShader: { ok: true, log: null },
+  })
+
+  assert.deepEqual(diagnostics, [
+    { kind: 'glsl-compile', message: 'GLSL shader compilation failed.' },
+  ])
+})
+
+runTest('collectShaderDiagnostics falls back to a generic link message', () => {
+  const diagnostics = collectShaderDiagnostics({
+    gl: mockGl,
+    program: { log: null },
+    vertexShader: { ok: true, log: null },
+    fragmentShader: { ok: true, log: null },
+  })
+
+  assert.deepEqual(diagnostics, [
+    { kind: 'glsl-link', message: 'GLSL program linking failed.' },
+  ])
+})
+
+console.log('webgl-shader-errors tests passed')
diff --git a/apps/web/src/lib/webgl-shader-errors.ts b/apps/web/src/lib/webgl-shader-errors.ts
@@ -0,0 +1,66 @@
+export type ShaderDiagnostic = {
+  kind: 'glsl-compile' | 'glsl-link'
+  message: string
+}
+
+type ShaderLogContext = {
+  gl: {
+    COMPILE_STATUS: number
+    getProgramInfoLog: (program: unknown) => string | null
+    getShaderInfoLog: (shader: unknown) => string | null
+    getShaderParameter: (shader: unknown, pname: number) => boolean
+  }
+  program: unknown
+  vertexShader?: unknown
+  fragmentShader?: unknown
+}
+
+function normalizeLog(log: string | null | undefined): string {
+  return log?.trim() ?? ''
+}
+
+function pushDiagnostic(
+  diagnostics: ShaderDiagnostic[],
+  kind: ShaderDiagnostic['kind'],
+  message: string | null | undefined,
+) {
+  const normalized = normalizeLog(message)
+  if (!normalized) return
+  if (diagnostics.some((entry) => entry.kind === kind && entry.message === normalized)) return
+  diagnostics.push({ kind, message: normalized })
+}
+
+export function collectShaderDiagnostics({
+  gl,
+  program,
+  vertexShader,
+  fragmentShader,
+}: ShaderLogContext): ShaderDiagnostic[] {
+  const diagnostics: ShaderDiagnostic[] = []
+  let compileFailure = false
+
+  for (const shader of [vertexShader, fragmentShader]) {
+    if (!shader) continue
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      compileFailure = true
+      pushDiagnostic(diagnostics, 'glsl-compile', gl.getShaderInfoLog(shader))
+    }
+  }
+
+  pushDiagnostic(diagnostics, 'glsl-link', gl.getProgramInfoLog(program))
+
+  if (diagnostics.length > 0) {
+    return diagnostics
+  }
+
+  if (compileFailure) {
+    return [{ kind: 'glsl-compile', message: 'GLSL shader compilation failed.' }]
+  }
+
+  return [{ kind: 'glsl-link', message: 'GLSL program linking failed.' }]
+}
+
+export function diagnosticsToMessages(diagnostics: ShaderDiagnostic[]): string[] {
+  return diagnostics.map(({ message }) => message)
+}
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "check": "bun run test && bun run typecheck && bun run validate:shaders && bun run build:web",
     "dev:web": "cd apps/web && bun run dev",
     "test": "node --experimental-strip-types packages/schema/src/index.test.ts && bun run test:cli && bun run test:mcp && bun run test:registry && bun run test:web",
-    "test:web": "node --experimental-strip-types apps/web/src/lib/server/shaders.test.ts && node --experimental-strip-types apps/web/src/lib/server/reviews-db.test.node.ts && node --experimental-strip-types apps/web/src/lib/server/playground-db.test.node.ts",
+    "test:web": "node --experimental-strip-types apps/web/src/lib/server/shaders.test.ts && node --experimental-strip-types apps/web/src/lib/server/reviews-db.test.node.ts && node --experimental-strip-types apps/web/src/lib/server/playground-db.test.node.ts && node --experimental-strip-types apps/web/src/lib/webgl-shader-errors.test.ts",
     "test:cli": "node --experimental-strip-types packages/cli/src/registry-types.test.ts && node --experimental-strip-types packages/cli/src/commands/search.test.ts && node --experimental-strip-types packages/cli/src/commands/add.test.ts && node --experimental-strip-types packages/cli/src/lib/resolve-source.test.ts && node --experimental-strip-types packages/cli/src/lib/build-manifest.test.ts && node --experimental-strip-types packages/cli/src/lib/github-pr.test.ts && node --experimental-strip-types packages/cli/src/commands/submit.test.ts",
     "test:mcp": "node --experimental-strip-types packages/mcp/src/handlers.test.ts && node --experimental-strip-types packages/mcp/src/index.test.ts",
     "test:registry": "node --experimental-strip-types scripts/build-registry.test.ts",
