@downdraft/engine 0.1.1 → 0.2.0

package/dist/libraries/postfx/src/post-process-stack.js

@@ -0,0 +1,1641 @@
+// ============================================================================
+// PostProcess Stack — unified chainable WebGPU postprocessing
+//
+// All 21 effects: taa, ssao, ssr, dof, motion-blur, bloom, bloom-soft,
+// tonemap, fxaa, sharpen, grain, sobel, edges, lens-flare, pixelation,
+// gaussian-blur, afterimage, outline, highlight, glow, ascii.
+//
+// HDR section (taa → bloom-soft) uses rgba16float intermediates.
+// tonemap is the HDR→LDR bridge.
+// LDR section (fxaa → ascii) also uses rgba16float intermediates.
+// A final blit copies the result to the canvas-format swapchain view.
+// ============================================================================
+import { createValidatedShaderModule } from "@downdraft/engine";
+import { createLogger } from "@downdraft/engine/util/logger";
+const AFTERIMAGE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, damp: f32, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var prevTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let cur = textureSample(colorTex, samp, input.uv);\n  let prev = textureSample(prevTex, samp, input.uv);\n  return mix(cur, prev, u.damp);\n}\n";
+const ASCII_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, cellSize: f32, useColor: f32, screenW: f32, screenH: f32, _p0: f32, _p1: f32, _p2: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var glyphTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\nconst NUM_GLYPHS = 10.0;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let screen = vec2(u.screenW, u.screenH);\n  let cellPx = u.cellSize;\n  let cellCoord = floor(input.uv * screen / cellPx);\n  let cellCenter = (cellCoord + vec2(0.5)) * cellPx / screen;\n  let color = textureSample(colorTex, samp, cellCenter);\n  let l = lum(color.rgb);\n  let charIdx = clamp(floor(l * (NUM_GLYPHS - 1.0)), 0.0, NUM_GLYPHS - 1.0);\n  let local = fract(input.uv * screen / cellPx);\n  let glyphUV = vec2((charIdx + local.x) / NUM_GLYPHS, local.y);\n  let glyph = textureSample(glyphTex, samp, glyphUV).r;\n  let outColor = mix(vec3(0.0, 1.0, 0.0), color.rgb, u.useColor);\n  return vec4(outColor * glyph, 1.0);\n}\n";
+const BLIT_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, _p6: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  return textureSample(colorTex, samp, input.uv);\n}\n";
+const BLOOM_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, dirX: f32, dirY: f32, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let dir = vec2(u.dirX, u.dirY) * u.texelSize;\n  var sum = textureSample(colorTex, samp, uv).rgb * 0.227027;\n  sum += textureSample(colorTex, samp, uv + dir * 1.0).rgb * 0.1945946;\n  sum += textureSample(colorTex, samp, uv - dir * 1.0).rgb * 0.1945946;\n  sum += textureSample(colorTex, samp, uv + dir * 2.0).rgb * 0.1216216;\n  sum += textureSample(colorTex, samp, uv - dir * 2.0).rgb * 0.1216216;\n  sum += textureSample(colorTex, samp, uv + dir * 3.0).rgb * 0.0675676;\n  sum += textureSample(colorTex, samp, uv - dir * 3.0).rgb * 0.0675676;\n  return vec4(sum, 1.0);\n}\n";
+const BLOOM_BRIGHT_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, threshold: f32, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let c = textureSample(colorTex, samp, input.uv);\n  let l = lum(c.rgb);\n  if (l > u.threshold) { return c; }\n  return vec4(0.0);\n}\n";
+const BLOOM_COMPOSITE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, strength: f32, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var brightTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let c = textureSample(colorTex, samp, input.uv);\n  let b = textureSample(brightTex, samp, input.uv);\n  return vec4(c.rgb + b.rgb * u.strength, c.a);\n}\n";
+const BLOOM_DOWNSAMPLE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Bloom downsample — high-quality 13-tap downsample with optional bright-pass.\n// When u.brightPass > 0.5, applies soft-threshold bright extraction (first level).\n// Otherwise, performs a plain downsample for subsequent MIP levels.\nstruct U {\n  texelSize: vec2<f32>,   // 1/srcW, 1/srcH (source resolution)\n  brightPass: f32,        // 1.0 = extract bright, 0.0 = plain downsample\n  threshold: f32,\n  softThreshold: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\nfn softThreshold(color: vec3<f32>) -> vec3<f32> {\n  let luma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n  let knee = u.threshold * u.softThreshold + 0.00001;\n  let softFactor = clamp(luma - u.threshold + knee, 0.0, 2.0 * knee);\n  let contribution = softFactor * softFactor / (4.0 * knee + 0.00001) + u.threshold - knee;\n  let scale = max(contribution / max(luma, 0.00001), 0.0);\n  return color * scale;\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let ts = u.texelSize;\n\n  // 13-tap downsample filter (from UE4 \"Next Generation Post Processing\" approach).\n  // Samples a 3x3 + cross pattern for anti-aliased downsample.\n  let a = textureSample(colorTex, samp, uv + vec2<f32>(-1.0, -1.0) * ts).rgb;\n  let b = textureSample(colorTex, samp, uv + vec2<f32>( 0.0, -1.0) * ts).rgb;\n  let c = textureSample(colorTex, samp, uv + vec2<f32>( 1.0, -1.0) * ts).rgb;\n  let d = textureSample(colorTex, samp, uv + vec2<f32>(-0.5, -0.5) * ts).rgb;\n  let e = textureSample(colorTex, samp, uv + vec2<f32>( 0.5, -0.5) * ts).rgb;\n  let f = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  0.0) * ts).rgb;\n  let g = textureSample(colorTex, samp, uv).rgb;\n  let h = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  0.0) * ts).rgb;\n  let i = textureSample(colorTex, samp, uv + vec2<f32>(-0.5,  0.5) * ts).rgb;\n  let j = textureSample(colorTex, samp, uv + vec2<f32>( 0.5,  0.5) * ts).rgb;\n  let k = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  1.0) * ts).rgb;\n  let l = textureSample(colorTex, samp, uv + vec2<f32>( 0.0,  1.0) * ts).rgb;\n  let m = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  1.0) * ts).rgb;\n\n  // Weighted group downsample (2 groups of 6+1 for balanced anti-aliasing)\n  let group1 = (a + c + f + h + k + m) * 0.2;\n  let group2 = (b + d + e + g + i + j + l) * 0.18;\n  var color = group1 + group2 + g * 0.15;\n\n  if (u.brightPass > 0.5) {\n    color = softThreshold(color);\n  }\n  return vec4<f32>(color, 1.0);\n}\n";
+const BLOOM_SOFT_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Bloom (soft threshold) — bright pass with soft knee + separable blur.\n// When u.dirX > 1.0, performs the bright-pass extraction step.\n// Otherwise, performs a directional blur pass.\nstruct U {\n  texelSize: vec2<f32>,\n  dirX: f32,\n  dirY: f32,\n  threshold: f32,\n  softThreshold: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let dir = vec2<f32>(u.dirX, u.dirY);\n\n  if (u.dirX > 1.0) {\n    let c = textureSample(colorTex, samp, uv).rgb;\n    let luma = dot(c, vec3<f32>(0.299, 0.587, 0.114));\n    let knee = u.threshold * u.softThreshold + 0.00001;\n    let softFactor = clamp(luma - u.threshold + knee, 0.0, 2.0 * knee);\n    let contribution = softFactor * softFactor / (4.0 * knee + 0.00001) + u.threshold - knee;\n    let scale = max(contribution / max(luma, 0.00001), 0.0);\n    return vec4<f32>(c * scale, 1.0);\n  }\n\n  let weights = array<f32, 5>(0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216);\n  let offsets = array<f32, 5>(0.0, 1.3846154, 3.2307692, 5.176923, 7.1076923);\n  var color = textureSample(colorTex, samp, uv).rgb * weights[0];\n  for (var i = 1u; i < 5u; i = i + 1u) {\n    let offset = dir * offsets[i] * u.texelSize;\n    color += textureSample(colorTex, samp, uv + offset).rgb * weights[i];\n    color += textureSample(colorTex, samp, uv - offset).rgb * weights[i];\n  }\n  return vec4<f32>(color, 1.0);\n}\n";
+const BLOOM_UPSAMPLE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Bloom upsample — 9-tap bilinear-weighted upsample with additive blend + tint.\n// Reads a lower-resolution MIP and adds it to the higher-res target with weight.\n// Used in the upsample cascade: ⅛ → ¼ → ½ → full.\nstruct U {\n  texelSize: vec2<f32>,   // 1/srcW, 1/srcH (source = lower-res MIP)\n  weight: f32,            // blend weight for this MIP level\n  _p0: f32,\n  tintR: f32,\n  tintG: f32,\n  tintB: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;  // lower-res MIP\n@group(0) @binding(1) var baseTex: texture_2d<f32>;   // higher-res target (for additive read)\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let ts = u.texelSize;\n\n  // 9-tap tent filter for smooth upsample\n  let weights = array<f32, 9>(\n    0.0625, 0.125, 0.0625,\n    0.125,  0.25,  0.125,\n    0.0625, 0.125, 0.0625,\n  );\n  let offsets = array<vec2<f32>, 9>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>( 0.0, -1.0), vec2<f32>( 1.0, -1.0),\n    vec2<f32>(-1.0,  0.0), vec2<f32>( 0.0,  0.0), vec2<f32>( 1.0,  0.0),\n    vec2<f32>(-1.0,  1.0), vec2<f32>( 0.0,  1.0), vec2<f32>( 1.0,  1.0),\n  );\n\n  var upsampled = vec3<f32>(0.0);\n  for (var i = 0u; i < 9u; i = i + 1u) {\n    upsampled += textureSample(colorTex, samp, uv + offsets[i] * ts).rgb * weights[i];\n  }\n\n  // Apply tint + weight\n  let tint = vec3<f32>(u.tintR, u.tintG, u.tintB);\n  let bloom = upsampled * tint * u.weight;\n\n  // Additive blend with base (higher-res MIP or original scene)\n  let base = textureSample(baseTex, samp, uv).rgb;\n  return vec4<f32>(base + bloom, 1.0);\n}\n";
+const CHANNEL_MIXER_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Channel mixer — per-channel R/G/B output weights + monochrome toggle.\n// Allows remapping color channels: output.R = wRR*R + wRG*G + wRB*B, etc.\nstruct U {\n  wRR: f32, wRG: f32, wRB: f32,  // red output weights\n  wGR: f32, wGG: f32, wGB: f32,  // green output weights\n  wBR: f32, wBG: f32, wBB: f32,  // blue output weights\n  monochrome: f32,  // 1.0 = output as grayscale\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let c = textureSample(colorTex, samp, uv).rgb;\n\n  var outR = u.wRR * c.r + u.wRG * c.g + u.wRB * c.b;\n  var outG = u.wGR * c.r + u.wGG * c.g + u.wGB * c.b;\n  var outB = u.wBR * c.r + u.wBG * c.g + u.wBB * c.b;\n\n  if (u.monochrome > 0.5) {\n    let luma = outR * 0.299 + outG * 0.587 + outB * 0.114;\n    outR = luma; outG = luma; outB = luma;\n  }\n\n  return vec4<f32>(vec3<f32>(outR, outG, outB), 1.0);\n}\n";
+const CHROMATIC_ABERRATION_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Chromatic aberration — radial RGB channel shift with falloff from center.\n// Simulates lens chromatic aberration by offsetting R and B channels radially.\nstruct U {\n  texelSize: vec2<f32>,\n  intensity: f32,      // overall strength (0–1)\n  start: f32,          // radial falloff start (0–1, normalized distance from center)\n  end: f32,            // radial falloff end (0–1)\n  centerX: f32,        // lens center offset X (0–1, 0.5 = center)\n  centerY: f32,        // lens center offset Y (0–1, 0.5 = center)\n  _p0: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let center = vec2<f32>(u.centerX, u.centerY);\n  let dir = uv - center;\n  let dist = length(dir);\n  // Radial falloff: no aberration near center, full at edges\n  let falloff = smoothstep(u.start, u.end, dist);\n  let strength = u.intensity * falloff;\n  let offset = normalize(dir) * strength;\n\n  // Sample R and B at offset positions, G at center\n  let r = textureSample(colorTex, samp, uv + offset).r;\n  let g = textureSample(colorTex, samp, uv).g;\n  let b = textureSample(colorTex, samp, uv - offset).b;\n\n  return vec4<f32>(r, g, b, 1.0);\n}\n";
+const DITHERING_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Dithering — ordered (Bayer) + blue-noise modes to reduce color banding.\n// Applies a dithering pattern before quantization to break up smooth gradients.\nstruct U {\n  texelSize: vec2<f32>,\n  mode: f32,         // 0 = off, 1 = Bayer 4x4, 2 = blue-noise\n  strength: f32,     // dithering intensity (0–1)\n  levels: f32,       // color quantization levels (0 = no quantization, e.g. 32)\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var noiseTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n// 4x4 Bayer matrix (threshold values 0–15, normalized to 0–1)\nfn bayer4(x: u32, y: u32) -> f32 {\n  let m = array<u32, 16>(\n     0u,  8u,  2u, 10u,\n    12u,  4u, 14u,  6u,\n     3u, 11u,  1u,  9u,\n    15u,  7u, 13u,  5u,\n  );\n  return f32(m[(y % 4u) * 4u + (x % 4u)]) / 16.0;\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  var color = textureSample(colorTex, samp, uv).rgb;\n\n  if (u.mode < 0.5) {\n    return vec4<f32>(color, 1.0);\n  }\n\n  let dims = vec2<f32>(1.0 / u.texelSize.x, 1.0 / u.texelSize.y);\n  let pixelPos = vec2<u32>(u32(i32(uv.x * dims.x)), u32(i32(uv.y * dims.y)));\n\n  var dither: f32;\n  if (u.mode < 1.5) {\n    // Bayer 4x4\n    dither = bayer4(pixelPos.x, pixelPos.y) - 0.5;\n  } else {\n    // Blue noise\n    let noiseUV = uv * dims / 128.0;  // tile noise texture\n    dither = textureSample(noiseTex, samp, noiseUV).r - 0.5;\n  }\n\n  // Apply dithering: add noise before quantization\n  let dithered = color + dither * u.strength * (1.0 / max(u.levels, 1.0));\n\n  if (u.levels > 0.5) {\n    // Quantize to N levels per channel\n    let q = u.levels;\n    let quantized = floor(dithered * q + 0.5) / q;\n    return vec4<f32>(clamp(quantized, vec3<f32>(0.0), vec3<f32>(1.0)), 1.0);\n  }\n\n  return vec4<f32>(clamp(dithered, vec3<f32>(0.0), vec3<f32>(1.0)), 1.0);\n}\n";
+const DOF_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// DOF — depth-of-field with circle-of-confusion + bokeh-shaped disk sampling.\n// Computes CoC from depth, then gathers a rotated disk kernel with shape\n// support (circle / hexagon / octagon) and near/far field separation.\nstruct U {\n  texelSize: vec2<f32>,\n  focusDist: f32,\n  focusRange: f32,\n  maxBlur: f32,\n  bokehShape: f32,   // 0 = circle, 1 = hexagon, 2 = octagon\n  sampleCount: f32,  // kernel sample count (max 48)\n  nearOnly: f32,     // 1.0 = blur only near field, 0.0 = blur both\n  farOnly: f32,      // 1.0 = blur only far field, 0.0 = blur both\n  bladeRotation: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var depthTex: texture_depth_2d;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n// Golden-angle spiral disk sampling — well-distributed kernel points.\n// Returns offset direction (unit) for sample index i of N.\nfn diskSample(i: u32, n: f32) -> vec2<f32> {\n  let goldenAngle = 2.39996323;\n  let r = sqrt((f32(i) + 0.5) / n);\n  let theta = f32(i) * goldenAngle + u.bladeRotation;\n  return vec2<f32>(cos(theta), sin(theta)) * r;\n}\n\n// Shape mask: modifies sample weight based on bokeh shape.\nfn shapeMask(dir: vec2<f32>) -> f32 {\n  if (u.bokehShape < 0.5) {\n    // Circle — no modification\n    return 1.0;\n  } else if (u.bokehShape < 1.5) {\n    // Hexagon — clip to hexagonal aperture\n    let a = atan2(dir.y, dir.x);\n    let hex = abs(cos(a)) * 0.5 + abs(cos(a + 1.0471976)) * 0.5 + abs(cos(a - 1.0471976)) * 0.5;\n    return smoothstep(0.45, 0.5, hex);\n  } else {\n    // Octagon — clip to octagonal aperture\n    let a = atan2(dir.y, dir.x);\n    let oct = abs(cos(a)) * 0.5 + abs(cos(a + 0.7853982)) * 0.5 + abs(cos(a - 0.7853982)) * 0.5;\n    return smoothstep(0.42, 0.5, oct);\n  }\n}\n\nfn computeCoC(depth: f32) -> f32 {\n  // CoC: 0 at focus distance, grows linearly outside focus range, clamped to maxBlur.\n  let diff = depth - u.focusDist;\n  let coc = clamp(abs(diff) / u.focusRange, 0.0, 1.0) * u.maxBlur;\n  // Sign: positive = far field, negative = near field\n  return select(-coc, coc, diff > 0.0);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let depth = textureSample(depthTex, samp, uv);\n  let sharp = textureSample(colorTex, samp, uv);\n  let centerCoC = computeCoC(depth);\n\n  // If CoC is negligible, return the sharp pixel directly\n  if (abs(centerCoC) < 0.01) {\n    return vec4<f32>(sharp.rgb, 1.0);\n  }\n\n  let n = u32(clamp(u.sampleCount, 4.0, 48.0));\n  let nF = f32(n);\n  let cocAbs = abs(centerCoC);\n  let isNear = centerCoC < 0.0;\n\n  // Field filtering\n  if (u.nearOnly > 0.5 && !isNear) {\n    return vec4<f32>(sharp.rgb, 1.0);\n  }\n  if (u.farOnly > 0.5 && isNear) {\n    return vec4<f32>(sharp.rgb, 1.0);\n  }\n\n  var color = vec3<f32>(0.0);\n  var totalWeight = 0.0;\n  let dims = textureDimensions(colorTex);\n\n  for (var i = 0u; i < 48u; i = i + 1u) {\n    if (i >= n) { break; }\n    let dir = diskSample(i, nF);\n    let sampleOff = dir * cocAbs * u.texelSize;\n    let sampleUV = uv + sampleOff;\n\n    // Bounds check + textureLoad for non-uniform flow\n    let coords = vec2<u32>(clamp(\n      vec2<i32>(i32(sampleUV.x * f32(dims.x)), i32(sampleUV.y * f32(dims.y))),\n      vec2<i32>(0, 0),\n      vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n    ));\n    let sampleColor = textureLoad(colorTex, coords, 0).rgb;\n\n    // Sample CoC — use the larger of center and sample CoC for near field\n    // (near field objects should bleed over far field)\n    let dcoords = vec2<u32>(clamp(\n      vec2<i32>(i32(sampleUV.x * f32(dims.x)), i32(sampleUV.y * f32(dims.y))),\n      vec2<i32>(0, 0),\n      vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n    ));\n    let sampleDepth = textureLoad(depthTex, dcoords, 0);\n    let sampleCoC = computeCoC(sampleDepth);\n    let effectiveCoC = select(abs(sampleCoC), max(cocAbs, abs(sampleCoC)), isNear);\n\n    // Weight by shape mask + CoC influence\n    let shapeW = shapeMask(dir);\n    let cocW = smoothstep(0.0, 1.0, effectiveCoC / u.maxBlur);\n    let weight = shapeW * cocW;\n    color += sampleColor * weight;\n    totalWeight += weight;\n  }\n\n  let blurred = color / max(totalWeight, 0.0001);\n  // Blend sharp → blurred based on CoC magnitude\n  let blend = clamp(cocAbs / u.maxBlur, 0.0, 1.0);\n  let result = mix(sharp.rgb, blurred, blend);\n  return vec4<f32>(result, 1.0);\n}\n";
+const EDGES_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Edges — normal + depth edge detection, composited via alpha blend.\nstruct U {\n  texelSize: vec2<f32>,\n  threshold: f32,\n  opacity: f32,\n  _p0: f32,\n  edgeColor: vec3<f32>,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var normalTex: texture_2d<f32>;\n@group(0) @binding(2) var depthTex: texture_depth_2d;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\nfn decodeNormal(rgb: vec3<f32>) -> vec3<f32> {\n  return normalize(rgb * 2.0 - 1.0);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let texel = u.texelSize;\n  let color = textureSample(colorTex, samp, uv).rgb;\n\n  let nCenter = decodeNormal(textureSample(normalTex, samp, uv).rgb);\n  let nRight  = decodeNormal(textureSample(normalTex, samp, uv + vec2<f32>( 1.0, 0.0) * texel).rgb);\n  let nUp     = decodeNormal(textureSample(normalTex, samp, uv + vec2<f32>( 0.0, 1.0) * texel).rgb);\n\n  let dCenter = textureSample(depthTex, samp, uv);\n  let dRight  = textureSample(depthTex, samp, uv + vec2<f32>( 1.0, 0.0) * texel);\n  let dUp     = textureSample(depthTex, samp, uv + vec2<f32>( 0.0, 1.0) * texel);\n\n  let normalEdge = max(1.0 - dot(nCenter, nRight), 1.0 - dot(nCenter, nUp));\n  let depthEdge = max(abs(dCenter - dRight), abs(dCenter - dUp));\n\n  let edge = clamp(max(normalEdge, depthEdge * 100.0) / u.threshold, 0.0, 1.0);\n  let edgeColor = u.edgeColor * edge * u.opacity;\n  let alpha = edge * u.opacity;\n  return vec4<f32>(mix(color, edgeColor, alpha), 1.0);\n}\n";
+const VS = "struct VertexOutput {\n  @builtin(position) clipPos: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32) -> VertexOutput {\n  var p = array<vec2<f32>, 3>(\n    vec2(-1.0, -1.0), vec2(3.0, -1.0), vec2(-1.0, 3.0),\n  );\n  var o: VertexOutput;\n  o.clipPos = vec4(p[vi], 0.0, 1.0);\n  o.uv = vec2(p[vi].x * 0.5 + 0.5, 0.5 - p[vi].y * 0.5);\n  return o;\n}\nfn lum(c: vec3<f32>) -> f32 { return dot(c, vec3(0.299, 0.587, 0.114)); }\n";
+const FXAA_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, _p6: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\nfn FxaaContrast(a: vec4<f32>, b: vec4<f32>) -> f32 {\n  let d = abs(a - b);\n  return max(max(max(d.r, d.g), d.b), d.a);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let posM = input.uv;\n  let rcpFrame = u.texelSize;\n\n  let rgbaM = textureSample(colorTex, samp, posM);\n  let rgbaS = textureSample(colorTex, samp, posM + vec2(0.0, rcpFrame.y));\n  let rgbaE = textureSample(colorTex, samp, posM + vec2(rcpFrame.x, 0.0));\n  let rgbaN = textureSample(colorTex, samp, posM + vec2(0.0, -rcpFrame.y));\n  let rgbaW = textureSample(colorTex, samp, posM + vec2(-rcpFrame.x, 0.0));\n\n  let earlyExit = max(max(max(\n    FxaaContrast(rgbaM, rgbaN),\n    FxaaContrast(rgbaM, rgbaS)),\n    FxaaContrast(rgbaM, rgbaE)),\n    FxaaContrast(rgbaM, rgbaW)) < 0.06;\n  if (earlyExit) { return rgbaM; }\n\n  let contrastN = FxaaContrast(rgbaM, rgbaN);\n  let contrastS = FxaaContrast(rgbaM, rgbaS);\n  let contrastE = FxaaContrast(rgbaM, rgbaE);\n  let contrastW = FxaaContrast(rgbaM, rgbaW);\n\n  var relativeVContrast = (contrastN + contrastS) - (contrastE + contrastW);\n  relativeVContrast = relativeVContrast * 5.0;\n\n  var horzSpan = relativeVContrast > 0.0;\n\n  if (abs(relativeVContrast) < 0.1) {\n    let dirToEdgeX = select(-1.0, 1.0, contrastE > contrastW);\n    let dirToEdgeY = select(-1.0, 1.0, contrastS > contrastN);\n\n    let rgbaAlongH = textureSampleLevel(colorTex, samp, posM + vec2(dirToEdgeX, -dirToEdgeY) * rcpFrame, 0.0);\n    let matchAlongH = FxaaContrast(rgbaM, rgbaAlongH);\n\n    let rgbaAlongV = textureSampleLevel(colorTex, samp, posM + vec2(-dirToEdgeX, dirToEdgeY) * rcpFrame, 0.0);\n    let matchAlongV = FxaaContrast(rgbaM, rgbaAlongV);\n\n    relativeVContrast = (matchAlongV - matchAlongH) * 5.0;\n    if (abs(relativeVContrast) < 0.1) {\n      return mix(rgbaM, (rgbaN + rgbaS + rgbaE + rgbaW) * 0.25, 0.4);\n    }\n    horzSpan = relativeVContrast > 0.0;\n  }\n\n  var rgbaN2 = select(rgbaN, rgbaW, horzSpan);\n  var rgbaS2 = select(rgbaS, rgbaE, horzSpan);\n\n  let pairN = FxaaContrast(rgbaM, rgbaN2) > FxaaContrast(rgbaM, rgbaS2);\n  if (!pairN) { rgbaN2 = rgbaS2; }\n\n  let offNPX = select(0.0, rcpFrame.x, horzSpan);\n  let offNPY = select(rcpFrame.y, 0.0, horzSpan);\n\n  var doneN = false;\n  var doneP = false;\n  var nDist = 0.0;\n  var pDist = 0.0;\n  var posN = posM;\n  var posP = posM;\n\n  for (var i = 0u; i < 5u; i++) {\n    let inc = f32(i + 1u);\n    if (!doneN) {\n      nDist = nDist + inc;\n      posN = posM + vec2(offNPX, offNPY) * nDist;\n      let rgbaEndN = textureSampleLevel(colorTex, samp, posN, 0.0);\n      doneN = FxaaContrast(rgbaEndN, rgbaM) > FxaaContrast(rgbaEndN, rgbaN2);\n    }\n    if (!doneP) {\n      pDist = pDist + inc;\n      posP = posM - vec2(offNPX, offNPY) * pDist;\n      let rgbaEndP = textureSampleLevel(colorTex, samp, posP, 0.0);\n      doneP = FxaaContrast(rgbaEndP, rgbaM) > FxaaContrast(rgbaEndP, rgbaN2);\n    }\n    if (doneN || doneP) { break; }\n  }\n\n  if (!doneN && !doneP) { return rgbaM; }\n\n  let span = nDist + pDist;\n  var dist = min(nDist, pDist) / max(span, 0.001);\n  dist = 1.0 - dist;\n  dist = sqrt(dist);\n\n  let result = mix(rgbaM, rgbaN2, dist * 0.5);\n  return result;\n}\n";
+const GAUSSIAN_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Gaussian blur — two-pass separable convolution.\n// 9-tap kernel with normalized weights (sum = 1.0) — fixes B1.\nstruct U {\n  texelSize: vec2<f32>,\n  dirX: f32,\n  dirY: f32,\n  radius: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let dir = vec2(u.dirX, u.dirY) * u.texelSize * u.radius;\n\n  // Normalized 9-tap Gaussian: center 0.227027 + 2*(0.1945946+0.1216216+0.054054+0.016216) = 1.0\n  var color = textureSample(colorTex, samp, uv) * 0.227027;\n  color += textureSample(colorTex, samp, uv + dir * 1.0) * 0.1945946;\n  color += textureSample(colorTex, samp, uv - dir * 1.0) * 0.1945946;\n  color += textureSample(colorTex, samp, uv + dir * 2.0) * 0.1216216;\n  color += textureSample(colorTex, samp, uv - dir * 2.0) * 0.1216216;\n  color += textureSample(colorTex, samp, uv + dir * 3.0) * 0.054054;\n  color += textureSample(colorTex, samp, uv - dir * 3.0) * 0.054054;\n  color += textureSample(colorTex, samp, uv + dir * 4.0) * 0.016216;\n  color += textureSample(colorTex, samp, uv - dir * 4.0) * 0.016216;\n\n  return color;\n}\n";
+const GLOW_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Glow blur — separable Gaussian blur of the emissive mask.\nstruct U {\n  texelSize: vec2<f32>,\n  dirX: f32,\n  dirY: f32,\n  blurRadius: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var glowTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let weights = array<f32, 5>(0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216);\n  let offsets = array<f32, 5>(0.0, 1.3846154, 3.2307692, 5.176923, 7.1076923);\n  let dir = vec2<f32>(u.dirX, u.dirY) * u.blurRadius * u.texelSize;\n\n  var color = textureSample(glowTex, samp, uv) * weights[0];\n  for (var i = 1u; i < 5u; i = i + 1u) {\n    let offset = dir * offsets[i];\n    color += textureSample(glowTex, samp, uv + offset) * weights[i];\n    color += textureSample(glowTex, samp, uv - offset) * weights[i];\n  }\n  return color;\n}\n";
+const GLOW_COMPOSITE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Glow composite — add blurred glow to color.\nstruct U {\n  intensity: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n  _p6: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var glowBlurTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let color = textureSample(colorTex, samp, input.uv).rgb;\n  let glow = textureSample(glowBlurTex, samp, input.uv).rgb;\n  return vec4<f32>(color + glow * u.intensity, 1.0);\n}\n";
+const GRAIN_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Grain — film grain with optional luminance awareness.\nstruct U {\n  texelSize: vec2<f32>,\n  intensity: f32,\n  size: f32,\n  luminanceAware: f32,\n  time: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\nfn hash21(p: vec2<f32>) -> f32 {\n  let p2 = fract(p * vec2<f32>(443.897, 441.423));\n  let p3 = dot(p2, p2 + 19.19);\n  return fract(p3);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let color = textureSample(colorTex, samp, input.uv).rgb;\n  let grainUV = input.uv * u.size + u.time;\n  let grain = hash21(grainUV) - 0.5;\n  var amount = u.intensity;\n  if (u.luminanceAware > 0.5) {\n    let luma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n    amount *= 1.0 - luma * 0.5;\n  }\n  return vec4<f32>(color + grain * amount, 1.0);\n}\n";
+const HALFTONE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Halftone — dot/hex cell pattern for stylized print look.\n// Renders a halftone screen: cells of variable-size dots, with dot size\n// proportional to luminance. Supports rotation and monochrome/color modes.\nstruct U {\n  texelSize: vec2<f32>,\n  cellSize: f32,     // cell size in pixels (e.g. 8)\n  dotScale: f32,     // dot size multiplier (0–2)\n  angle: f32,        // screen rotation in radians\n  monochrome: f32,   // 1.0 = grayscale dots, 0.0 = CMYK-style color dots\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n// Rotated cell coordinate\nfn cellCoord(uv: vec2<f32>, cellSize: f32, angle: f32) -> vec2<f32> {\n  let centered = uv - vec2<f32>(0.5);\n  let rot = mat2x2<f32>(cos(angle), -sin(angle), sin(angle), cos(angle));\n  let rotated = rot * centered + vec2<f32>(0.5);\n  return fract(rotated * vec2<f32>(1.0 / cellSize) * u.texelSize * 1000.0);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let color = textureSample(colorTex, samp, uv).rgb;\n  let dims = vec2<f32>(1.0 / u.texelSize.x, 1.0 / u.texelSize.y);\n  let pixelPos = uv * dims;\n\n  // Rotated grid coordinate\n  let cosA = cos(u.angle);\n  let sinA = sin(u.angle);\n  let rot = mat2x2<f32>(cosA, -sinA, sinA, cosA);\n  let centered = pixelPos - dims * 0.5;\n  let rotated = rot * centered + dims * 0.5;\n\n  let cell = floor(rotated / u.cellSize);\n  let cellCenter = (cell + vec2<f32>(0.5)) * u.cellSize;\n  let cellUV = (rotated - cell * u.cellSize) / u.cellSize;\n\n  // Sample color at cell center for stable dot color\n  let samplePos = (cellCenter / dims);\n  let cellColor = textureSample(colorTex, samp, clamp(samplePos, vec2<f32>(0.0), vec2<f32>(1.0))).rgb;\n\n  if (u.monochrome > 0.5) {\n    let luma = dot(cellColor, vec3<f32>(0.299, 0.587, 0.114));\n    let dotRadius = luma * u.dotScale * 0.5;\n    let distFromCenter = length(cellUV - 0.5);\n    let dot = 1.0 - smoothstep(dotRadius - 0.05, dotRadius + 0.05, distFromCenter);\n    return vec4<f32>(vec3<f32>(luma * dot), 1.0);\n  } else {\n    // CMYK-style: separate dot per channel with angle offset\n    var result = vec3<f32>(0.0);\n    let channelAngles = array<f32, 3>(0.0, 1.0471976, 2.0943951);  // 0, 60, 120 deg\n    for (var i = 0u; i < 3u; i = i + 1u) {\n      let chAngle = u.angle + channelAngles[i];\n      let chCos = cos(chAngle);\n      let chSin = sin(chAngle);\n      let chRot = mat2x2<f32>(chCos, -chSin, chSin, chCos);\n      let chCentered = pixelPos - dims * 0.5;\n      let chRotated = chRot * chCentered + dims * 0.5;\n      let chCell = floor(chRotated / u.cellSize);\n      let chCellCenter = (chCell + vec2<f32>(0.5)) * u.cellSize;\n      let chCellUV = (chRotated - chCell * u.cellSize) / u.cellSize;\n      let chSamplePos = clamp(chCellCenter / dims, vec2<f32>(0.0), vec2<f32>(1.0));\n      let chColor = textureSample(colorTex, samp, chSamplePos)[i];\n      let dotRadius = chColor * u.dotScale * 0.5;\n      let distFromCenter = length(chCellUV - 0.5);\n      let dot = 1.0 - smoothstep(dotRadius - 0.05, dotRadius + 0.05, distFromCenter);\n      result[i] = chColor * dot;\n    }\n    return vec4<f32>(result, 1.0);\n  }\n}\n";
+const HIGHLIGHT_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Highlight blur — separable Gaussian blur of the mask.\nstruct U {\n  texelSize: vec2<f32>,\n  dirX: f32,\n  dirY: f32,\n  blurRadius: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var maskTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let weights = array<f32, 5>(0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216);\n  let offsets = array<f32, 5>(0.0, 1.3846154, 3.2307692, 5.176923, 7.1076923);\n  let dir = vec2<f32>(u.dirX, u.dirY) * u.blurRadius * u.texelSize;\n\n  var color = textureSample(maskTex, samp, uv) * weights[0];\n  for (var i = 1u; i < 5u; i = i + 1u) {\n    let offset = dir * offsets[i];\n    color += textureSample(maskTex, samp, uv + offset) * weights[i];\n    color += textureSample(maskTex, samp, uv - offset) * weights[i];\n  }\n  return color;\n}\n";
+const HIGHLIGHT_COMPOSITE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Highlight composite — add outer glow + inner fill to color.\nstruct U {\n  intensity: f32,\n  innerOpacity: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var blurTex: texture_2d<f32>;\n@group(0) @binding(2) var maskTex: texture_2d<f32>;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let color = textureSample(colorTex, samp, uv).rgb;\n  let blurred = textureSample(blurTex, samp, uv).rgb;\n  let mask = textureSample(maskTex, samp, uv).rgb;\n\n  let outerGlow = blurred * u.intensity;\n  let inner = mask * u.innerOpacity;\n\n  return vec4<f32>(color + outerGlow + inner, 1.0);\n}\n";
+const LENS_DISTORTION_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Lens distortion — barrel/pincushion distortion with optional chromatic split.\n// Applies radial distortion: positive = barrel (fisheye), negative = pincushion.\nstruct U {\n  texelSize: vec2<f32>,\n  intensity: f32,    // -1.0 (pincushion) to 1.0 (barrel)\n  scale: f32,        // zoom to compensate for distortion (1.0 = no zoom)\n  chromaSplit: f32,  // chromatic aberration on distortion (0–1)\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let center = vec2<f32>(0.5, 0.5);\n  let dir = uv - center;\n  let r2 = dot(dir, dir);\n  // Barrel/pincushion: r' = r * (1 + k * r^2)\n  let distortion = 1.0 + u.intensity * r2;\n  var distortedUV = center + dir * distortion * u.scale;\n\n  // Clamp to valid range\n  distortedUV = clamp(distortedUV, vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 1.0));\n\n  if (u.chromaSplit > 0.001) {\n    let splitDir = normalize(dir + vec2<f32>(0.0001, 0.0001)) * u.chromaSplit * 0.01;\n    let r = textureSample(colorTex, samp, distortedUV + splitDir).r;\n    let g = textureSample(colorTex, samp, distortedUV).g;\n    let b = textureSample(colorTex, samp, distortedUV - splitDir).b;\n    return vec4<f32>(r, g, b, 1.0);\n  }\n\n  let color = textureSample(colorTex, samp, distortedUV).rgb;\n  return vec4<f32>(color, 1.0);\n}\n";
+const LENS_FLARE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Lens flare — ghost chain + halo + anamorphic streak + bright spot.\nstruct U {\n  lightScreenPos: vec2<f32>,\n  intensity: f32,\n  threshold: f32,\n  ghostCount: f32,\n  ghostSpacing: f32,\n  haloWidth: f32,\n  starSamples: f32,\n  _p0: f32,\n  tint: vec3<f32>,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var depthTex: texture_depth_2d;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let center = vec2<f32>(0.5, 0.5);\n  let lightPos = u.lightScreenPos;\n  let dir = lightPos - center;\n  let dist = length(dir);\n  let ndir = dir / max(dist, 0.0001);\n\n  let color = textureSample(colorTex, samp, uv).rgb;\n  var flare = vec3<f32>(0.0);\n\n  let ghostCount = u32(u.ghostCount);\n  for (var i = 0u; i < 16u; i = i + 1u) {\n    if (i >= ghostCount) { break; }\n    let t = (f32(i) + 1.0) * u.ghostSpacing;\n    let ghostPos = lightPos - ndir * dist * t;\n    let ghostDist = length(uv - ghostPos);\n    let falloff = 1.0 / (1.0 + ghostDist * ghostDist * 200.0);\n    let scale = 1.0 - f32(i) / f32(ghostCount);\n    let ghostColor = textureSampleLevel(colorTex, samp, ghostPos, 0.0).rgb;\n    flare += ghostColor * falloff * scale * u.intensity * u.tint;\n  }\n\n  let haloAxis = lightPos - center;\n  let haloDist = length(uv - center - haloAxis * 0.5);\n  let haloRadius = length(haloAxis) * 0.5;\n  let haloRing = abs(haloDist - haloRadius);\n  let haloFalloff = 1.0 / (1.0 + haloRing * haloRing * 100.0 / u.haloWidth);\n  flare += u.tint * haloFalloff * u.intensity * 0.5;\n\n  let toLight = lightPos - uv;\n  let horizDist = abs(toLight.x);\n  let vertDist = abs(toLight.y);\n  let streakFalloff = 1.0 / (1.0 + horizDist * horizDist * 50.0) * (1.0 / (1.0 + vertDist * vertDist * 500.0));\n  flare += u.tint * streakFalloff * u.intensity * 0.3;\n\n  let lightDist = length(uv - lightPos);\n  let lightFalloff = 1.0 / (1.0 + lightDist * lightDist * 300.0);\n  let lightColor = textureSampleLevel(colorTex, samp, lightPos, 0.0).rgb;\n  let luma = dot(lightColor, vec3<f32>(0.299, 0.587, 0.114));\n  if (luma > u.threshold) {\n    flare += lightColor * lightFalloff * u.intensity;\n  }\n\n  return vec4<f32>(color + flare, 1.0);\n}\n";
+const LUT_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// LUT — 3D LUT color grading. Samples a 3D lookup table to apply color grading.\n// Replaces the standalone frame-graph LUT3DPass with an in-chain effect.\n// Uses a dedicated bind group layout with texture_3d (not the shared ccLayout).\nstruct U {\n  enabled: f32,\n  lutSize: f32,\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var lutTex: texture_3d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  var color = textureSample(colorTex, samp, uv).rgb;\n\n  if (u.enabled > 0.5) {\n    let lutSize = u.lutSize;\n    // Map [0,1] color to LUT 3D coordinates with proper boundary handling\n    let lutCoord = color * ((lutSize - 1.0) / lutSize) + 0.5 / lutSize;\n    color = textureSample(lutTex, samp, lutCoord).rgb;\n  }\n  return vec4<f32>(color, 1.0);\n}\n";
+const MOTION_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Motion blur — velocity-based, with depth-aware weighting.\nstruct U {\n  texelSize: vec2<f32>,\n  intensity: f32,\n  maxSamples: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var velocityTex: texture_2d<f32>;\n@group(0) @binding(2) var depthTex: texture_depth_2d;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  // All textureSample calls must be in uniform control flow (before any branching).\n  let velocity = textureSample(velocityTex, samp, uv).xy;\n  let baseColor = textureSample(colorTex, samp, uv);\n  let depth = textureSample(depthTex, samp, uv);\n  let speed = length(velocity);\n\n  if (speed < 0.001) { return baseColor; }\n\n  let maxSamples = u32(u.maxSamples);\n  let maxSamplesF = u.maxSamples;\n  let clampedVelocity = velocity * u.intensity;\n  let dims = textureDimensions(depthTex);\n  let colorDims = textureDimensions(colorTex);\n\n  var color = vec3<f32>(0.0);\n  var totalWeight = 0.0;\n\n  for (var i = 0u; i < 32u; i = i + 1u) {\n    if (i >= maxSamples) { break; }\n    let t = (f32(i) + 0.5) / maxSamplesF - 0.5;\n    let sampleUV = uv + clampedVelocity * t;\n    // Use textureLoad (works in non-uniform control flow) instead of textureSample.\n    let dcoords = vec2<u32>(clamp(vec2<i32>(i32(sampleUV.x * f32(dims.x)), i32(sampleUV.y * f32(dims.y))), vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1)));\n    let sampleDepth = textureLoad(depthTex, dcoords, 0);\n    let weight = select(0.1, 1.0, abs(sampleDepth - depth) < 0.1);\n    let ccoords = vec2<u32>(clamp(vec2<i32>(i32(sampleUV.x * f32(colorDims.x)), i32(sampleUV.y * f32(colorDims.y))), vec2<i32>(0, 0), vec2<i32>(i32(colorDims.x) - 1, i32(colorDims.y) - 1)));\n    color += textureLoad(colorTex, ccoords, 0).rgb * weight;\n    totalWeight += weight;\n  }\n\n  return vec4<f32>(color / max(totalWeight, 1.0), 1.0);\n}\n";
+const OCCLUDER_CHUNK = "// Occluder chunk — prepended to all postfx fragment shaders by makePipeline().\n// Provides the OccluderUniform struct, a group(1) binding, and an isOccluded()\n// test. Each shader's fs_main calls `if (isOccluded(input.uv)) { discard; }`\n// at the top to skip work under opaque UI panels (the pixi-ui overlay composites\n// on top of the game canvas, so the game's output under an opaque panel is\n// never seen by the user).\n//\n// Rects are in UV space (0-1, top-left origin matching fullscreen-vs.wgsl).\n// Up to 8 rects supported; count=0 disables occlusion (isOccluded always false).\nstruct OccluderUniform {\n  count: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  rects: array<vec4<f32>, 8>,  // x, y, w, h in UV space (0-1)\n};\n@group(1) @binding(0) var<uniform> occluders: OccluderUniform;\n\nfn isOccluded(uv: vec2<f32>) -> bool {\n  for (var i = 0u; i < 8u; i = i + 1u) {\n    if (f32(i) >= occluders.count) { break; }\n    let r = occluders.rects[i];\n    if (uv.x >= r.x && uv.x <= r.x + r.z && uv.y >= r.y && uv.y <= r.y + r.w) {\n      return true;\n    }\n  }\n  return false;\n}\n";
+const OUTLINE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Outline — detect mask boundary and draw edge ring outside the mask.\nstruct U {\n  texelSize: vec2<f32>,\n  outlineWidth: f32,\n  opacity: f32,\n  _p0: f32,\n  outlineColor: vec3<f32>,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var maskTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let texel = u.texelSize;\n  let w = u.outlineWidth;\n  let color = textureSample(colorTex, samp, uv).rgb;\n\n  let center = textureSample(maskTex, samp, uv).r;\n\n  // DEBUG: visualize mask — red where selected, normal color where not\n  if (center > 0.5) {\n    return vec4<f32>(1.0, 0.0, 0.0, 1.0);\n  }\n\n  let offsets = array<vec2<f32>, 8>(\n    vec2<f32>(-1.0, -1.0), vec2<f32>( 1.0, -1.0),\n    vec2<f32>(-1.0,  1.0), vec2<f32>( 1.0,  1.0),\n    vec2<f32>(-1.0,  0.0), vec2<f32>( 1.0,  0.0),\n    vec2<f32>( 0.0, -1.0), vec2<f32>( 0.0,  1.0),\n  );\n\n  let dims = textureDimensions(maskTex);\n  var edge = 0.0;\n  for (var i = 0u; i < 8u; i = i + 1u) {\n    let sampleUV = uv + offsets[i] * texel * w;\n    let icoords = vec2<u32>(clamp(vec2<i32>(i32(sampleUV.x * f32(dims.x)), i32(sampleUV.y * f32(dims.y))), vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1)));\n    let s = textureLoad(maskTex, icoords, 0).r;\n    edge = max(edge, abs(center - s));\n  }\n\n  let outline = clamp(edge * (1.0 - center) * u.opacity, 0.0, 1.0);\n  return vec4<f32>(mix(color, u.outlineColor, outline), 1.0);\n}\n";
+const PIXELATION_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Pixelation — blocky low-res look via nearest-neighbor UV quantization\n// + depth edge detection. Samples color and depth at quantized UVs to\n// emulate rendering at reduced resolution without a separate low-res target.\nstruct U {\n  texelSize: vec2<f32>,\n  pixelSize: f32,\n  depthEdgeStrength: f32,\n  screenW: f32,\n  screenH: f32,\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var depthTex: texture_depth_2d;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let screen = vec2(u.screenW, u.screenH);\n  let px = u.pixelSize;\n  let cellCoord = floor(input.uv * screen / px);\n  let cellCenter = (cellCoord + vec2(0.5)) * px / screen;\n\n  let texel = textureSample(colorTex, samp, cellCenter);\n  let depth = textureSample(depthTex, samp, cellCenter);\n\n  let texelStep = px / screen;\n  let depthR = textureSample(depthTex, samp, cellCenter + vec2(texelStep.x, 0.0));\n  let depthL = textureSample(depthTex, samp, cellCenter - vec2(texelStep.x, 0.0));\n  let depthU = textureSample(depthTex, samp, cellCenter + vec2(0.0, texelStep.y));\n  let depthD = textureSample(depthTex, samp, cellCenter - vec2(0.0, texelStep.y));\n\n  var diff = 0.0;\n  diff += clamp(depthR - depth, 0.0, 1.0);\n  diff += clamp(depthL - depth, 0.0, 1.0);\n  diff += clamp(depthU - depth, 0.0, 1.0);\n  diff += clamp(depthD - depth, 0.0, 1.0);\n\n  let dei = floor(smoothstep(0.01, 0.02, diff) * 2.0) / 2.0;\n  let strength = select(1.0, 1.0 - dei * u.depthEdgeStrength, dei > 0.0);\n\n  return vec4(texel.rgb * strength, texel.a);\n}\n";
+const SHARPEN_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Sharpen — unsharp mask (center + (center - blurred) * sharpness).\nstruct U {\n  texelSize: vec2<f32>,\n  sharpness: f32,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let texel = u.texelSize;\n  let center = textureSample(colorTex, samp, uv).rgb;\n  let up    = textureSample(colorTex, samp, uv + vec2<f32>(0.0, -1.0) * texel).rgb;\n  let down  = textureSample(colorTex, samp, uv + vec2<f32>(0.0,  1.0) * texel).rgb;\n  let left  = textureSample(colorTex, samp, uv + vec2<f32>(-1.0, 0.0) * texel).rgb;\n  let right = textureSample(colorTex, samp, uv + vec2<f32>( 1.0, 0.0) * texel).rgb;\n  let blurred = (up + down + left + right) * 0.25;\n  let result = center + (center - blurred) * u.sharpness;\n  return vec4<f32>(result, 1.0);\n}\n";
+const SOBEL_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\nstruct U { texelSize: vec2<f32>, _p0: f32, _p1: f32, _p2: f32, _p3: f32, _p4: f32, _p5: f32, _p6: f32, };\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv; let t = u.texelSize;\n  let tl = lum(textureSample(colorTex, samp, uv + vec2(-t.x, -t.y)).rgb);\n  let tm = lum(textureSample(colorTex, samp, uv + vec2(0.0, -t.y)).rgb);\n  let tr = lum(textureSample(colorTex, samp, uv + vec2( t.x, -t.y)).rgb);\n  let ml = lum(textureSample(colorTex, samp, uv + vec2(-t.x, 0.0)).rgb);\n  let mr = lum(textureSample(colorTex, samp, uv + vec2( t.x, 0.0)).rgb);\n  let bl = lum(textureSample(colorTex, samp, uv + vec2(-t.x,  t.y)).rgb);\n  let bm = lum(textureSample(colorTex, samp, uv + vec2(0.0,  t.y)).rgb);\n  let br = lum(textureSample(colorTex, samp, uv + vec2( t.x,  t.y)).rgb);\n  let gx = -tl + tr - 2.0 * ml + 2.0 * mr - bl + br;\n  let gy = -tl - 2.0 * tm - tr + bl + 2.0 * bm + br;\n  let g = sqrt(gx * gx + gy * gy);\n  let edge = clamp(g, 0.0, 1.0);\n  let c = textureSample(colorTex, samp, uv);\n  return vec4(c.rgb * (1.0 - edge) + vec3(edge) * 0.5, c.a);\n}\n";
+const SPLIT_TONE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Split-tone — separate highlight and shadow tinting with balance control.\n// Applies different color tints to shadows and highlights, blended by luminance.\nstruct U {\n  shadowR: f32, shadowG: f32, shadowB: f32,   // shadow tint color\n  highlightR: f32, highlightG: f32, highlightB: f32,  // highlight tint color\n  balance: f32,     // -1.0 = more shadows, 1.0 = more highlights, 0 = even\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  var color = textureSample(colorTex, samp, uv).rgb;\n\n  let luma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n  // Weight: 0 at shadows, 1 at highlights, shifted by balance\n  let weight = smoothstep(0.0, 1.0, luma + u.balance * 0.5);\n\n  let shadowTint = vec3<f32>(u.shadowR, u.shadowG, u.shadowB);\n  let highlightTint = vec3<f32>(u.highlightR, u.highlightG, u.highlightB);\n\n  // Blend: shadows get shadow tint, highlights get highlight tint\n  let tint = mix(shadowTint, highlightTint, weight);\n  // Additive tint with luminance preservation\n  color = color * (vec3<f32>(1.0) + tint * 0.5);\n\n  return vec4<f32>(color, 1.0);\n}\n";
+const SSAO_BLUR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// SSAO blur — depth-aware bilateral blur.\nstruct U {\n  texelSize: vec2<f32>,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n};\n@group(0) @binding(0) var ssaoTex: texture_2d<f32>;\n@group(0) @binding(1) var depthTex: texture_depth_2d;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let centerDepth = textureSample(depthTex, samp, uv);\n  var sum = 0.0;\n  var weightSum = 0.0;\n\n  for (var y = -2; y <= 2; y = y + 1) {\n    for (var x = -2; x <= 2; x = x + 1) {\n      let offset = vec2<f32>(f32(x), f32(y)) * u.texelSize;\n      let sampleDepth = textureSample(depthTex, samp, uv + offset);\n      let weight = select(0.0, 1.0, abs(sampleDepth - centerDepth) < 0.1);\n      sum += textureSample(ssaoTex, samp, uv + offset).r * weight;\n      weightSum += weight;\n    }\n  }\n\n  let result = sum / max(weightSum, 1.0);\n  return vec4<f32>(result, result, result, 1.0);\n}\n";
+const SSAO_COMPOSITE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// SSAO composite — multiply color by AO factor.\nstruct U {\n  texelSize: vec2<f32>,\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n  _p6: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var aoTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let color = textureSample(colorTex, samp, input.uv);\n  let ao = textureSample(aoTex, samp, input.uv).r;\n  return vec4<f32>(color.rgb * ao, color.a);\n}\n";
+const SSAO_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// SSAO — Ground-Truth Ambient Occlusion (GTAO).\n// Slice-based horizon scanning with cosine-weighted falloff.\n// Replaces the basic hemisphere approach with a more accurate GTAO that\n// computes per-slice horizons by ray-marching in the view-space slice plane.\nstruct U {\n  invProjection: mat4x4<f32>,\n  view: mat4x4<f32>,\n  projection: mat4x4<f32>,\n  directions: f32,   // number of slice directions (default 4)\n  radius: f32,\n  bias: f32,\n  noiseScale: vec2<f32>,\n  screenSize: vec2<f32>,\n  power: f32,        // AO contrast power (default 1.5)\n  thickness: f32,    // depth thickness for horizon test (default 0.1)\n  slices: f32,       // samples per slice direction (default 8)\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var depthTex: texture_depth_2d;\n@group(0) @binding(1) var normalTex: texture_2d<f32>;\n@group(0) @binding(2) var noiseTex: texture_2d<f32>;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\nfn reconstructViewPos(uv: vec2<f32>, depth: f32) -> vec3<f32> {\n  let ndc = vec3<f32>(uv * 2.0 - 1.0, depth);\n  let clip = vec4<f32>(ndc, 1.0);\n  let viewPos = u.invProjection * clip;\n  return viewPos.xyz / viewPos.w;\n}\n\nfn projectToScreen(viewPos: vec3<f32>) -> vec3<f32> {\n  let clip = u.projection * vec4<f32>(viewPos, 1.0);\n  let ndc = clip.xyz / clip.w;\n  return vec3<f32>(ndc.xy * 0.5 + 0.5, ndc.z);\n}\n\n// Falloff function: 1 near, 0 at radius\nfn falloff(dist: f32) -> f32 {\n  return max(0.0, 1.0 - dist / u.radius);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  // All textureSample calls in uniform control flow\n  let depth = textureSample(depthTex, samp, uv);\n  let worldNormal = textureSample(normalTex, samp, uv).xyz * 2.0 - 1.0;\n  let noiseVal = textureSample(noiseTex, samp, uv * u.noiseScale).xy;\n\n  if (depth >= 1.0) { return vec4<f32>(1.0, 1.0, 1.0, 1.0); }\n\n  let viewPos = reconstructViewPos(uv, depth);\n  let N = normalize((u.view * vec4<f32>(worldNormal, 0.0)).xyz);\n  let V = normalize(-viewPos);\n\n  let rotAngle = noiseVal.x * 6.2831853;\n  let numDirs = u32(clamp(u.directions, 1.0, 8.0));\n  let numSamples = u32(clamp(u.slices, 2.0, 16.0));\n  let dims = textureDimensions(depthTex);\n\n  var occlusion = 0.0;\n\n  for (var d = 0u; d < 8u; d = d + 1u) {\n    if (d >= numDirs) { break; }\n    // Slice direction in screen space, rotated by noise\n    let sliceAngle = rotAngle + f32(d) * 6.2831853 / f32(numDirs);\n    let sliceDir = vec2<f32>(cos(sliceAngle), sin(sliceAngle));\n\n    // Project slice direction to view space\n    // The slice plane contains V and the slice direction projected to view space\n    let sliceNormalVS = normalize(vec3<f32>(sliceDir, 0.0));\n\n    // Horizon search in both directions along the slice\n    var horizon1 = -1.0;  // max angle in +dir\n    var horizon2 = 1.0;   // min angle in -dir\n\n    for (var s = 1u; s < 16u; s = s + 1u) {\n      if (s >= numSamples) { break; }\n      let t = f32(s) / f32(numSamples);\n      let radius = t * u.radius;\n\n      // +direction sample\n      let samplePos1 = viewPos + vec3<f32>(sliceDir, 0.0) * radius;\n      let screen1 = projectToScreen(samplePos1);\n      if (screen1.x >= 0.0 && screen1.x <= 1.0 && screen1.y >= 0.0 && screen1.y <= 1.0) {\n        let icoords1 = vec2<u32>(clamp(\n          vec2<i32>(i32(screen1.x * f32(dims.x)), i32(screen1.y * f32(dims.y))),\n          vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n        ));\n        let sampleDepth1 = textureLoad(depthTex, icoords1, 0);\n        let sampleViewPos1 = reconstructViewPos(screen1.xy, sampleDepth1);\n        let depthDiff1 = samplePos1.z - sampleViewPos1.z;\n        if (depthDiff1 > u.bias && depthDiff1 < u.thickness * radius) {\n          let omega = atan2(sampleViewPos1.z - viewPos.z, length(sampleViewPos1.xy - viewPos.xy));\n          horizon1 = max(horizon1, omega);\n        }\n      }\n\n      // -direction sample\n      let samplePos2 = viewPos - vec3<f32>(sliceDir, 0.0) * radius;\n      let screen2 = projectToScreen(samplePos2);\n      if (screen2.x >= 0.0 && screen2.x <= 1.0 && screen2.y >= 0.0 && screen2.y <= 1.0) {\n        let icoords2 = vec2<u32>(clamp(\n          vec2<i32>(i32(screen2.x * f32(dims.x)), i32(screen2.y * f32(dims.y))),\n          vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n        ));\n        let sampleDepth2 = textureLoad(depthTex, icoords2, 0);\n        let sampleViewPos2 = reconstructViewPos(screen2.xy, sampleDepth2);\n        let depthDiff2 = samplePos2.z - sampleViewPos2.z;\n        if (depthDiff2 > u.bias && depthDiff2 < u.thickness * radius) {\n          let omega = atan2(sampleViewPos2.z - viewPos.z, length(sampleViewPos2.xy - viewPos.xy));\n          horizon2 = min(horizon2, omega);\n        }\n      }\n    }\n\n    // Compute the angle between the normal and the slice plane\n    // Project normal onto the slice plane\n    let sliceNormal3D = normalize(vec3<f32>(sliceDir, 0.0));\n    let Nproj = normalize(N - dot(N, sliceNormal3D) * sliceNormal3D);\n    let Nangle = atan2(Nproj.z, length(Nproj.xy));\n\n    // Clamp horizons to the normal hemisphere\n    let h1 = max(horizon1, Nangle);\n    let h2 = min(horizon2, Nangle);\n\n    // AO contribution from this slice: integral of cos(theta - Nangle) from h2 to h1\n    let ao1 = cos(2.0 * h1 - Nangle) - cos(2.0 * Nangle - Nangle);\n    let ao2 = cos(2.0 * Nangle - Nangle) - cos(2.0 * h2 - Nangle);\n    let sliceAO = clamp((ao1 + ao2) * 0.5, 0.0, 1.0);\n\n    // Weight by the slice's alignment with the normal\n    let sliceWeight = abs(dot(Nproj, N));\n    occlusion += sliceAO * sliceWeight;\n  }\n\n  occlusion = occlusion / f32(numDirs);\n  // Apply power for contrast control\n  let ao = 1.0 - pow(clamp(occlusion, 0.0, 1.0), u.power);\n  let result = clamp(ao, 0.0, 1.0);\n  return vec4<f32>(result, result, result, 1.0);\n}\n";
+const SSR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// SSR — screen-space reflections with DDA ray marching + binary refinement.\n// Upgraded from linear march to pixel-perfect DDA stepping with sub-pixel\n// binary search refinement for accurate hit detection. Includes thickness\n// testing, edge fade, and distance fade.\nstruct U {\n  invProjection: mat4x4<f32>,\n  view: mat4x4<f32>,\n  projection: mat4x4<f32>,\n  maxSteps: f32,\n  thickness: f32,\n  maxDistance: f32,\n  fadeStart: f32,\n  fadeEnd: f32,\n  binarySteps: f32,  // number of binary refinement steps (default 10)\n  stride: f32,       // ray march stride multiplier (default 1.0)\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var normalTex: texture_2d<f32>;\n@group(0) @binding(2) var depthTex: texture_depth_2d;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\nfn reconstructViewPos(uv: vec2<f32>, depth: f32) -> vec3<f32> {\n  let ndc = vec3<f32>(uv * 2.0 - 1.0, depth);\n  let clip = vec4<f32>(ndc, 1.0);\n  let viewPos = u.invProjection * clip;\n  return viewPos.xyz / viewPos.w;\n}\n\nfn projectToScreen(viewPos: vec3<f32>) -> vec3<f32> {\n  let clip = u.projection * vec4<f32>(viewPos, 1.0);\n  let ndc = clip.xyz / clip.w;\n  return vec3<f32>(ndc.xy * 0.5 + 0.5, ndc.z);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  // All textureSample calls in uniform control flow\n  let depth = textureSample(depthTex, samp, uv);\n  let baseColor = textureSample(colorTex, samp, uv);\n  let worldNormal = textureSample(normalTex, samp, uv).xyz * 2.0 - 1.0;\n\n  if (depth >= 1.0) { return baseColor; }\n\n  let viewPos = reconstructViewPos(uv, depth);\n  let N = normalize((u.view * vec4<f32>(worldNormal, 0.0)).xyz);\n  let V = normalize(-viewPos);\n  let reflectDir = reflect(-V, N);\n\n  // Skip reflections pointing toward the camera\n  if (reflectDir.z >= 0.0) { return baseColor; }\n\n  // Project start and end points to screen space\n  let startPos = viewPos;\n  let endPos = viewPos + reflectDir * u.maxDistance;\n  let startScreen = projectToScreen(startPos);\n  let endScreen = projectToScreen(endPos);\n\n  // DDA setup: march from startScreen to endScreen in pixel space\n  let dims = textureDimensions(depthTex);\n  let colorDims = textureDimensions(colorTex);\n  let pixelStart = vec2<f32>(startScreen.x * f32(dims.x), startScreen.y * f32(dims.y));\n  let pixelEnd = vec2<f32>(endScreen.x * f32(dims.x), endScreen.y * f32(dims.y));\n  let pixelDir = pixelEnd - pixelStart;\n  let pixelLen = length(pixelDir);\n  let pixelStep = normalize(pixelDir) * u.stride;\n\n  let maxSteps = u32(clamp(u.maxSteps, 1.0, 128.0));\n  let binarySteps = u32(clamp(u.binarySteps, 1.0, 16.0));\n\n  var hitColor = vec3<f32>(0.0);\n  var hitAlpha = 0.0;\n  var hit = false;\n\n  // ── DDA ray march ──\n  var currentPixel = pixelStart;\n  var currentViewPos = startPos;\n\n  for (var i = 0u; i < 128u; i = i + 1u) {\n    if (i >= maxSteps) { break; }\n    currentPixel = currentPixel + pixelStep;\n    let sampleUV = currentPixel / vec2<f32>(f32(dims.x), f32(dims.y));\n\n    // Out of bounds — stop\n    if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) { break; }\n\n    // Interpolate view-space position along the ray\n    let t = f32(i + 1u) / f32(maxSteps);\n    currentViewPos = mix(startPos, endPos, t);\n\n    let icoords = vec2<u32>(clamp(\n      vec2<i32>(i32(sampleUV.x * f32(dims.x)), i32(sampleUV.y * f32(dims.y))),\n      vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n    ));\n    let sampleDepth = textureLoad(depthTex, icoords, 0);\n    let sampleViewPos = reconstructViewPos(sampleUV, sampleDepth);\n\n    let depthDiff = currentViewPos.z - sampleViewPos.z;\n    // Hit: ray is behind the surface within thickness threshold\n    if (depthDiff > 0.0 && depthDiff < u.thickness) {\n      hit = true;\n      // ── Binary refinement for sub-pixel accuracy ──\n      var refineStart = currentPixel - pixelStep;\n      var refineEnd = currentPixel;\n      for (var b = 0u; b < 16u; b = b + 1u) {\n        if (b >= binarySteps) { break; }\n        let midPixel = (refineStart + refineEnd) * 0.5;\n        let midUV = midPixel / vec2<f32>(f32(dims.x), f32(dims.y));\n        let midCoords = vec2<u32>(clamp(\n          vec2<i32>(i32(midUV.x * f32(dims.x)), i32(midUV.y * f32(dims.y))),\n          vec2<i32>(0, 0), vec2<i32>(i32(dims.x) - 1, i32(dims.y) - 1),\n        ));\n        let midDepth = textureLoad(depthTex, midCoords, 0);\n        let midViewPos = reconstructViewPos(midUV, midDepth);\n\n        let bt = length(midPixel - pixelStart) / pixelLen;\n        let rayZ = mix(startPos.z, endPos.z, bt);\n        let midDiff = rayZ - midViewPos.z;\n        if (midDiff > 0.0 && midDiff < u.thickness) {\n          refineEnd = midPixel;\n        } else {\n          refineStart = midPixel;\n        }\n      }\n\n      // Sample color at the refined hit position\n      let hitUV = refineEnd / vec2<f32>(f32(dims.x), f32(dims.y));\n      let hitCoords = vec2<u32>(clamp(\n        vec2<i32>(i32(hitUV.x * f32(colorDims.x)), i32(hitUV.y * f32(colorDims.y))),\n        vec2<i32>(0, 0), vec2<i32>(i32(colorDims.x) - 1, i32(colorDims.y) - 1),\n      ));\n      hitColor = textureLoad(colorTex, hitCoords, 0).rgb;\n\n      // Distance fade\n      let dist = length(currentViewPos - viewPos);\n      let fade = 1.0 - smoothstep(u.fadeStart, u.fadeEnd, dist);\n      // Edge fade (screen border)\n      let edgeFade = smoothstep(0.0, 0.1, hitUV.x) * smoothstep(0.0, 0.1, 1.0 - hitUV.x) *\n                     smoothstep(0.0, 0.1, hitUV.y) * smoothstep(0.0, 0.1, 1.0 - hitUV.y);\n      hitAlpha = fade * edgeFade;\n      break;\n    }\n  }\n\n  if (!hit) { return baseColor; }\n  return vec4<f32>(mix(baseColor.rgb, hitColor, hitAlpha), baseColor.a);\n}\n";
+const TAA_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// TAA — Temporal Anti-Aliasing with YCoCg neighborhood clamp + jitter + variance.\n// Upgraded with:\n// - Jitter-aware reprojection (sub-pixel jitter offset for better convergence)\n// - Optional variance-based clamping (reduces ghosting vs pure min/max clamp)\n// - Velocity-based history reprojection (unchanged from original)\nstruct U {\n  texelSize: vec2<f32>,\n  blendFactor: f32,\n  varianceClamp: f32,  // 1.0 = enable variance clamping, 0.0 = min/max only\n  jitterX: f32,        // sub-pixel jitter offset X (in texels)\n  jitterY: f32,        // sub-pixel jitter offset Y (in texels)\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var velocityTex: texture_2d<f32>;\n@group(0) @binding(2) var historyTex: texture_2d<f32>;\n@group(0) @binding(3) var samp: sampler;\n@group(0) @binding(4) var<uniform> u: U;\n\nfn rgbToYCoCg(rgb: vec3<f32>) -> vec3<f32> {\n  let co = rgb.r - rgb.b;\n  let tmp = rgb.b + co * 0.5;\n  let cg = rgb.g - tmp;\n  let y = tmp + cg * 0.5;\n  return vec3<f32>(y, co, cg);\n}\nfn yCoCgToRGB(ycocg: vec3<f32>) -> vec3<f32> {\n  let tmp = ycocg.x - ycocg.z * 0.5;\n  let g = ycocg.z + tmp;\n  let b = tmp - ycocg.y * 0.5;\n  let r = ycocg.y + b;\n  return vec3<f32>(r, g, b);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let jitter = vec2<f32>(u.jitterX, u.jitterY) * u.texelSize;\n  // Current color — sample at jittered position (the scene was rendered with jitter)\n  let current = textureSample(colorTex, samp, uv).rgb;\n  let velocity = textureSample(velocityTex, samp, uv).rg;\n  // Reproject: history UV accounts for velocity + jitter offset\n  let historyUV = uv - velocity - jitter;\n  let history = textureSample(historyTex, samp, historyUV).rgb;\n\n  // 3x3 neighborhood for clamping\n  let ts = u.texelSize;\n  let tl = textureSample(colorTex, samp, uv + vec2<f32>(-1.0, -1.0) * ts).rgb;\n  let tr = textureSample(colorTex, samp, uv + vec2<f32>( 1.0, -1.0) * ts).rgb;\n  let bl = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  1.0) * ts).rgb;\n  let br = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  1.0) * ts).rgb;\n  let l = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  0.0) * ts).rgb;\n  let r2 = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  0.0) * ts).rgb;\n  let t = textureSample(colorTex, samp, uv + vec2<f32>( 0.0, -1.0) * ts).rgb;\n  let b2 = textureSample(colorTex, samp, uv + vec2<f32>( 0.0,  1.0) * ts).rgb;\n\n  let ycocgCenter = rgbToYCoCg(current);\n  var minC = ycocgCenter;\n  var maxC = ycocgCenter;\n  var avgC = ycocgCenter;\n  let neighbors = array<vec3<f32>, 8>(tl, tr, bl, br, l, r2, t, b2);\n  for (var i = 0u; i < 8u; i = i + 1u) {\n    let ycocg = rgbToYCoCg(neighbors[i]);\n    minC = min(minC, ycocg);\n    maxC = max(maxC, ycocg);\n    avgC += ycocg;\n  }\n  avgC = avgC / 9.0;\n\n  var clampedHistory: vec3<f32>;\n  if (u.varianceClamp > 0.5) {\n    // Variance-based clamping: tighten the clamp box using standard deviation\n    var variance = vec3<f32>(0.0);\n    for (var i = 0u; i < 8u; i = i + 1u) {\n      let d = rgbToYCoCg(neighbors[i]) - avgC;\n      variance += d * d;\n    }\n    variance = variance / 8.0;\n    let stdDev = sqrt(variance);\n    let tightMin = avgC - stdDev * 1.5;\n    let tightMax = avgC + stdDev * 1.5;\n    // Use the tighter of min/max and variance-based bounds\n    let clampMin = max(minC, tightMin);\n    let clampMax = min(maxC, tightMax);\n    clampedHistory = yCoCgToRGB(clamp(rgbToYCoCg(history), clampMin, clampMax));\n  } else {\n    // Standard min/max neighborhood clamp\n    clampedHistory = yCoCgToRGB(clamp(rgbToYCoCg(history), minC, maxC));\n  }\n\n  let result = mix(clampedHistory, current, u.blendFactor);\n  return vec4<f32>(result, 1.0);\n}\n";
+const TONEMAP_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// ACES tonemap — HDR→LDR bridge with exposure/gamma/contrast/saturation/vignette.\nstruct U {\n  exposure: f32,\n  bloomIntensity: f32,\n  gamma: f32,\n  contrast: f32,\n  saturation: f32,\n  vignette: f32,\n  _p0: f32,\n  _p1: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var bloomTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\nfn acesTonemap(color: vec3<f32>) -> vec3<f32> {\n  let a = 2.51; let b = 0.03; let c = 2.43; let d = 0.59; let e = 0.14;\n  return clamp((color * (a * color + b)) / (color * (c * color + d) + e), vec3<f32>(0.0), vec3<f32>(1.0));\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  var color = textureSample(colorTex, samp, input.uv).rgb;\n  let bloom = textureSample(bloomTex, samp, input.uv).rgb;\n  color += bloom * u.bloomIntensity;\n  color *= u.exposure;\n  color = acesTonemap(color);\n  color = (color - 0.5) * u.contrast + 0.5;\n  let luma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n  color = mix(vec3<f32>(luma), color, u.saturation);\n  let center = input.uv - 0.5;\n  let dist = dot(center, center);\n  color *= 1.0 - dist * u.vignette;\n  color = pow(color, vec3<f32>(1.0 / u.gamma));\n  return vec4<f32>(color, 1.0);\n}\n";
+const WATERCOLOR_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// Watercolor — stylized edge-aware smoothing + paper texture blend.\n// Combines a soft bilateral-like smoothing with edge enhancement and a\n// subtle paper grain overlay for a hand-painted watercolor look.\nstruct U {\n  texelSize: vec2<f32>,\n  edgeStrength: f32,   // edge enhancement intensity (0–2)\n  paperScale: f32,     // paper texture scale (1–10)\n  blend: f32,          // watercolor blend amount (0–1)\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var noiseTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n// Hash for procedural paper texture\nfn hash(p: vec2<f32>) -> f32 {\n  let h = dot(p, vec2<f32>(127.1, 311.7));\n  return fract(sin(h) * 43758.5453);\n}\n\nfn noise2D(p: vec2<f32>) -> f32 {\n  let i = floor(p);\n  let f = fract(p);\n  let a = hash(i);\n  let b = hash(i + vec2<f32>(1.0, 0.0));\n  let c = hash(i + vec2<f32>(0.0, 1.0));\n  let d = hash(i + vec2<f32>(1.0, 1.0));\n  let u = f * f * (3.0 - 2.0 * f);\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  let ts = u.texelSize;\n  let color = textureSample(colorTex, samp, uv).rgb;\n\n  // ── Edge-aware smoothing: 3x3 weighted blur (edge-preserving) ──\n  let tl = textureSample(colorTex, samp, uv + vec2<f32>(-1.0, -1.0) * ts).rgb;\n  let tr = textureSample(colorTex, samp, uv + vec2<f32>( 1.0, -1.0) * ts).rgb;\n  let bl = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  1.0) * ts).rgb;\n  let br = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  1.0) * ts).rgb;\n  let l = textureSample(colorTex, samp, uv + vec2<f32>(-1.0,  0.0) * ts).rgb;\n  let r = textureSample(colorTex, samp, uv + vec2<f32>( 1.0,  0.0) * ts).rgb;\n  let t = textureSample(colorTex, samp, uv + vec2<f32>( 0.0, -1.0) * ts).rgb;\n  let b = textureSample(colorTex, samp, uv + vec2<f32>( 0.0,  1.0) * ts).rgb;\n\n  // Edge weight: closer colors get more weight (bilateral-like)\n  let centerLuma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n  let neighbors = array<vec3<f32>, 8>(tl, tr, bl, br, l, r, t, b);\n  var smoothColor = vec3<f32>(0.0);\n  var totalWeight = 0.0;\n  for (var i = 0u; i < 8u; i = i + 1u) {\n    let nl = dot(neighbors[i], vec3<f32>(0.299, 0.587, 0.114));\n    let w = exp(-abs(centerLuma - nl) * 5.0);\n    smoothColor += neighbors[i] * w;\n    totalWeight += w;\n  }\n  smoothColor = (smoothColor + color * 2.0) / (totalWeight + 2.0);\n\n  // ── Edge enhancement (Sobel) ──\n  let gx = abs(dot(tr + 2.0 * r + br - tl - 2.0 * l - bl, vec3<f32>(0.299, 0.587, 0.114)));\n  let gy = abs(dot(bl + 2.0 * b + br - tl - 2.0 * t - tr, vec3<f32>(0.299, 0.587, 0.114)));\n  let edge = sqrt(gx * gx + gy * gy);\n  let edgeFactor = 1.0 - clamp(edge * u.edgeStrength, 0.0, 1.0);\n\n  // ── Paper texture ──\n  let paperUV = uv * u.paperScale * 50.0;\n  let paper = noise2D(paperUV) * 0.15 + 0.85;\n\n  // ── Combine: smoothed color darkened at edges, multiplied by paper texture ──\n  let watercolor = smoothColor * edgeFactor * paper;\n  let result = mix(color, watercolor, u.blend);\n  return vec4<f32>(result, 1.0);\n}\n";
+const WHITE_BALANCE_FS = "// wgsl-validate: prelude ./fullscreen-vs.wgsl\n// wgsl-validate: prelude ./occluder-chunk.wgsl\n// White balance — temperature (K) + tint adjustment.\n// Applies a white-balance correction by shifting the color temperature\n// (warm/cool) and tint (green/magenta).\nstruct U {\n  temperature: f32,   // -1.0 (cool) to 1.0 (warm), 0 = neutral\n  tint: f32,          // -1.0 (green) to 1.0 (magenta), 0 = neutral\n  _p0: f32,\n  _p1: f32,\n  _p2: f32,\n  _p3: f32,\n  _p4: f32,\n  _p5: f32,\n};\n@group(0) @binding(0) var colorTex: texture_2d<f32>;\n@group(0) @binding(1) var dummyTex: texture_2d<f32>;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var<uniform> u: U;\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {\n  if (isOccluded(input.uv)) { discard; }\n  let uv = input.uv;\n  var color = textureSample(colorTex, samp, uv).rgb;\n\n  // Temperature: shift warm (R+ B-) or cool (R- B+)\n  let tempR = 1.0 + u.temperature * 0.1;\n  let tempB = 1.0 - u.temperature * 0.1;\n  // Tint: shift green (G+) or magenta (G-)\n  let tintG = 1.0 - u.tint * 0.1;\n\n  color = color * vec3<f32>(tempR, tintG, tempB);\n\n  // Normalize luminance to avoid overall brightness shift\n  let luma = dot(color, vec3<f32>(0.299, 0.587, 0.114));\n  let origLuma = dot(textureSample(colorTex, samp, uv).rgb, vec3<f32>(0.299, 0.587, 0.114));\n  color = color * (origLuma / max(luma, 0.0001));\n\n  return vec4<f32>(color, 1.0);\n}\n";
+const log = createLogger("info");
+const ALL_EFFECTS = [
+    "taa", "ssao", "ssr", "dof", "motion-blur",
+    "bloom", "bloom-soft", "tonemap",
+    "lut", "white-balance", "channel-mixer", "split-tone",
+    "fxaa", "chromatic-aberration", "lens-distortion", "sharpen", "grain",
+    "sobel", "edges", "lens-flare",
+    "pixelation", "gaussian-blur", "afterimage",
+    "halftone", "dithering", "watercolor",
+    "outline", "highlight", "glow", "ascii",
+];
+const CHAIN_ORDER = [
+    // HDR
+    "taa", "ssao", "ssr", "dof", "motion-blur",
+    "bloom", "bloom-soft", "tonemap",
+    // Color grading (LDR, post-tonemap)
+    "lut", "white-balance", "channel-mixer", "split-tone",
+    // Camera/lens (LDR)
+    "fxaa", "chromatic-aberration", "lens-distortion", "sharpen", "grain",
+    // Stylized (LDR, late chain)
+    "sobel", "edges", "lens-flare",
+    "pixelation", "gaussian-blur", "afterimage",
+    "halftone", "dithering", "watercolor",
+    "outline", "highlight", "glow", "ascii",
+];
+const EFFECT_NAMES = {
+    taa: "TAA", ssao: "SSAO", ssr: "SSR", dof: "DOF", "motion-blur": "Motion Blur",
+    bloom: "Bloom", "bloom-soft": "Bloom (Soft)", tonemap: "Tonemap",
+    lut: "LUT (3D)", "white-balance": "White Balance", "channel-mixer": "Channel Mixer",
+    "split-tone": "Split Tone",
+    fxaa: "FXAA", "chromatic-aberration": "Chromatic Aberration",
+    "lens-distortion": "Lens Distortion", sharpen: "Sharpen", grain: "Grain",
+    sobel: "Sobel", edges: "Edges", "lens-flare": "Lens Flare",
+    pixelation: "Pixelation", "gaussian-blur": "Gaussian Blur", afterimage: "Afterimage",
+    halftone: "Halftone", dithering: "Dithering", watercolor: "Watercolor",
+    outline: "Outline", highlight: "Highlight", glow: "Glow", ascii: "ASCII",
+};
+const HDR_FORMAT = "rgba16float";
+// ── PostProcessStack ────────────────────────────────────────────────────────
+export class PostProcessStack {
+    device;
+    format;
+    depthFormat;
+    sceneFormat;
+    // Bind group layouts (5 shared layouts)
+    ccLayout; // float + float + filtering + uniform
+    cdLayout; // float + depth + non-filtering + uniform
+    cvvhLayout; // float + float + float + filtering + uniform
+    cvdLayout; // float + float + depth + non-filtering + uniform
+    dnfnLayout; // depth + float + float + non-filtering + uniform
+    linearSampler;
+    nearestSampler;
+    // Pipelines + uniform buffers (keyed by pipeline name)
+    pipelines = {};
+    uniforms = {};
+    // Occlusion culling — shared bind group (group 1) bound on every pass.
+    // Contains up to 8 opaque UI panel rects in UV space; shaders discard
+    // fragments inside these rects to skip work where the output is invisible.
+    occluderLayout;
+    occluderUniform;
+    occluderBindGroup;
+    occluderRects = [];
+    occluderKey = "";
+    taaHistoryReset = false;
+    // Render targets
+    sceneColor = null;
+    sceneDepth = null;
+    sceneNormals = null;
+    sceneVelocity = null;
+    sceneMask = null;
+    pingPong = [null, null];
+    // Effect-specific targets
+    afterimageTex = null;
+    taaHistory = null;
+    taaHistory2 = null;
+    bloomBright = null;
+    bloomBlurH = null;
+    bloomBlurV = null;
+    bloomMip = []; // multi-MIP pyramid (downsample cascade)
+    bloomTemp = []; // temp targets for upsample (avoid read+write same texture)
+    bloomBase = null; // full-res scene copy for the final composite (avoid read+write same texture)
+    halfResA = null; // shared by bloom-soft
+    halfResB = null;
+    ssaoA = null;
+    ssaoB = null;
+    blurA = null; // shared by gaussian-blur, highlight, glow
+    blurB = null;
+    // Static textures
+    dummyTex;
+    glyphTex = null;
+    noiseTex = null;
+    // Bloom-soft result (stored for tonemap to read)
+    bloomSoftResult = null;
+    // Dimensions
+    texW = 0;
+    texH = 0;
+    // Enabled state
+    enabled = Object.fromEntries(ALL_EFFECTS.map(e => [e, false]));
+    prevEnabled = { ...this.enabled };
+    // Custom (mod-defined) effects: id → { effect, pipeline, uniform, enabled }
+    customEffects = new Map();
+    // Settings
+    grainTime = 0;
+    lightScreenPos = [0.5, 0.5];
+    camProj = null;
+    camInvProj = null;
+    camView = null;
+    // DOF
+    dofFocusDist = 0.5;
+    dofFocusRange = 0.3;
+    dofMaxBlur = 8.0;
+    dofBokehShape = 0; // 0=circle, 1=hexagon, 2=octagon
+    dofSampleCount = 32;
+    dofNearOnly = false;
+    dofFarOnly = false;
+    dofBladeRotation = 0.0;
+    // Afterimage
+    afterimageDamp = 0.96;
+    // Bloom
+    bloomThreshold = 0.8;
+    bloomStrength = 1.0;
+    bloomMipCount = 5; // number of downsample levels (full→½→¼→⅛→1/16)
+    bloomTint = [1.0, 1.0, 1.0];
+    bloomSoftKnee = 0.7; // soft threshold knee for bright pass
+    // Per-MIP upsample weights (index 0 = largest MIP, last = smallest)
+    bloomMipWeights = [0.0, 0.0, 0.4, 0.6, 0.8, 1.0];
+    // Bloom-soft
+    bloomSoftThreshold = 1.0;
+    bloomSoftSoftThreshold = 0.5;
+    bloomSoftIntensity = 0.3;
+    // Tonemap
+    exposure = 1.0;
+    gamma = 2.2;
+    contrast = 1.0;
+    saturation = 1.0;
+    vignette = 0.3;
+    // TAA
+    taaBlendFactor = 0.1;
+    taaVarianceClamp = false;
+    taaJitterX = 0;
+    taaJitterY = 0;
+    // SSAO (GTAO)
+    ssaoRadius = 0.5;
+    ssaoBias = 0.025;
+    ssaoKernelSize = 32; // compat alias → maps to ssaoDirections
+    ssaoDirections = 4; // GTAO slice directions
+    ssaoSlices = 8; // GTAO samples per slice
+    ssaoPower = 1.5; // AO contrast power
+    ssaoThickness = 0.1; // horizon depth thickness
+    // SSR (DDA + binary refinement)
+    ssrMaxSteps = 64;
+    ssrThickness = 0.05;
+    ssrMaxDistance = 100.0;
+    ssrFadeStart = 10.0;
+    ssrFadeEnd = 50.0;
+    ssrBinarySteps = 10;
+    ssrStride = 1.0;
+    // Motion blur
+    motionBlurIntensity = 1.0;
+    motionBlurMaxSamples = 16;
+    // Sharpen
+    sharpenSharpness = 0.5;
+    // Grain
+    grainIntensity = 0.15;
+    grainSize = 2.0;
+    grainLuminanceAware = false;
+    // Edges
+    edgesThreshold = 0.4;
+    edgesOpacity = 1.0;
+    edgesEdgeColor = [1.0, 1.0, 1.0];
+    // Lens flare
+    lensFlareIntensity = 0.8;
+    lensFlareThreshold = 0.9;
+    lensFlareGhostCount = 8;
+    lensFlareGhostSpacing = 0.15;
+    lensFlareHaloWidth = 0.2;
+    lensFlareTint = [1.0, 0.9, 0.8];
+    // Pixelation
+    pixelationPixelSize = 6;
+    pixelationDepthEdgeStrength = 0.4;
+    // Gaussian blur
+    gaussianBlurRadius = 2.0;
+    // Outline
+    outlineColor = [1.0, 0.8, 0.2];
+    outlineWidth = 2.0;
+    outlineOpacity = 1.0;
+    // Highlight
+    highlightIntensity = 0.8;
+    highlightInnerOpacity = 0.3;
+    highlightBlurRadius = 3.0;
+    // Glow
+    glowIntensity = 1.0;
+    glowBlurRadius = 4.0;
+    // ASCII
+    asciiCellSize = 8;
+    asciiUseColor = 1.0;
+    // LUT (3D color grading)
+    lutTexture = null;
+    lutView = null;
+    lutSize = 32;
+    lutEnabled = true;
+    lutLayout;
+    // White balance
+    wbTemperature = 0.0;
+    wbTint = 0.0;
+    // Channel mixer
+    cmWeights = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+    cmMonochrome = false;
+    // Split-tone
+    stShadow = [0.0, 0.0, 0.0];
+    stHighlight = [0.0, 0.0, 0.0];
+    stBalance = 0.0;
+    // Chromatic aberration
+    caIntensity = 0.5;
+    caStart = 0.0;
+    caEnd = 1.0;
+    caCenterX = 0.5;
+    caCenterY = 0.5;
+    // Lens distortion
+    ldIntensity = 0.0;
+    ldScale = 1.0;
+    ldChromaSplit = 0.0;
+    // Halftone
+    htCellSize = 8.0;
+    htDotScale = 1.0;
+    htAngle = 0.0;
+    htMonochrome = true;
+    // Dithering
+    dMode = 1; // 0=off, 1=bayer, 2=bluenoise
+    dStrength = 0.5;
+    dLevels = 0; // 0 = no quantization
+    // Watercolor
+    wcEdgeStrength = 1.0;
+    wcPaperScale = 2.0;
+    wcBlend = 0.7;
+    constructor(device, format, options) {
+        this.device = device;
+        this.format = format;
+        this.depthFormat = options?.depthFormat ?? "depth32float";
+        this.sceneFormat = options?.sceneFormat ?? HDR_FORMAT;
+    }
+    // ── Init ──────────────────────────────────────────────────────────────────
+    init() {
+        this.linearSampler = this.device.createSampler({
+            magFilter: "linear", minFilter: "linear",
+            addressModeU: "clamp-to-edge", addressModeV: "clamp-to-edge",
+        });
+        this.nearestSampler = this.device.createSampler({
+            magFilter: "nearest", minFilter: "nearest",
+            addressModeU: "clamp-to-edge", addressModeV: "clamp-to-edge",
+        });
+        // 5 shared bind group layouts
+        this.ccLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        this.cdLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "non-filtering" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        this.cvvhLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        this.cvdLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "non-filtering" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        this.dnfnLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "non-filtering" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        // LUT layout: color2D + lut3D + sampler + uniform
+        this.lutLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "3d" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        // Dummy texture (1×1 black)
+        this.dummyTex = this.device.createTexture({
+            size: [1, 1], format: "rgba8unorm",
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        });
+        this.device.queue.writeTexture({ texture: this.dummyTex }, new Uint8Array([0, 0, 0, 255]), { bytesPerRow: 4, rowsPerImage: 1 }, [1, 1]);
+        // Occlusion culling bind group (group 1, shared by all postfx pipelines).
+        // Layout: single uniform buffer at binding 0, FRAGMENT visibility.
+        // Buffer: 16-byte header (count + padding) + 8 × vec4 rects = 144 bytes.
+        this.occluderLayout = this.device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ] });
+        this.occluderUniform = this.device.createBuffer({
+            size: 144,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.occluderBindGroup = this.device.createBindGroup({
+            layout: this.occluderLayout,
+            entries: [{ binding: 0, resource: { buffer: this.occluderUniform } }],
+        });
+        // Initialize to zero occluders (no occlusion).
+        this.device.queue.writeBuffer(this.occluderUniform, 0, new Float32Array(36));
+        // Uniform buffers — 48 bytes for simple effects, 256 for matrix effects
+        const simpleKeys = [
+            "fxaa", "dof", "sobel", "afterimage", "bloom-bright", "bloom-blur", "bloom-composite",
+            "bloom-downsample", "bloom-upsample",
+            "ascii", "blit", "taa", "motion-blur", "bloom-soft", "tonemap", "sharpen", "grain",
+            "edges", "lens-flare", "pixelation", "gaussian-blur", "outline",
+            "ssao-blur", "ssao-composite", "highlight-blur", "highlight-composite",
+            "glow-blur", "glow-composite",
+            // New effects
+            "lut", "white-balance", "channel-mixer", "split-tone",
+            "chromatic-aberration", "lens-distortion",
+            "halftone", "dithering", "watercolor",
+        ];
+        simpleKeys.forEach((k) => { this.uniforms[k] = this.device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); ; });
+        this.uniforms["ssao"] = this.device.createBuffer({ size: 256, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.uniforms["ssr"] = this.device.createBuffer({ size: 256, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        // Pipelines
+        const mk = (fs, layout, fmt = HDR_FORMAT) => this.makePipeline(fs, layout, fmt);
+        this.pipelines["fxaa"] = mk(FXAA_FS, this.ccLayout);
+        this.pipelines["dof"] = mk(DOF_FS, this.cdLayout);
+        this.pipelines["sobel"] = mk(SOBEL_FS, this.ccLayout);
+        this.pipelines["afterimage"] = mk(AFTERIMAGE_FS, this.ccLayout);
+        this.pipelines["bloom-bright"] = mk(BLOOM_BRIGHT_FS, this.ccLayout);
+        this.pipelines["bloom-blur"] = mk(BLOOM_BLUR_FS, this.ccLayout);
+        this.pipelines["bloom-composite"] = mk(BLOOM_COMPOSITE_FS, this.ccLayout);
+        this.pipelines["bloom-downsample"] = mk(BLOOM_DOWNSAMPLE_FS, this.ccLayout);
+        this.pipelines["bloom-upsample"] = mk(BLOOM_UPSAMPLE_FS, this.ccLayout);
+        this.pipelines["ascii"] = mk(ASCII_FS, this.ccLayout);
+        this.pipelines["blit"] = mk(BLIT_FS, this.ccLayout, this.format);
+        // HDR blit variant for intermediate passes inside the HDR chain section
+        this.pipelines["blit-hdr"] = mk(BLIT_FS, this.ccLayout, HDR_FORMAT);
+        this.pipelines["taa"] = mk(TAA_FS, this.cvvhLayout);
+        this.pipelines["ssao"] = mk(SSAO_FS, this.dnfnLayout);
+        this.pipelines["ssao-blur"] = mk(SSAO_BLUR_FS, this.cdLayout);
+        this.pipelines["ssao-composite"] = mk(SSAO_COMPOSITE_FS, this.ccLayout);
+        this.pipelines["ssr"] = mk(SSR_FS, this.cvdLayout);
+        this.pipelines["motion-blur"] = mk(MOTION_BLUR_FS, this.cvdLayout);
+        this.pipelines["bloom-soft"] = mk(BLOOM_SOFT_FS, this.ccLayout);
+        this.pipelines["tonemap"] = mk(TONEMAP_FS, this.ccLayout);
+        this.pipelines["sharpen"] = mk(SHARPEN_FS, this.ccLayout);
+        this.pipelines["grain"] = mk(GRAIN_FS, this.ccLayout);
+        this.pipelines["edges"] = mk(EDGES_FS, this.cvdLayout);
+        this.pipelines["lens-flare"] = mk(LENS_FLARE_FS, this.cdLayout);
+        this.pipelines["pixelation"] = mk(PIXELATION_FS, this.cdLayout);
+        this.pipelines["gaussian-blur"] = mk(GAUSSIAN_BLUR_FS, this.ccLayout);
+        this.pipelines["outline"] = mk(OUTLINE_FS, this.ccLayout);
+        this.pipelines["highlight-blur"] = mk(HIGHLIGHT_BLUR_FS, this.ccLayout);
+        this.pipelines["highlight-composite"] = mk(HIGHLIGHT_COMPOSITE_FS, this.cvvhLayout);
+        this.pipelines["glow-blur"] = mk(GLOW_BLUR_FS, this.ccLayout);
+        this.pipelines["glow-composite"] = mk(GLOW_COMPOSITE_FS, this.ccLayout);
+        // New effects
+        this.pipelines["lut"] = mk(LUT_FS, this.lutLayout);
+        this.pipelines["white-balance"] = mk(WHITE_BALANCE_FS, this.ccLayout);
+        this.pipelines["channel-mixer"] = mk(CHANNEL_MIXER_FS, this.ccLayout);
+        this.pipelines["split-tone"] = mk(SPLIT_TONE_FS, this.ccLayout);
+        this.pipelines["chromatic-aberration"] = mk(CHROMATIC_ABERRATION_FS, this.ccLayout);
+        this.pipelines["lens-distortion"] = mk(LENS_DISTORTION_FS, this.ccLayout);
+        this.pipelines["halftone"] = mk(HALFTONE_FS, this.ccLayout);
+        this.pipelines["dithering"] = mk(DITHERING_FS, this.ccLayout); // color + noise + sampler + uniform
+        this.pipelines["watercolor"] = mk(WATERCOLOR_FS, this.ccLayout); // color + noise + sampler + uniform
+        this.createGlyphAtlas();
+        this.createNoiseTexture();
+    }
+    makePipeline(fsCode, layout, targetFormat) {
+        const shader = createValidatedShaderModule(this.device, { code: VS + "\n" + OCCLUDER_CHUNK + "\n" + fsCode, label: "PostProcessStack" });
+        const pl = this.device.createPipelineLayout({ bindGroupLayouts: [layout, this.occluderLayout] });
+        return this.device.createRenderPipeline({
+            layout: pl,
+            vertex: { module: shader, entryPoint: "vs_main" },
+            fragment: { module: shader, entryPoint: "fs_main", targets: [{ format: targetFormat }] },
+            primitive: { topology: "triangle-list" },
+        });
+    }
+    createGlyphAtlas() {
+        const chars = " .:-=+*#%@";
+        const gw = 16, gh = 16, cols = chars.length;
+        const canvas = document.createElement("canvas");
+        canvas.width = cols * gw;
+        canvas.height = gh;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "white";
+        ctx.font = `bold ${gh - 2}px monospace`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        for (let i = 0; i < chars.length; i++)
+            ctx.fillText(chars[i], i * gw + gw / 2, gh / 2);
+        this.glyphTex = this.device.createTexture({
+            size: [canvas.width, canvas.height], format: "rgba8unorm",
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        this.device.queue.copyExternalImageToTexture({ source: canvas }, { texture: this.glyphTex }, [canvas.width, canvas.height]);
+    }
+    createNoiseTexture() {
+        const size = 4;
+        const data = new Uint8Array(size * size * 4);
+        for (let i = 0; i < data.length; i += 4) {
+            data[i] = Math.floor(Math.random() * 255);
+            data[i + 1] = Math.floor(Math.random() * 255);
+            data[i + 2] = 0;
+            data[i + 3] = 255;
+        }
+        this.noiseTex = this.device.createTexture({
+            size: [size, size], format: "rgba8unorm",
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        });
+        this.device.queue.writeTexture({ texture: this.noiseTex }, data, { bytesPerRow: size * 4 }, [size, size]);
+    }
+    // ── Public API: queries ───────────────────────────────────────────────────
+    hasEnabledEffects() {
+        if (Object.values(this.enabled).some(v => v))
+            return true;
+        for (const [, e] of this.customEffects.entries())
+            if (e.enabled)
+                return true;
+        return false;
+    }
+    getEnabledEffects() {
+        const builtin = CHAIN_ORDER.filter(id => this.enabled[id]).map(id => EFFECT_NAMES[id]);
+        const custom = [...this.customEffects.values()].filter(e => e.enabled).map(e => e.effect.name);
+        return [...builtin, ...custom];
+    }
+    isEnabled(id) { return this.enabled[id]; }
+    // ── Public API: occlusion culling ──────────────────────────────────────────
+    /**
+     * Set opaque UI panel rects (in UV space, 0-1, top-left origin) that the
+     * postfx shaders should skip. Up to 8 rects; extras are clamped. When the
+     * rects change, TAA history is reset for one frame to avoid stale-history
+     * artifacts in the previously-occluded region.
+     */
+    setOccluderRects(rects) {
+        const clamped = rects.slice(0, 8);
+        const key = clamped.map(r => `${r.x.toFixed(4)},${r.y.toFixed(4)},${r.w.toFixed(4)},${r.h.toFixed(4)}`).join("|");
+        if (key !== this.occluderKey) {
+            this.occluderKey = key;
+            this.taaHistoryReset = true;
+        }
+        this.occluderRects = clamped;
+        // Build uniform data: [count, 0, 0, 0, rect0.xyzw, rect1.xyzw, ...]
+        const data = new Float32Array(36);
+        data[0] = clamped.length;
+        for (let i = 0; i < clamped.length && i < 8; i++) {
+            data[4 + i * 4] = clamped[i].x;
+            data[4 + i * 4 + 1] = clamped[i].y;
+            data[4 + i * 4 + 2] = clamped[i].w;
+            data[4 + i * 4 + 3] = clamped[i].h;
+        }
+        this.device.queue.writeBuffer(this.occluderUniform, 0, data);
+    }
+    /** Returns true if any single occluder rect covers ≥95% of UV space. */
+    isFullyOccluded() {
+        return this.occluderRects.some(r => r.w * r.h >= 0.95);
+    }
+    getOccluderRects() {
+        return this.occluderRects;
+    }
+    // ── Public API: enable/disable ────────────────────────────────────────────
+    setEnabled(id, enabled) {
+        this.enabled[id] = enabled;
+    }
+    // ── Public API: custom (mod-defined) effects ──────────────────────────────
+    /** Register a mod-defined custom effect. Creates a render pipeline from the
+     *  provided WGSL fragment shader. The effect is disabled by default; call
+     *  `setCustomEffectEnabled` to turn it on. Throws if the id is already
+     *  registered or the WGSL fails to compile. */
+    registerCustomEffect(effect) {
+        if (this.customEffects.has(effect.id)) {
+            throw new Error(`Custom effect "${effect.id}" is already registered`);
+        }
+        if (effect.layout !== "cc") {
+            throw new Error(`Custom effect "${effect.id}": only layout "cc" is supported (got "${effect.layout}")`);
+        }
+        const uniformSize = effect.uniforms ?? 64;
+        const uniform = this.device.createBuffer({
+            size: uniformSize,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        let pipeline;
+        try {
+            pipeline = this.makePipeline(effect.wgsl, this.ccLayout, HDR_FORMAT);
+        }
+        catch (e) {
+            log.error("post-process-stack", `Failed to compile custom effect "${effect.id}": ${e}`);
+            throw e;
+        }
+        this.customEffects.set(effect.id, { effect, pipeline, uniform, uniformValues: null, enabled: false });
+    }
+    /** Unregister a custom effect. Destroys its pipeline + uniform buffer. */
+    unregisterCustomEffect(id) {
+        const e = this.customEffects.get(id);
+        if (!e)
+            return;
+        e.pipeline.destroy?.();
+        e.uniform.destroy();
+        this.customEffects.delete(id);
+    }
+    /** Enable/disable a custom effect. */
+    setCustomEffectEnabled(id, enabled) {
+        const e = this.customEffects.get(id);
+        if (!e)
+            throw new Error(`Custom effect "${id}" is not registered`);
+        e.enabled = enabled;
+    }
+    /** Check if a custom effect is enabled. */
+    isCustomEffectEnabled(id) {
+        return this.customEffects.get(id)?.enabled ?? false;
+    }
+    /** Get all registered custom effect ids. */
+    getCustomEffectIds() {
+        return [...this.customEffects.keys()];
+    }
+    /** Get a custom effect's metadata (name, settings, enabled state, uniform size). */
+    getCustomEffectInfo(id) {
+        const e = this.customEffects.get(id);
+        if (!e)
+            return null;
+        return { name: e.effect.name, enabled: e.enabled, uniforms: e.uniform.size, settings: e.effect.settings };
+    }
+    /** Get all custom effects with their metadata. */
+    getCustomEffects() {
+        return [...this.customEffects.entries()].map(([id, e]) => ({
+            id, name: e.effect.name, enabled: e.enabled, settings: e.effect.settings,
+        }));
+    }
+    /** Write uniform data for a custom effect. */
+    setCustomEffectUniform(id, data) {
+        const e = this.customEffects.get(id);
+        if (!e)
+            throw new Error(`Custom effect "${id}" is not registered`);
+        // Store user settings (offset 3+); per-frame values (0-2) are written in applyCustomEffect.
+        const stored = new Float32Array(e.uniform.size / 4);
+        for (let i = 0; i < data.length && i < stored.length; i++)
+            stored[i] = data[i];
+        e.uniformValues = stored;
+        this.device.queue.writeBuffer(e.uniform, 0, stored);
+    }
+    // ── Public API: per-effect setters ────────────────────────────────────────
+    setDOFFocusDist(v) { this.dofFocusDist = v; }
+    setDOFFocusRange(v) { this.dofFocusRange = v; }
+    setDOFMaxBlur(v) { this.dofMaxBlur = v; }
+    setDOFBokehShape(v) { this.dofBokehShape = Math.floor(v); }
+    setDOFSampleCount(v) { this.dofSampleCount = Math.floor(v); }
+    setDOFNearOnly(v) { this.dofNearOnly = v; }
+    setDOFFarOnly(v) { this.dofFarOnly = v; }
+    setDOFBladeRotation(v) { this.dofBladeRotation = v; }
+    setAfterimageDamp(v) { this.afterimageDamp = v; }
+    setBloomThreshold(v) { this.bloomThreshold = v; }
+    setBloomStrength(v) { this.bloomStrength = v; }
+    setBloomMipCount(v) { this.bloomMipCount = Math.max(1, Math.min(6, Math.floor(v))); }
+    setBloomTint(r, g, b) { this.bloomTint = [r, g, b]; }
+    setBloomSoftKnee(v) { this.bloomSoftKnee = v; }
+    setBloomMipWeights(weights) { this.bloomMipWeights = weights; }
+    setBloomSoftThreshold(v) { this.bloomSoftThreshold = v; }
+    setBloomSoftSoftThreshold(v) { this.bloomSoftSoftThreshold = v; }
+    setBloomSoftIntensity(v) { this.bloomSoftIntensity = v; }
+    setExposure(v) { this.exposure = v; }
+    setGamma(v) { this.gamma = v; }
+    setContrast(v) { this.contrast = v; }
+    setSaturation(v) { this.saturation = v; }
+    setVignette(v) { this.vignette = v; }
+    setTAABlendFactor(v) { this.taaBlendFactor = v; }
+    setTAAVarianceClamp(v) { this.taaVarianceClamp = v; }
+    setJitter(x, y) { this.taaJitterX = x; this.taaJitterY = y; }
+    setSSAORadius(v) { this.ssaoRadius = v; }
+    setSSAOBias(v) { this.ssaoBias = v; }
+    setSSAOKernelSize(v) { this.ssaoKernelSize = Math.floor(v); this.ssaoDirections = Math.floor(v); }
+    setSSAODirections(v) { this.ssaoDirections = Math.floor(v); }
+    setSSAOSlices(v) { this.ssaoSlices = Math.floor(v); }
+    setSSAOPower(v) { this.ssaoPower = v; }
+    setSSAOThickness(v) { this.ssaoThickness = v; }
+    setSSRMaxSteps(v) { this.ssrMaxSteps = Math.floor(v); }
+    setSSRThickness(v) { this.ssrThickness = v; }
+    setSSRMaxDistance(v) { this.ssrMaxDistance = v; }
+    setSSRFadeStart(v) { this.ssrFadeStart = v; }
+    setSSRFadeEnd(v) { this.ssrFadeEnd = v; }
+    setSSRBinarySteps(v) { this.ssrBinarySteps = Math.floor(v); }
+    setSSRStride(v) { this.ssrStride = v; }
+    setMotionBlurIntensity(v) { this.motionBlurIntensity = v; }
+    setMotionBlurMaxSamples(v) { this.motionBlurMaxSamples = Math.floor(v); }
+    setSharpenSharpness(v) { this.sharpenSharpness = v; }
+    setGrainIntensity(v) { this.grainIntensity = v; }
+    setGrainSize(v) { this.grainSize = v; }
+    setGrainLuminanceAware(v) { this.grainLuminanceAware = v; }
+    setEdgesThreshold(v) { this.edgesThreshold = v; }
+    setEdgesOpacity(v) { this.edgesOpacity = v; }
+    setEdgesEdgeColor(r, g, b) { this.edgesEdgeColor = [r, g, b]; }
+    setLensFlareIntensity(v) { this.lensFlareIntensity = v; }
+    setLensFlareThreshold(v) { this.lensFlareThreshold = v; }
+    setLensFlareGhostCount(v) { this.lensFlareGhostCount = Math.floor(v); }
+    setLensFlareGhostSpacing(v) { this.lensFlareGhostSpacing = v; }
+    setLensFlareHaloWidth(v) { this.lensFlareHaloWidth = v; }
+    setLensFlareTint(r, g, b) { this.lensFlareTint = [r, g, b]; }
+    setPixelationPixelSize(v) { this.pixelationPixelSize = Math.max(1, Math.floor(v)); }
+    getPixelationPixelSize() { return this.pixelationPixelSize; }
+    setPixelationDepthEdgeStrength(v) { this.pixelationDepthEdgeStrength = v; }
+    setGaussianBlurRadius(v) { this.gaussianBlurRadius = v; }
+    setOutlineColor(r, g, b) { this.outlineColor = [r, g, b]; }
+    setOutlineWidth(v) { this.outlineWidth = v; }
+    setOutlineOpacity(v) { this.outlineOpacity = v; }
+    setHighlightIntensity(v) { this.highlightIntensity = v; }
+    setHighlightInnerOpacity(v) { this.highlightInnerOpacity = v; }
+    setHighlightBlurRadius(v) { this.highlightBlurRadius = v; }
+    setGlowIntensity(v) { this.glowIntensity = v; }
+    setGlowBlurRadius(v) { this.glowBlurRadius = v; }
+    setASCIICellSize(v) { this.asciiCellSize = Math.max(2, Math.floor(v)); }
+    setASCIIUseColor(v) { this.asciiUseColor = v ? 1.0 : 0.0; }
+    // ── New effect setters ──
+    setLUT(data, size) {
+        this.lutSize = size;
+        this.lutTexture?.destroy();
+        this.lutTexture = this.device.createTexture({
+            dimension: "3d",
+            size: [size, size, size], format: "rgba8unorm",
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+        });
+        // Copy into a fresh ArrayBuffer to satisfy GPUAllowSharedBufferSource typing
+        const buf = new Uint8Array(data.length);
+        buf.set(data);
+        this.device.queue.writeTexture({ texture: this.lutTexture }, buf.buffer, { bytesPerRow: size * 4, rowsPerImage: size }, [size, size, size]);
+        this.lutView = this.lutTexture.createView({ dimension: "3d" });
+    }
+    setLUTEnabled(v) { this.lutEnabled = v; }
+    setWhiteBalance(temperature, tint) { this.wbTemperature = temperature; this.wbTint = tint; }
+    setChannelMixer(rr, rg, rb, gr, gg, gb, br, bg, bb) {
+        this.cmWeights = [rr, rg, rb, gr, gg, gb, br, bg, bb];
+    }
+    setChannelMixerMonochrome(v) { this.cmMonochrome = v; }
+    setSplitTone(shadowR, shadowG, shadowB, highlightR, highlightG, highlightB, balance) {
+        this.stShadow = [shadowR, shadowG, shadowB];
+        this.stHighlight = [highlightR, highlightG, highlightB];
+        this.stBalance = balance;
+    }
+    setChromaticAberration(intensity, start, end) {
+        this.caIntensity = intensity;
+        this.caStart = start;
+        this.caEnd = end;
+    }
+    setChromaticAberrationCenter(x, y) { this.caCenterX = x; this.caCenterY = y; }
+    setLensDistortion(intensity, scale, chromaSplit) {
+        this.ldIntensity = intensity;
+        this.ldScale = scale;
+        this.ldChromaSplit = chromaSplit;
+    }
+    setHalftone(cellSize, dotScale, angle, monochrome) {
+        this.htCellSize = cellSize;
+        this.htDotScale = dotScale;
+        this.htAngle = angle;
+        this.htMonochrome = monochrome;
+    }
+    setDithering(mode, strength, levels) {
+        this.dMode = Math.floor(mode);
+        this.dStrength = strength;
+        this.dLevels = Math.floor(levels);
+    }
+    setWatercolor(edgeStrength, paperScale, blend) {
+        this.wcEdgeStrength = edgeStrength;
+        this.wcPaperScale = paperScale;
+        this.wcBlend = blend;
+    }
+    // ── Public API: per-frame inputs ──────────────────────────────────────────
+    update(dt) {
+        this.grainTime += dt;
+    }
+    setCameraMatrices(proj, invProj, view) {
+        this.camProj = proj;
+        this.camInvProj = invProj;
+        this.camView = view;
+    }
+    setLightScreenPos(x, y) {
+        this.lightScreenPos = [x, y];
+    }
+    // ── Target management ─────────────────────────────────────────────────────
+    needsNormals() { return this.enabled["edges"] || this.enabled["ssao"] || this.enabled["ssr"]; }
+    needsVelocity() { return this.enabled["taa"] || this.enabled["motion-blur"]; }
+    needsMask() { return this.enabled["outline"] || this.enabled["highlight"] || this.enabled["glow"]; }
+    effectsChanged() {
+        for (let _i = 0, _it = ALL_EFFECTS, _n = _it.length; _i < _n; _i++) {
+            const id = _it[_i];
+            if (this.enabled[id] !== this.prevEnabled[id]) {
+                this.prevEnabled = { ...this.enabled };
+                return true;
+            }
+        }
+        return false;
+    }
+    ensureTargets(w, h) {
+        const sizeChanged = (w !== this.texW || h !== this.texH || !this.sceneColor);
+        const fxChanged = this.effectsChanged();
+        if (!sizeChanged && !fxChanged)
+            return;
+        if (sizeChanged) {
+            this.destroyAllTargets();
+            const usage = GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST;
+            this.sceneColor = this.device.createTexture({ size: [w, h], format: this.sceneFormat, usage });
+            this.sceneDepth = this.device.createTexture({ size: [w, h], format: this.depthFormat, usage });
+            this.pingPong[0] = this.device.createTexture({ size: [w, h], format: HDR_FORMAT, usage });
+            this.pingPong[1] = this.device.createTexture({ size: [w, h], format: HDR_FORMAT, usage });
+        }
+        // Always (re)create optional targets when effects or size change
+        this.destroyOptionalTargets();
+        this.createOptionalTargets(w, h);
+        this.texW = w;
+        this.texH = h;
+    }
+    createOptionalTargets(w, h) {
+        const usage = GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST;
+        const mkTex = (fmt, tw, th) => this.device.createTexture({ size: [tw, th], format: fmt, usage });
+        if (this.needsNormals())
+            this.sceneNormals = mkTex("rgba8unorm", w, h);
+        if (this.needsVelocity())
+            this.sceneVelocity = mkTex("rg16float", w, h);
+        if (this.needsMask())
+            this.sceneMask = mkTex("rgba8unorm", w, h);
+        if (this.enabled["taa"]) {
+            this.taaHistory = mkTex(HDR_FORMAT, w, h);
+            this.taaHistory2 = mkTex(HDR_FORMAT, w, h);
+        }
+        if (this.enabled["afterimage"])
+            this.afterimageTex = mkTex(HDR_FORMAT, w, h);
+        if (this.enabled["bloom"]) {
+            const hw = Math.max(1, w >> 1), hh = Math.max(1, h >> 1);
+            this.bloomBright = mkTex(HDR_FORMAT, hw, hh);
+            this.bloomBlurH = mkTex(HDR_FORMAT, hw, hh);
+            this.bloomBlurV = mkTex(HDR_FORMAT, hw, hh);
+            this.bloomBase = mkTex(HDR_FORMAT, w, h);
+            // Multi-MIP pyramid: bloomMip[0] = ½res, [1] = ¼res, [2] = ⅛res, [3] = 1/16, [4] = 1/32
+            this.bloomMip = [];
+            this.bloomTemp = [];
+            let mw = hw, mh = hh;
+            for (let i = 0; i < this.bloomMipCount; i++) {
+                this.bloomMip.push(mkTex(HDR_FORMAT, mw, mh));
+                this.bloomTemp.push(mkTex(HDR_FORMAT, mw, mh));
+                mw = Math.max(1, mw >> 1);
+                mh = Math.max(1, mh >> 1);
+            }
+        }
+        if (this.enabled["bloom-soft"]) {
+            const hw = Math.max(1, w >> 1), hh = Math.max(1, h >> 1);
+            this.halfResA = mkTex(HDR_FORMAT, hw, hh);
+            this.halfResB = mkTex(HDR_FORMAT, hw, hh);
+        }
+        if (this.enabled["ssao"]) {
+            this.ssaoA = mkTex(HDR_FORMAT, w, h);
+            this.ssaoB = mkTex(HDR_FORMAT, w, h);
+        }
+        if (this.enabled["gaussian-blur"]) {
+            this.blurA = mkTex(HDR_FORMAT, w, h);
+            this.blurB = mkTex(HDR_FORMAT, w, h);
+        }
+        if (this.enabled["highlight"]) {
+            this.blurA = this.blurA ?? mkTex(HDR_FORMAT, w, h);
+            this.blurB = this.blurB ?? mkTex(HDR_FORMAT, w, h);
+        }
+        if (this.enabled["glow"]) {
+            this.blurA = this.blurA ?? mkTex(HDR_FORMAT, w, h);
+            this.blurB = this.blurB ?? mkTex(HDR_FORMAT, w, h);
+        }
+    }
+    destroyOptionalTargets() {
+        const destroy = (t) => { t?.destroy(); };
+        destroy(this.sceneNormals);
+        this.sceneNormals = null;
+        destroy(this.sceneVelocity);
+        this.sceneVelocity = null;
+        destroy(this.sceneMask);
+        this.sceneMask = null;
+        destroy(this.taaHistory);
+        this.taaHistory = null;
+        destroy(this.taaHistory2);
+        this.taaHistory2 = null;
+        destroy(this.afterimageTex);
+        this.afterimageTex = null;
+        destroy(this.bloomBright);
+        this.bloomBright = null;
+        destroy(this.bloomBlurH);
+        this.bloomBlurH = null;
+        destroy(this.bloomBlurV);
+        this.bloomBlurV = null;
+        this.bloomMip.forEach((m) => { m.destroy(); ; });
+        this.bloomMip = [];
+        this.bloomTemp.forEach((m) => { m.destroy(); ; });
+        this.bloomTemp = [];
+        destroy(this.bloomBase);
+        this.bloomBase = null;
+        destroy(this.halfResA);
+        this.halfResA = null;
+        destroy(this.halfResB);
+        this.halfResB = null;
+        destroy(this.ssaoA);
+        this.ssaoA = null;
+        destroy(this.ssaoB);
+        this.ssaoB = null;
+        destroy(this.blurA);
+        this.blurA = null;
+        destroy(this.blurB);
+        this.blurB = null;
+        this.bloomSoftResult = null;
+    }
+    destroyAllTargets() {
+        this.clearResourceCaches();
+        this.destroyOptionalTargets();
+        this.sceneColor?.destroy();
+        this.sceneColor = null;
+        this.sceneDepth?.destroy();
+        this.sceneDepth = null;
+        this.pingPong[0]?.destroy();
+        this.pingPong[0] = null;
+        this.pingPong[1]?.destroy();
+        this.pingPong[1] = null;
+    }
+    // ── Target getters (game renders into these) ──────────────────────────────
+    getSceneColorView() {
+        if (!this.sceneColor)
+            throw new Error("PostProcess targets not created");
+        return this.viewOf(this.sceneColor);
+    }
+    getSceneColorTexture() {
+        if (!this.sceneColor)
+            throw new Error("PostProcess targets not created");
+        return this.sceneColor;
+    }
+    getSceneDepthView() {
+        if (!this.sceneDepth)
+            throw new Error("PostProcess targets not created");
+        return this.viewOf(this.sceneDepth);
+    }
+    getSceneNormalsView() {
+        if (!this.sceneNormals)
+            throw new Error("Normals target not created — enable edges/ssao/ssr first");
+        return this.viewOf(this.sceneNormals);
+    }
+    getSceneVelocityView() {
+        if (!this.sceneVelocity)
+            throw new Error("Velocity target not created — enable taa/motion-blur first");
+        return this.viewOf(this.sceneVelocity);
+    }
+    getSceneMaskView() {
+        if (!this.sceneMask)
+            throw new Error("Mask target not created — enable outline/highlight/glow first");
+        return this.viewOf(this.sceneMask);
+    }
+    // ── Main chain ────────────────────────────────────────────────────────────
+    applyChain(encoder, depthView, canvasView, w, h, time = 0) {
+        const active = CHAIN_ORDER.filter(id => this.enabled[id]);
+        // Collect enabled custom effects grouped by order.
+        const customByOrder = {
+            "hdr": [], "color-grading": [], "camera": [], "stylized": [],
+        };
+        for (const [id, e] of this.customEffects.entries()) {
+            if (e.enabled)
+                customByOrder[e.effect.order].push(id);
+        }
+        const hasCustom = (customByOrder["hdr"].length + customByOrder["color-grading"].length +
+            customByOrder["camera"].length + customByOrder["stylized"].length) > 0;
+        if (active.length === 0 && !hasCustom) {
+            // Empty chain: still blit the scene color to the canvas. Callers that
+            // render scene pipelines compiled for the HDR scene format must always
+            // go through this stack — a direct-to-surface fallback binds those
+            // pipelines against the swapchain format (e.g. bgra8unorm), which is a
+            // validation error on native and renders nothing on Chrome.
+            if (this.sceneColor)
+                this.applyBlit(encoder, this.viewOf(this.sceneColor), canvasView, w, h);
+            return;
+        }
+        const dv = depthView ?? (this.sceneDepth ? this.viewOf(this.sceneDepth) : undefined) ?? null;
+        let inputView = this.viewOf(this.sceneColor);
+        let pingIdx = 0;
+        // Build a combined chain: built-in effects with custom effects inserted
+        // at the end of each order group. The CHAIN_ORDER groups are:
+        //   [0..7]   = HDR (taa..tonemap)
+        //   [8..11]  = Color grading (lut..split-tone)
+        //   [12..16] = Camera/lens (fxaa..grain)
+        //   [17..end] = Stylized (sobel..ascii)
+        const HDR_END = 8, COLOR_END = 12, CAMERA_END = 17;
+        const chain = [];
+        // Iterate the full CHAIN_ORDER so custom effects are inserted at the
+        // correct group boundaries even when few built-in effects are enabled.
+        for (let i = 0; i < CHAIN_ORDER.length; i++) {
+            if (this.enabled[CHAIN_ORDER[i]]) {
+                chain.push({ type: "builtin", id: CHAIN_ORDER[i] });
+            }
+            // Insert custom effects at group boundaries (after the last effect in each group).
+            if (i === HDR_END - 1)
+                customByOrder["hdr"].forEach((cid) => { chain.push({ type: "custom", id: cid }); ; });
+            if (i === COLOR_END - 1)
+                customByOrder["color-grading"].forEach((cid) => { chain.push({ type: "custom", id: cid }); ; });
+            if (i === CAMERA_END - 1)
+                customByOrder["camera"].forEach((cid) => { chain.push({ type: "custom", id: cid }); ; });
+        }
+        // Stylized custom effects run after all built-in stylized effects.
+        customByOrder["stylized"].forEach((cid) => { chain.push({ type: "custom", id: cid }); ; });
+        // If there are no built-in effects but there are custom effects, run them.
+        if (active.length === 0) {
+            ["hdr", "color-grading", "camera", "stylized"].forEach((order) => {
+                customByOrder[order].forEach((cid) => { chain.push({ type: "custom", id: cid }); ; });
+            });
+        }
+        chain.forEach((entry) => {
+            const outputTex = this.pingPong[pingIdx];
+            const outputView = this.viewOf(outputTex);
+            if (entry.type === "builtin") {
+                this.applyEffect(encoder, entry.id, inputView, outputView, dv, w, h);
+                if (entry.id === "afterimage") {
+                    encoder.copyTextureToTexture({ texture: outputTex }, { texture: this.afterimageTex }, [w, h]);
+                }
+                else if (entry.id === "taa") {
+                    encoder.copyTextureToTexture({ texture: outputTex }, { texture: this.taaHistory2 }, [w, h]);
+                    const tmp = this.taaHistory;
+                    this.taaHistory = this.taaHistory2;
+                    this.taaHistory2 = tmp;
+                }
+            }
+            else {
+                this.applyCustomEffect(encoder, entry.id, inputView, outputView, w, h, time);
+            }
+            inputView = outputView;
+            pingIdx = 1 - pingIdx;
+        });
+        // Blit final result to canvas
+        this.applyBlit(encoder, inputView, canvasView, w, h);
+    }
+    /** Apply a custom (mod-defined) effect as a full-screen pass. */
+    applyCustomEffect(encoder, id, inputView, outputView, w, h, time) {
+        const e = this.customEffects.get(id);
+        if (!e)
+            return;
+        // Write per-frame values (inv_w, inv_h, time) to the first 3 floats.
+        // User settings start at offset 3 (set via setCustomEffectUniform).
+        const perFrame = new Float32Array(e.uniform.size / 4);
+        perFrame[0] = 1 / w;
+        perFrame[1] = 1 / h;
+        perFrame[2] = time;
+        // Preserve existing user settings (offset 3+).
+        const existing = e.uniformValues;
+        if (existing) {
+            for (let i = 3; i < existing.length && i < perFrame.length; i++) {
+                perFrame[i] = existing[i];
+            }
+        }
+        e.uniformValues = perFrame;
+        this.device.queue.writeBuffer(e.uniform, 0, perFrame);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.dummyTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: e.uniform } },
+        ]);
+        this.pass(encoder, e.pipeline, bg, outputView, w, h);
+    }
+    applyEffect(encoder, effect, inputView, outputView, depthView, w, h) {
+        switch (effect) {
+            case "fxaa":
+                this.applyCC(encoder, "fxaa", inputView, outputView, w, h, [1 / w, 1 / h]);
+                break;
+            case "sobel":
+                this.applyCC(encoder, "sobel", inputView, outputView, w, h, [1 / w, 1 / h]);
+                break;
+            case "sharpen":
+                this.applyCC(encoder, "sharpen", inputView, outputView, w, h, [1 / w, 1 / h, this.sharpenSharpness]);
+                break;
+            case "grain":
+                this.applyCC(encoder, "grain", inputView, outputView, w, h, [1 / w, 1 / h, this.grainIntensity, this.grainSize, this.grainLuminanceAware ? 1 : 0, this.grainTime]);
+                break;
+            case "dof":
+                this.applyCD(encoder, "dof", inputView, outputView, depthView, w, h, [1 / w, 1 / h, this.dofFocusDist, this.dofFocusRange, this.dofMaxBlur, this.dofBokehShape, this.dofSampleCount, this.dofNearOnly ? 1 : 0, this.dofFarOnly ? 1 : 0, this.dofBladeRotation, 0, 0, 0, 0, 0, 0]);
+                break;
+            case "pixelation":
+                this.applyCD(encoder, "pixelation", inputView, outputView, depthView, w, h, [1 / w, 1 / h, this.pixelationPixelSize, this.pixelationDepthEdgeStrength, w, h]);
+                break;
+            case "lens-flare":
+                this.applyCD(encoder, "lens-flare", inputView, outputView, depthView, w, h, [this.lightScreenPos[0], this.lightScreenPos[1], this.lensFlareIntensity, this.lensFlareThreshold, this.lensFlareGhostCount, this.lensFlareGhostSpacing, this.lensFlareHaloWidth, 16, 0, 0, 0, 0, ...this.lensFlareTint, 0]);
+                break;
+            case "afterimage":
+                this.applyAfterimage(encoder, inputView, outputView, w, h);
+                break;
+            case "ascii":
+                this.applyASCII(encoder, inputView, outputView, w, h);
+                break;
+            case "bloom":
+                this.applyBloom(encoder, inputView, outputView, w, h);
+                break;
+            case "bloom-soft":
+                this.applyBloomSoft(encoder, inputView, outputView, w, h);
+                break;
+            case "tonemap":
+                this.applyTonemap(encoder, inputView, outputView, w, h);
+                break;
+            case "taa":
+                this.applyTAA(encoder, inputView, outputView, w, h);
+                break;
+            case "ssao":
+                this.applySSAO(encoder, inputView, outputView, depthView, w, h);
+                break;
+            case "ssr":
+                this.applySSR(encoder, inputView, outputView, depthView, w, h);
+                break;
+            case "motion-blur":
+                this.applyMotionBlur(encoder, inputView, outputView, depthView, w, h);
+                break;
+            case "edges":
+                this.applyEdges(encoder, inputView, outputView, depthView, w, h);
+                break;
+            case "gaussian-blur":
+                this.applyGaussianBlur(encoder, inputView, outputView, w, h);
+                break;
+            case "outline":
+                this.applyOutline(encoder, inputView, outputView, w, h);
+                break;
+            case "highlight":
+                this.applyHighlight(encoder, inputView, outputView, w, h);
+                break;
+            case "glow":
+                this.applyGlow(encoder, inputView, outputView, w, h);
+                break;
+            // New effects
+            case "lut":
+                this.applyLUT(encoder, inputView, outputView, w, h);
+                break;
+            case "white-balance":
+                this.applyCC(encoder, "white-balance", inputView, outputView, w, h, [this.wbTemperature, this.wbTint, 0, 0, 0, 0, 0, 0]);
+                break;
+            case "channel-mixer":
+                this.applyCC(encoder, "channel-mixer", inputView, outputView, w, h, [...this.cmWeights, this.cmMonochrome ? 1 : 0, 0, 0, 0]);
+                break;
+            case "split-tone":
+                this.applyCC(encoder, "split-tone", inputView, outputView, w, h, [...this.stShadow, ...this.stHighlight, this.stBalance, 0]);
+                break;
+            case "chromatic-aberration":
+                this.applyCC(encoder, "chromatic-aberration", inputView, outputView, w, h, [1 / w, 1 / h, this.caIntensity, this.caStart, this.caEnd, this.caCenterX, this.caCenterY, 0]);
+                break;
+            case "lens-distortion":
+                this.applyCC(encoder, "lens-distortion", inputView, outputView, w, h, [1 / w, 1 / h, this.ldIntensity, this.ldScale, this.ldChromaSplit, 0, 0, 0]);
+                break;
+            case "halftone":
+                this.applyCC(encoder, "halftone", inputView, outputView, w, h, [1 / w, 1 / h, this.htCellSize, this.htDotScale, this.htAngle, this.htMonochrome ? 1 : 0, 0, 0]);
+                break;
+            case "dithering":
+                this.applyDithering(encoder, inputView, outputView, w, h);
+                break;
+            case "watercolor":
+                this.applyWatercolor(encoder, inputView, outputView, w, h);
+                break;
+        }
+    }
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    // Scratch buffer for number[] uniform data — writeBuffer() captures the
+    // contents synchronously at call time, so a single reusable scratch is safe
+    // and avoids allocating a Float32Array per effect per frame.
+    wuScratch = new Float32Array(64);
+    wu(key, data) {
+        let arr;
+        if (data instanceof Float32Array) {
+            arr = data;
+        }
+        else {
+            if (this.wuScratch.length < data.length)
+                this.wuScratch = new Float32Array(data.length);
+            this.wuScratch.set(data);
+            arr = this.wuScratch.subarray(0, data.length);
+        }
+        this.device.queue.writeBuffer(this.uniforms[key], 0, arr);
+    }
+    bg(layout, entries) {
+        return this.device.createBindGroup({ layout, entries });
+    }
+    // ── Per-frame allocation caches ───────────────────────────────────────────
+    // createView()/createBindGroup() were called per effect per frame (~20+/frame).
+    // Views are immutable descriptors → cache per texture. Bind groups are pure
+    // functions of (layout, resources) → cache keyed by resource identity.
+    // Both caches are invalidated when targets are destroyed (resize/dispose).
+    viewCache = new Map();
+    bgCache = new Map();
+    objIds = new WeakMap();
+    nextObjId = 1;
+    idOf(o) {
+        let id = this.objIds.get(o);
+        if (id === undefined)
+            this.objIds.set(o, (id = this.nextObjId++));
+        return id;
+    }
+    /** Cached createView() for a stable texture (cleared on target rebuild). */
+    viewOf(tex) {
+        let v = this.viewCache.get(tex);
+        if (!v)
+            this.viewCache.set(tex, (v = tex.createView()));
+        return v;
+    }
+    /** Cached createBindGroup — entries must reference stable resources
+     *  (views from viewOf(), long-lived buffers/samplers). */
+    bgCached(layout, entries) {
+        let key = `${this.idOf(layout)}`;
+        entries.forEach((e) => {
+            const r = e.resource;
+            key += `|${e.binding}:`;
+            // GPUBufferBinding literals are fresh objects per call — key on the
+            // underlying buffer + offset/size instead.
+            if (r && typeof r === "object" && "buffer" in r) {
+                const b = r;
+                key += `b${this.idOf(b.buffer)}@${b.offset ?? 0}+${b.size ?? -1}`;
+            }
+            else {
+                key += `o${this.idOf(r)}`;
+            }
+        });
+        let bg = this.bgCache.get(key);
+        if (!bg)
+            this.bgCache.set(key, (bg = this.bg(layout, entries)));
+        return bg;
+    }
+    clearResourceCaches() {
+        this.viewCache.clear();
+        this.bgCache.clear();
+    }
+    pass(encoder, pipeline, bindGroup, outputView, w, h) {
+        const p = encoder.beginRenderPass({
+            colorAttachments: [{ view: outputView, clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: "clear", storeOp: "store" }],
+        });
+        p.setViewport(0, 0, w, h, 0, 1);
+        p.setScissorRect(0, 0, w, h);
+        p.setPipeline(pipeline);
+        p.setBindGroup(0, bindGroup);
+        p.setBindGroup(1, this.occluderBindGroup);
+        p.draw(3);
+        p.end();
+    }
+    // ── Simple cc-layout effects (color + dummy + sampler + uniform) ──────────
+    applyCC(encoder, key, inputView, outputView, w, h, data) {
+        this.wu(key, data);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.dummyTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms[key] } },
+        ]);
+        this.pass(encoder, this.pipelines[key], bg, outputView, w, h);
+    }
+    // ── Simple cd-layout effects (color + depth + sampler + uniform) ──────────
+    applyCD(encoder, key, inputView, outputView, depthView, w, h, data) {
+        this.wu(key, data);
+        const bg = this.bgCached(this.cdLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: depthView },
+            { binding: 2, resource: this.nearestSampler },
+            { binding: 3, resource: { buffer: this.uniforms[key] } },
+        ]);
+        this.pass(encoder, this.pipelines[key], bg, outputView, w, h);
+    }
+    // ── Afterimage ────────────────────────────────────────────────────────────
+    applyAfterimage(encoder, inputView, outputView, w, h) {
+        this.wu("afterimage", [1 / w, 1 / h, this.afterimageDamp]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.afterimageTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["afterimage"] } },
+        ]);
+        this.pass(encoder, this.pipelines["afterimage"], bg, outputView, w, h);
+    }
+    // ── ASCII ─────────────────────────────────────────────────────────────────
+    applyASCII(encoder, inputView, outputView, w, h) {
+        this.wu("ascii", [1 / w, 1 / h, this.asciiCellSize, this.asciiUseColor, w, h]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.glyphTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["ascii"] } },
+        ]);
+        this.pass(encoder, this.pipelines["ascii"], bg, outputView, w, h);
+    }
+    // ── Bloom (multi-MIP pyramid: downsample cascade + upsample composite) ───
+    applyBloom(encoder, inputView, outputView, w, h) {
+        const dummy = this.viewOf(this.dummyTex);
+        const mipCount = this.bloomMip.length;
+        if (mipCount === 0) {
+            // Fallback: no MIP targets allocated — blit input to output
+            this.applyBlitHDR(encoder, inputView, outputView, w, h);
+            return;
+        }
+        // Track dimensions for each MIP level
+        const mipW = [Math.max(1, w >> 1)];
+        const mipH = [Math.max(1, h >> 1)];
+        for (let i = 1; i < mipCount; i++) {
+            mipW.push(Math.max(1, mipW[i - 1] >> 1));
+            mipH.push(Math.max(1, mipH[i - 1] >> 1));
+        }
+        // ── Downsample cascade: full → ½ → ¼ → ⅛ → ... ──
+        // First downsample: bright-pass extraction from the full-res input
+        this.wu("bloom-downsample", [
+            1 / w, 1 / h, 1.0, this.bloomThreshold, this.bloomSoftKnee, 0, 0, 0,
+        ]);
+        this.pass(encoder, this.pipelines["bloom-downsample"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["bloom-downsample"] } },
+        ]), this.viewOf(this.bloomMip[0]), mipW[0], mipH[0]);
+        // Subsequent downsamples: plain downsample from previous MIP
+        for (let i = 1; i < mipCount; i++) {
+            const srcW = mipW[i - 1], srcH = mipH[i - 1];
+            this.wu("bloom-downsample", [
+                1 / srcW, 1 / srcH, 0.0, this.bloomThreshold, this.bloomSoftKnee, 0, 0, 0,
+            ]);
+            this.pass(encoder, this.pipelines["bloom-downsample"], this.bgCached(this.ccLayout, [
+                { binding: 0, resource: this.viewOf(this.bloomMip[i - 1]) }, { binding: 1, resource: dummy },
+                { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["bloom-downsample"] } },
+            ]), this.viewOf(this.bloomMip[i]), mipW[i], mipH[i]);
+        }
+        // ── Upsample cascade: smallest MIP → ... → ½ → composite to output ──
+        // Start from the smallest MIP, progressively upsample + additively blend
+        // into the next larger MIP. The upsample shader reads the lower-res MIP
+        // and adds it to the higher-res MIP (baseTex binding).
+        // We use a temp texture for the base to avoid reading+writing the same
+        // texture in the same render pass (WebGPU sync scope violation).
+        for (let i = mipCount - 1; i >= 1; i--) {
+            const srcW = mipW[i], srcH = mipH[i];
+            const dstW = mipW[i - 1], dstH = mipH[i - 1];
+            const weight = this.bloomMipWeights[Math.min(i, this.bloomMipWeights.length - 1)] ?? 0.5;
+            this.wu("bloom-upsample", [
+                1 / srcW, 1 / srcH, weight, 0,
+                this.bloomTint[0], this.bloomTint[1], this.bloomTint[2], 0,
+            ]);
+            // Blit bloomMip[i-1] → bloomTemp[i-1] to avoid read+write same texture
+            this.applyBlitHDR(encoder, this.viewOf(this.bloomMip[i - 1]), this.viewOf(this.bloomTemp[i - 1]), dstW, dstH);
+            this.pass(encoder, this.pipelines["bloom-upsample"], this.bgCached(this.ccLayout, [
+                { binding: 0, resource: this.viewOf(this.bloomMip[i]) },
+                { binding: 1, resource: this.viewOf(this.bloomTemp[i - 1]) },
+                { binding: 2, resource: this.linearSampler },
+                { binding: 3, resource: { buffer: this.uniforms["bloom-upsample"] } },
+            ]), this.viewOf(this.bloomMip[i - 1]), dstW, dstH);
+        }
+        // Final composite: upsample ½-res bloom → full-res, add to scene color
+        const srcW = mipW[0], srcH = mipH[0];
+        const finalWeight = this.bloomStrength * (this.bloomMipWeights[0] ?? 0.5);
+        this.wu("bloom-upsample", [
+            1 / srcW, 1 / srcH, finalWeight, 0,
+            this.bloomTint[0], this.bloomTint[1], this.bloomTint[2], 0,
+        ]);
+        // For the final pass, baseTex = inputView (scene color), output = outputView
+        // We need to read inputView as base — but the upsample shader writes base+bloom.
+        // Copy inputView to a dedicated scratch (bloomBase): outputView may be any
+        // ping-pong texture, so neither pingPong[0] nor pingPong[1] is guaranteed
+        // safe here (read+write same texture = WebGPU sync scope violation).
+        this.applyBlitHDR(encoder, inputView, this.viewOf(this.bloomBase), w, h);
+        this.pass(encoder, this.pipelines["bloom-upsample"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.bloomMip[0]) },
+            { binding: 1, resource: this.viewOf(this.bloomBase) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["bloom-upsample"] } },
+        ]), outputView, w, h);
+    }
+    // ── Bloom-soft (bright + blur H + blur V, stores result for tonemap) ──────
+    applyBloomSoft(encoder, inputView, outputView, w, h) {
+        const hw = Math.max(1, w >> 1), hh = Math.max(1, h >> 1);
+        const dummy = this.viewOf(this.dummyTex);
+        // Bright pass (dirX > 1.0 triggers bright-pass extraction)
+        this.wu("bloom-soft", [1 / w, 1 / h, 2.0, 0.0, this.bloomSoftThreshold, this.bloomSoftSoftThreshold]);
+        this.pass(encoder, this.pipelines["bloom-soft"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["bloom-soft"] } },
+        ]), this.viewOf(this.halfResA), hw, hh);
+        // Blur H
+        this.wu("bloom-soft", [1 / hw, 1 / hh, 1.0, 0.0, this.bloomSoftThreshold, this.bloomSoftSoftThreshold]);
+        this.pass(encoder, this.pipelines["bloom-soft"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.halfResA) }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["bloom-soft"] } },
+        ]), this.viewOf(this.halfResB), hw, hh);
+        // Blur V
+        this.wu("bloom-soft", [1 / hw, 1 / hh, 0.0, 1.0, this.bloomSoftThreshold, this.bloomSoftSoftThreshold]);
+        this.pass(encoder, this.pipelines["bloom-soft"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.halfResB) }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["bloom-soft"] } },
+        ]), this.viewOf(this.halfResA), hw, hh);
+        // Store result for tonemap
+        this.bloomSoftResult = this.viewOf(this.halfResA);
+        // Blit input to output (bloom-soft doesn't composite — tonemap does that)
+        // Use HDR blit since outputView is an HDR ping-pong texture in the chain
+        this.applyBlitHDR(encoder, inputView, outputView, w, h);
+    }
+    // ── Tonemap (color + bloom + ACES + exposure/gamma/contrast/sat/vignette) ─
+    applyTonemap(encoder, inputView, outputView, w, h) {
+        this.wu("tonemap", [
+            this.exposure, this.bloomSoftIntensity, this.gamma, this.contrast, this.saturation, this.vignette, 0, 0,
+        ]);
+        const bloomView = this.bloomSoftResult ?? this.viewOf(this.dummyTex);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: bloomView },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["tonemap"] } },
+        ]);
+        this.pass(encoder, this.pipelines["tonemap"], bg, outputView, w, h);
+    }
+    // ── TAA (color + velocity + history + YCoCg neighborhood clamp) ───────────
+    applyTAA(encoder, inputView, outputView, w, h) {
+        // When occluder rects changed, use blendFactor=1.0 for one frame to
+        // ignore stale history in the previously-occluded region (standard TAA
+        // reset pattern, same as camera cuts).
+        const blend = this.taaHistoryReset ? 1.0 : this.taaBlendFactor;
+        this.wu("taa", [1 / w, 1 / h, blend, this.taaVarianceClamp ? 1 : 0, this.taaJitterX, this.taaJitterY, 0, 0]);
+        const bg = this.bgCached(this.cvvhLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.sceneVelocity) },
+            { binding: 2, resource: this.viewOf(this.taaHistory) },
+            { binding: 3, resource: this.linearSampler },
+            { binding: 4, resource: { buffer: this.uniforms["taa"] } },
+        ]);
+        this.pass(encoder, this.pipelines["taa"], bg, outputView, w, h);
+        this.taaHistoryReset = false;
+    }
+    // ── SSAO (compute + blur + composite) ─────────────────────────────────────
+    applySSAO(encoder, inputView, outputView, depthView, w, h) {
+        // Write SSAO uniform (matrices + params)
+        this.writeSSAOUniform(w, h);
+        // Compute SSAO
+        const bg0 = this.bgCached(this.dnfnLayout, [
+            { binding: 0, resource: depthView },
+            { binding: 1, resource: this.viewOf(this.sceneNormals) },
+            { binding: 2, resource: this.viewOf(this.noiseTex) },
+            { binding: 3, resource: this.nearestSampler },
+            { binding: 4, resource: { buffer: this.uniforms["ssao"] } },
+        ]);
+        this.pass(encoder, this.pipelines["ssao"], bg0, this.viewOf(this.ssaoA), w, h);
+        // Blur SSAO
+        this.wu("ssao-blur", [1 / w, 1 / h]);
+        const bg1 = this.bgCached(this.cdLayout, [
+            { binding: 0, resource: this.viewOf(this.ssaoA) },
+            { binding: 1, resource: depthView },
+            { binding: 2, resource: this.nearestSampler },
+            { binding: 3, resource: { buffer: this.uniforms["ssao-blur"] } },
+        ]);
+        this.pass(encoder, this.pipelines["ssao-blur"], bg1, this.viewOf(this.ssaoB), w, h);
+        // Composite AO × color
+        this.wu("ssao-composite", [1 / w, 1 / h]);
+        const bg2 = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.ssaoB) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["ssao-composite"] } },
+        ]);
+        this.pass(encoder, this.pipelines["ssao-composite"], bg2, outputView, w, h);
+    }
+    writeSSAOUniform(w, h) {
+        // Layout: invProjection(16) + view(16) + projection(16) + directions + radius + bias
+        //         + noiseScale(2) + screenSize(2) + power + thickness + slices + pad(2) = 56 floats
+        const data = new Float32Array(64);
+        if (this.camInvProj)
+            data.set(this.camInvProj, 0);
+        if (this.camView)
+            data.set(this.camView, 16);
+        if (this.camProj)
+            data.set(this.camProj, 32);
+        data[48] = this.ssaoDirections;
+        data[49] = this.ssaoRadius;
+        data[50] = this.ssaoBias;
+        data[51] = 4; // noiseSize X
+        data[52] = 4; // noiseSize Y
+        data[53] = w;
+        data[54] = h;
+        data[55] = this.ssaoPower;
+        data[56] = this.ssaoThickness;
+        data[57] = this.ssaoSlices;
+        this.device.queue.writeBuffer(this.uniforms["ssao"], 0, data);
+    }
+    // ── SSR (color + normal + depth + ray march) ──────────────────────────────
+    applySSR(encoder, inputView, outputView, depthView, w, h) {
+        const data = new Float32Array(64);
+        if (this.camInvProj)
+            data.set(this.camInvProj, 0);
+        if (this.camView)
+            data.set(this.camView, 16);
+        if (this.camProj)
+            data.set(this.camProj, 32);
+        data[48] = this.ssrMaxSteps;
+        data[49] = this.ssrThickness;
+        data[50] = this.ssrMaxDistance;
+        data[51] = this.ssrFadeStart;
+        data[52] = this.ssrFadeEnd;
+        data[53] = this.ssrBinarySteps;
+        data[54] = this.ssrStride;
+        this.device.queue.writeBuffer(this.uniforms["ssr"], 0, data);
+        const bg = this.bgCached(this.cvdLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.sceneNormals) },
+            { binding: 2, resource: depthView },
+            { binding: 3, resource: this.nearestSampler },
+            { binding: 4, resource: { buffer: this.uniforms["ssr"] } },
+        ]);
+        this.pass(encoder, this.pipelines["ssr"], bg, outputView, w, h);
+    }
+    // ── Motion blur (color + velocity + depth) ────────────────────────────────
+    applyMotionBlur(encoder, inputView, outputView, depthView, w, h) {
+        this.wu("motion-blur", [1 / w, 1 / h, this.motionBlurIntensity, this.motionBlurMaxSamples]);
+        const bg = this.bgCached(this.cvdLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.sceneVelocity) },
+            { binding: 2, resource: depthView },
+            { binding: 3, resource: this.nearestSampler },
+            { binding: 4, resource: { buffer: this.uniforms["motion-blur"] } },
+        ]);
+        this.pass(encoder, this.pipelines["motion-blur"], bg, outputView, w, h);
+    }
+    // ── Edges (color + normal + depth) ────────────────────────────────────────
+    applyEdges(encoder, inputView, outputView, depthView, w, h) {
+        this.wu("edges", [1 / w, 1 / h, this.edgesThreshold, this.edgesOpacity, 0, 0, 0, 0, ...this.edgesEdgeColor, 0, 0]);
+        const bg = this.bgCached(this.cvdLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.sceneNormals) },
+            { binding: 2, resource: depthView },
+            { binding: 3, resource: this.nearestSampler },
+            { binding: 4, resource: { buffer: this.uniforms["edges"] } },
+        ]);
+        this.pass(encoder, this.pipelines["edges"], bg, outputView, w, h);
+    }
+    // ── Gaussian blur (two-pass: H then V) ────────────────────────────────────
+    applyGaussianBlur(encoder, inputView, outputView, w, h) {
+        const dummy = this.viewOf(this.dummyTex);
+        // H pass
+        this.wu("gaussian-blur", [1 / w, 1 / h, 1.0, 0.0, this.gaussianBlurRadius]);
+        this.pass(encoder, this.pipelines["gaussian-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["gaussian-blur"] } },
+        ]), this.viewOf(this.blurA), w, h);
+        // V pass
+        this.wu("gaussian-blur", [1 / w, 1 / h, 0.0, 1.0, this.gaussianBlurRadius]);
+        this.pass(encoder, this.pipelines["gaussian-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.blurA) }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["gaussian-blur"] } },
+        ]), outputView, w, h);
+    }
+    // ── Outline (color + mask) ────────────────────────────────────────────────
+    applyOutline(encoder, inputView, outputView, w, h) {
+        this.wu("outline", [1 / w, 1 / h, this.outlineWidth, this.outlineOpacity, 0, 0, 0, 0, ...this.outlineColor, 0, 0]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.sceneMask) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["outline"] } },
+        ]);
+        this.pass(encoder, this.pipelines["outline"], bg, outputView, w, h);
+    }
+    // ── Highlight (blur H + blur V + composite) ───────────────────────────────
+    applyHighlight(encoder, inputView, outputView, w, h) {
+        const dummy = this.viewOf(this.dummyTex);
+        const maskView = this.viewOf(this.sceneMask);
+        // Blur H
+        this.wu("highlight-blur", [1 / w, 1 / h, 1.0, 0.0, this.highlightBlurRadius]);
+        this.pass(encoder, this.pipelines["highlight-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: maskView }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["highlight-blur"] } },
+        ]), this.viewOf(this.blurA), w, h);
+        // Blur V
+        this.wu("highlight-blur", [1 / w, 1 / h, 0.0, 1.0, this.highlightBlurRadius]);
+        this.pass(encoder, this.pipelines["highlight-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.blurA) }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["highlight-blur"] } },
+        ]), this.viewOf(this.blurB), w, h);
+        // Composite
+        this.wu("highlight-composite", [this.highlightIntensity, this.highlightInnerOpacity]);
+        const bg = this.bgCached(this.cvvhLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.blurB) },
+            { binding: 2, resource: maskView },
+            { binding: 3, resource: this.linearSampler },
+            { binding: 4, resource: { buffer: this.uniforms["highlight-composite"] } },
+        ]);
+        this.pass(encoder, this.pipelines["highlight-composite"], bg, outputView, w, h);
+    }
+    // ── Glow (blur H + blur V + composite) ────────────────────────────────────
+    applyGlow(encoder, inputView, outputView, w, h) {
+        const dummy = this.viewOf(this.dummyTex);
+        const maskView = this.viewOf(this.sceneMask);
+        // Blur H
+        this.wu("glow-blur", [1 / w, 1 / h, 1.0, 0.0, this.glowBlurRadius]);
+        this.pass(encoder, this.pipelines["glow-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: maskView }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["glow-blur"] } },
+        ]), this.viewOf(this.blurA), w, h);
+        // Blur V
+        this.wu("glow-blur", [1 / w, 1 / h, 0.0, 1.0, this.glowBlurRadius]);
+        this.pass(encoder, this.pipelines["glow-blur"], this.bgCached(this.ccLayout, [
+            { binding: 0, resource: this.viewOf(this.blurA) }, { binding: 1, resource: dummy },
+            { binding: 2, resource: this.linearSampler }, { binding: 3, resource: { buffer: this.uniforms["glow-blur"] } },
+        ]), this.viewOf(this.blurB), w, h);
+        // Composite
+        this.wu("glow-composite", [this.glowIntensity]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.blurB) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["glow-composite"] } },
+        ]);
+        this.pass(encoder, this.pipelines["glow-composite"], bg, outputView, w, h);
+    }
+    // ── LUT (3D color grading — dedicated lutLayout with texture_3d) ──────────
+    applyLUT(encoder, inputView, outputView, w, h) {
+        if (!this.lutView) {
+            // No LUT loaded — blit input to output (HDR ping-pong in chain)
+            this.applyBlitHDR(encoder, inputView, outputView, w, h);
+            return;
+        }
+        this.wu("lut", [this.lutEnabled ? 1 : 0, this.lutSize, 0, 0]);
+        const bg = this.bgCached(this.lutLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.lutView },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["lut"] } },
+        ]);
+        this.pass(encoder, this.pipelines["lut"], bg, outputView, w, h);
+    }
+    // ── Dithering (color + noise + sampler + uniform, ccLayout) ───────────────
+    applyDithering(encoder, inputView, outputView, w, h) {
+        this.wu("dithering", [1 / w, 1 / h, this.dMode, this.dStrength, this.dLevels, 0, 0, 0]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.noiseTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["dithering"] } },
+        ]);
+        this.pass(encoder, this.pipelines["dithering"], bg, outputView, w, h);
+    }
+    // ── Watercolor (color + noise + sampler + uniform, ccLayout) ──────────────
+    applyWatercolor(encoder, inputView, outputView, w, h) {
+        this.wu("watercolor", [1 / w, 1 / h, this.wcEdgeStrength, this.wcPaperScale, this.wcBlend, 0, 0, 0]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.noiseTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["watercolor"] } },
+        ]);
+        this.pass(encoder, this.pipelines["watercolor"], bg, outputView, w, h);
+    }
+    // ── Blit (copy rgba16float → canvas format) ───────────────────────────────
+    applyBlit(encoder, inputView, outputView, w, h) {
+        this.wu("blit", [1 / w, 1 / h]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.dummyTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["blit"] } },
+        ]);
+        this.pass(encoder, this.pipelines["blit"], bg, outputView, w, h);
+    }
+    /** HDR blit variant for intermediate chain passes (writes to rgba16float ping-pong). */
+    applyBlitHDR(encoder, inputView, outputView, w, h) {
+        this.wu("blit", [1 / w, 1 / h]);
+        const bg = this.bgCached(this.ccLayout, [
+            { binding: 0, resource: inputView },
+            { binding: 1, resource: this.viewOf(this.dummyTex) },
+            { binding: 2, resource: this.linearSampler },
+            { binding: 3, resource: { buffer: this.uniforms["blit"] } },
+        ]);
+        this.pass(encoder, this.pipelines["blit-hdr"], bg, outputView, w, h);
+    }
+    // ── Destroy ───────────────────────────────────────────────────────────────
+    destroy() {
+        this.destroyAllTargets();
+        this.dummyTex?.destroy();
+        this.glyphTex?.destroy();
+        this.noiseTex?.destroy();
+        this.lutTexture?.destroy();
+        this.occluderUniform?.destroy();
+        for (const key in this.uniforms)
+            this.uniforms[key]?.destroy();
+        for (const key in this.pipelines)
+            this.pipelines[key]?.destroy?.();
+        // Custom effects
+        for (const [, e] of this.customEffects.entries()) {
+            e.pipeline.destroy?.();
+            e.uniform.destroy();
+        }
+        this.customEffects.clear();
+    }
+}