ugly-game 0.2.0 → 0.3.0

package/dist/gpuSpot.js

@@ -0,0 +1,213 @@
+// Render IR increment 6 — POINT-LIGHT (spotlight) SHADOWS. Pairs increment 4 (many lights)
+// with increment 5 (shadows): now the positional lights themselves cast real shadows. Full
+// omnidirectional cube shadows for 1,600 lights is infeasible (6 faces each), so this is the
+// tractable, honest form — a handful of shadow-casting SPOTLIGHTS, each with its own 2D shadow
+// map (a perspective light view) packed into a depth-2d-ARRAY. Same PCF-comparison machinery
+// as the sun, extended to a positional light with a cone + distance falloff, times L lights.
+import { CUBE } from './gpuShadow';
+export const NUM_SPOTS = 6;
+const SHADOW_SIZE = 1536;
+const COMMON = /* wgsl */ `
+struct Inst { pos: vec4<f32>, scl: vec4<f32> };  // pos.w = hue (<0 ⇒ ground)
+const CUBE_POS = array<vec3<f32>, 36>(${CUBE.pos});
+const CUBE_NRM = array<vec3<f32>, 36>(${CUBE.nrm});
+fn worldOf(inst: Inst, vi: u32) -> vec3<f32> { return inst.pos.xyz + CUBE_POS[vi] * inst.scl.xyz; }
+`;
+// Shadow pass: one light's perspective view-proj (bound per layer), depth only.
+const SHADOW_WGSL = COMMON + /* wgsl */ `
+@group(0) @binding(0) var<uniform> lightVP: mat4x4<f32>;
+@group(0) @binding(1) var<storage, read> insts: array<Inst>;
+@vertex fn vs(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> @builtin(position) vec4<f32> {
+  return lightVP * vec4(worldOf(insts[ii], vi), 1.0);
+}
+`;
+const MAIN_WGSL = COMMON + /* wgsl */ `
+struct U {
+  camVP: mat4x4<f32>,
+  lightVP: array<mat4x4<f32>, ${NUM_SPOTS}>,
+  pos: array<vec4<f32>, ${NUM_SPOTS}>,     // xyz, w = range
+  dir: array<vec4<f32>, ${NUM_SPOTS}>,     // xyz axis, w = cosOuter
+  col: array<vec4<f32>, ${NUM_SPOTS}>,     // rgb, w = cosInner
+  params: vec4<f32>,                        // x = ambient, y = shadow size
+};
+@group(0) @binding(0) var<uniform> u: U;
+@group(0) @binding(1) var<storage, read> insts: array<Inst>;
+@group(0) @binding(2) var shadowMap: texture_depth_2d_array;
+@group(0) @binding(3) var shadowSamp: sampler_comparison;
+
+struct VOut { @builtin(position) clip: vec4<f32>, @location(0) world: vec3<f32>, @location(1) nrm: vec3<f32>, @location(2) hue: f32 };
+
+@vertex fn vs(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> VOut {
+  let inst = insts[ii];
+  let world = worldOf(inst, vi);
+  var o: VOut;
+  o.clip = u.camVP * vec4(world, 1.0);
+  o.world = world; o.nrm = normalize(CUBE_NRM[vi] / inst.scl.xyz); o.hue = inst.pos.w;
+  return o;
+}
+fn hsv(hh: f32) -> vec3<f32> {
+  let h = fract(hh) * 6.0; let x = 1.0 - abs((h % 2.0) - 1.0);
+  if (h < 1.0) { return vec3(1.0, x, 0.0); } if (h < 2.0) { return vec3(x, 1.0, 0.0); }
+  if (h < 3.0) { return vec3(0.0, 1.0, x); } if (h < 4.0) { return vec3(0.0, x, 1.0); }
+  if (h < 5.0) { return vec3(x, 0.0, 1.0); } return vec3(1.0, 0.0, x);
+}
+fn shadowPCF(i: i32, world: vec3<f32>, N: vec3<f32>, ndl: f32) -> f32 {
+  // Normal-offset bias: nudge the sample point along the surface normal (more the more grazing
+  // the light) so the occluder depth clears the receiver without peter-panning. Far more stable
+  // under a moving light than a pure depth bias — this is the main flicker fix.
+  let wo = world + N * (0.06 + 0.22 * (1.0 - ndl));
+  let lp = u.lightVP[i] * vec4(wo, 1.0);
+  let proj = lp.xyz / lp.w;
+  let uv = proj.xy * vec2(0.5, -0.5) + vec2(0.5, 0.5);
+  if (proj.z > 1.0 || proj.z < 0.0 || uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) { return 1.0; }
+  let bias = 0.0006;
+  let texel = 1.0 / u.params.y;
+  var s = 0.0;
+  for (var dy = -1; dy <= 1; dy = dy + 1) {
+    for (var dx = -1; dx <= 1; dx = dx + 1) {
+      s = s + textureSampleCompareLevel(shadowMap, shadowSamp, uv + vec2(f32(dx), f32(dy)) * texel, i, proj.z - bias);
+    }
+  }
+  return s / 9.0;
+}
+@fragment fn fs(v: VOut) -> @location(0) vec4<f32> {
+  let N = normalize(v.nrm);
+  let base = select(mix(vec3(0.32), hsv(v.hue), 0.55), vec3(0.5, 0.52, 0.56), v.hue < 0.0);
+  var acc = vec3(0.0);
+  for (var i = 0; i < ${NUM_SPOTS}; i = i + 1) {
+    let toL = u.pos[i].xyz - v.world;
+    let d = length(toL);
+    if (d > u.pos[i].w) { continue; }
+    let l = toL / d;
+    let ndl = max(dot(N, l), 0.0);
+    if (ndl <= 0.0) { continue; }
+    let cosA = dot(-l, u.dir[i].xyz);                          // frag direction vs cone axis
+    let cone = smoothstep(u.dir[i].w, u.col[i].w, cosA);        // outer→inner
+    if (cone <= 0.0) { continue; }
+    let atten = cone * (1.0 - d / u.pos[i].w);
+    acc = acc + u.col[i].xyz * (ndl * atten * shadowPCF(i, v.world, N, ndl));
+  }
+  let lit = base * (u.params.x + acc);
+  return vec4(pow(clamp(lit, vec3(0.0), vec3(1.0)), vec3(0.4545)), 1.0);
+}
+`;
+export class GpuSpotRenderer {
+    device;
+    instBuf;
+    uBuf;
+    lightVPBufs = [];
+    shadowTex;
+    layerViews = [];
+    shadowPipe;
+    mainPipe;
+    shadowBGL;
+    mainBGL;
+    shadowSampler;
+    shadowBGs = [];
+    mainBG;
+    count = 0;
+    u = new Float32Array(192);
+    vpScratch = new Float32Array(16);
+    constructor(device, format) {
+        this.device = device;
+        this.uBuf = device.createBuffer({ size: this.u.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        for (let i = 0; i < NUM_SPOTS; i++)
+            this.lightVPBufs.push(device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }));
+        this.shadowTex = device.createTexture({ size: [SHADOW_SIZE, SHADOW_SIZE, NUM_SPOTS], format: 'depth32float', usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING });
+        for (let i = 0; i < NUM_SPOTS; i++)
+            this.layerViews.push(this.shadowTex.createView({ dimension: '2d', baseArrayLayer: i, arrayLayerCount: 1 }));
+        const shadowMod = device.createShaderModule({ code: SHADOW_WGSL });
+        const mainMod = device.createShaderModule({ code: MAIN_WGSL });
+        this.shadowBGL = device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
+                { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } },
+            ] });
+        this.shadowPipe = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.shadowBGL] }),
+            vertex: { module: shadowMod, entryPoint: 'vs' },
+            primitive: { topology: 'triangle-list', cullMode: 'none' },
+            depthStencil: { format: 'depth32float', depthWriteEnabled: true, depthCompare: 'less' },
+        });
+        this.mainBGL = device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } },
+                { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'depth', viewDimension: '2d-array' } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'comparison' } },
+            ] });
+        this.mainPipe = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.mainBGL] }),
+            vertex: { module: mainMod, entryPoint: 'vs' },
+            fragment: { module: mainMod, entryPoint: 'fs', targets: [{ format }] },
+            primitive: { topology: 'triangle-list', cullMode: 'none' },
+            depthStencil: { format: 'depth24plus', depthWriteEnabled: true, depthCompare: 'less' },
+        });
+        this.shadowSampler = device.createSampler({ compare: 'less' });
+        this.u[185] = SHADOW_SIZE; // params.y — texel size for PCF (params vec4 starts at float 184: x=184,y=185,z=186,w=187)
+    }
+    setScene(instances) {
+        this.count = instances.length;
+        const data = new Float32Array(this.count * 8);
+        for (let i = 0; i < this.count; i++) {
+            const c = instances[i], o = i * 8;
+            data[o] = c.x;
+            data[o + 1] = c.y;
+            data[o + 2] = c.z;
+            data[o + 3] = c.hue;
+            data[o + 4] = c.sx;
+            data[o + 5] = c.sy;
+            data[o + 6] = c.sz;
+        }
+        this.instBuf = this.device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this.device.queue.writeBuffer(this.instBuf, 0, data);
+        this.shadowBGs = this.lightVPBufs.map((b) => this.device.createBindGroup({ layout: this.shadowBGL, entries: [
+                { binding: 0, resource: { buffer: b } }, { binding: 1, resource: { buffer: this.instBuf } }
+            ] }));
+        this.mainBG = this.device.createBindGroup({ layout: this.mainBGL, entries: [
+                { binding: 0, resource: { buffer: this.uBuf } }, { binding: 1, resource: { buffer: this.instBuf } },
+                { binding: 2, resource: this.shadowTex.createView({ dimension: '2d-array' }) }, { binding: 3, resource: this.shadowSampler }
+            ] });
+    }
+    /** camVP: Float32Array(16). spotVPs: NUM_SPOTS × Float32Array(16) (perspective light views). */
+    frame(enc, colorView, sceneDepth, camVP, spots, spotVPs, ambient) {
+        this.u.set(camVP, 0);
+        for (let i = 0; i < NUM_SPOTS; i++) {
+            this.u.set(spotVPs[i], 16 + i * 16);
+            const s = spots[i];
+            this.u[112 + i * 4] = s.px;
+            this.u[113 + i * 4] = s.py;
+            this.u[114 + i * 4] = s.pz;
+            this.u[115 + i * 4] = s.range;
+            this.u[136 + i * 4] = s.dx;
+            this.u[137 + i * 4] = s.dy;
+            this.u[138 + i * 4] = s.dz;
+            this.u[139 + i * 4] = s.cosOuter;
+            this.u[160 + i * 4] = s.r;
+            this.u[161 + i * 4] = s.g;
+            this.u[162 + i * 4] = s.b;
+            this.u[163 + i * 4] = s.cosInner;
+            this.vpScratch.set(spotVPs[i]);
+            this.device.queue.writeBuffer(this.lightVPBufs[i], 0, this.vpScratch);
+        }
+        this.u[184] = ambient;
+        this.device.queue.writeBuffer(this.uBuf, 0, this.u);
+        // L shadow passes — one per spotlight, into its own array layer.
+        for (let i = 0; i < NUM_SPOTS; i++) {
+            const sp = enc.beginRenderPass({ colorAttachments: [], depthStencilAttachment: {
+                    view: this.layerViews[i], depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store'
+                } });
+            sp.setPipeline(this.shadowPipe);
+            sp.setBindGroup(0, this.shadowBGs[i]);
+            sp.draw(36, this.count);
+            sp.end();
+        }
+        // Main camera pass.
+        const mp = enc.beginRenderPass({
+            colorAttachments: [{ view: colorView, clearValue: { r: 0.02, g: 0.025, b: 0.035, a: 1 }, loadOp: 'clear', storeOp: 'store' }],
+            depthStencilAttachment: { view: sceneDepth, depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' }
+        });
+        mp.setPipeline(this.mainPipe);
+        mp.setBindGroup(0, this.mainBG);
+        mp.draw(36, this.count);
+        mp.end();
+    }
+}

package/dist/gpuTaa.d.ts

@@ -0,0 +1,34 @@
+import type { CubeInstance } from './gpuShadow';
+export type { CubeInstance } from './gpuShadow';
+export declare class GpuTaaRenderer {
+    private device;
+    private w;
+    private h;
+    private instBuf;
+    private count;
+    private mBuf;
+    private rBuf;
+    private m;
+    private r;
+    private scenePipe;
+    private resolvePipe;
+    private sceneBGL;
+    private resolveBGL;
+    private sceneBG;
+    private sampler;
+    private colorTex?;
+    private colorView;
+    private motionTex?;
+    private motionView;
+    private depthTex?;
+    private depthView;
+    private hist;
+    private histView;
+    private resolveBG;
+    private ping;
+    constructor(device: GPUDevice, format: GPUTextureFormat);
+    resize(w: number, h: number): void;
+    setScene(instances: CubeInstance[]): void;
+    /** currVP/prevVP: Float32Array(16), UNjittered. jitter: clip-space sub-pixel offset. */
+    frame(enc: GPUCommandEncoder, swapView: GPUTextureView, currVP: Float32Array, prevVP: Float32Array, jitter: [number, number], sunDir: [number, number, number], ambient: number, taaOn: boolean, blend: number): void;
+}

package/dist/gpuTaa.js

@@ -0,0 +1,247 @@
+// Render IR increment 7 — TEMPORAL ANTI-ALIASING (TAA). The last of GAME.md §3.6's named
+// "biggest look gaps", and the proper fix for the residual shadow/edge shimmer of a moving
+// camera. The engine complexity here is the temporal pipeline, not the shading:
+//   1. jitter the projection a sub-pixel amount each frame (Halton sequence),
+//   2. render scene color + per-pixel MOTION VECTORS to offscreen targets (MRT),
+//   3. reproject last frame's history through the motion vectors, clamp it to the current
+//      pixel's neighborhood colour box (kills ghosting), and blend ~90% history / 10% current.
+// Averaging the jittered samples over time = anti-aliasing + temporal stability, ~free per frame.
+//
+// Reuses the cube geometry from gpuShadow. Sun-lit (no shadow map here) to keep the module
+// focused on the temporal machinery. `?taa=0` on the page disables jitter + accumulation so the
+// raw aliased image is visible for comparison.
+import { CUBE } from './gpuShadow';
+const COLOR_FMT = 'rgba16float';
+const MOTION_FMT = 'rg16float';
+const SCENE_WGSL = /* wgsl */ `
+struct Inst { pos: vec4<f32>, scl: vec4<f32> };
+struct MU {
+  currVP: mat4x4<f32>,
+  prevVP: mat4x4<f32>,
+  jitter: vec4<f32>,   // xy = clip-space sub-pixel jitter
+  sun: vec4<f32>,      // xyz = direction, w = ambient
+};
+@group(0) @binding(0) var<uniform> mu: MU;
+@group(0) @binding(1) var<storage, read> insts: array<Inst>;
+const CUBE_POS = array<vec3<f32>, 36>(${CUBE.pos});
+const CUBE_NRM = array<vec3<f32>, 36>(${CUBE.nrm});
+
+struct VOut {
+  @builtin(position) clip: vec4<f32>,
+  @location(0) curr: vec4<f32>,   // unjittered current clip (for motion)
+  @location(1) prev: vec4<f32>,   // previous-frame clip (for motion)
+  @location(2) nrm: vec3<f32>,
+  @location(3) hue: f32,
+};
+@vertex fn vs(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> VOut {
+  let inst = insts[ii];
+  let world = inst.pos.xyz + CUBE_POS[vi] * inst.scl.xyz;
+  let c = mu.currVP * vec4(world, 1.0);
+  var o: VOut;
+  o.curr = c;
+  o.prev = mu.prevVP * vec4(world, 1.0);
+  var cj = c;                            // jitter is added post-projection, scaled by w
+  cj.x = cj.x + mu.jitter.x * c.w;
+  cj.y = cj.y + mu.jitter.y * c.w;
+  o.clip = cj;
+  o.nrm = normalize(CUBE_NRM[vi] / inst.scl.xyz);
+  o.hue = inst.pos.w;
+  return o;
+}
+fn hsv(hh: f32) -> vec3<f32> {
+  let h = fract(hh) * 6.0; let x = 1.0 - abs((h % 2.0) - 1.0);
+  if (h < 1.0) { return vec3(1.0, x, 0.0); } if (h < 2.0) { return vec3(x, 1.0, 0.0); }
+  if (h < 3.0) { return vec3(0.0, 1.0, x); } if (h < 4.0) { return vec3(0.0, x, 1.0); }
+  if (h < 5.0) { return vec3(x, 0.0, 1.0); } return vec3(1.0, 0.0, x);
+}
+struct FOut { @location(0) color: vec4<f32>, @location(1) motion: vec2<f32> };
+@fragment fn fs(v: VOut) -> FOut {
+  let N = normalize(v.nrm);
+  let ndl = max(dot(N, -normalize(mu.sun.xyz)), 0.0);
+  let base = select(mix(vec3(0.30), hsv(v.hue), 0.6), vec3(0.55, 0.57, 0.62), v.hue < 0.0);
+  let lit = base * (mu.sun.w + ndl);
+  let currUV = v.curr.xy / v.curr.w * vec2(0.5, -0.5) + vec2(0.5, 0.5);
+  let prevUV = v.prev.xy / v.prev.w * vec2(0.5, -0.5) + vec2(0.5, 0.5);
+  var o: FOut;
+  o.color = vec4(lit, 1.0);
+  o.motion = currUV - prevUV;             // prevUV = currUV - motion
+  return o;
+}
+`;
+const RESOLVE_WGSL = /* wgsl */ `
+struct RU { texel: vec4<f32>, ctrl: vec4<f32> };  // texel.xy = 1/size; ctrl.x = history blend, ctrl.y = taa on
+@group(0) @binding(0) var<uniform> ru: RU;
+@group(0) @binding(1) var histSamp: sampler;
+@group(0) @binding(2) var colorTex: texture_2d<f32>;
+@group(0) @binding(3) var motionTex: texture_2d<f32>;
+@group(0) @binding(4) var histTex: texture_2d<f32>;
+
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4<f32> {
+  var p = array<vec2<f32>, 3>(vec2(-1.0, -1.0), vec2(3.0, -1.0), vec2(-1.0, 3.0));
+  return vec4(p[vi], 0.0, 1.0);
+}
+struct ROut { @location(0) screen: vec4<f32>, @location(1) hist: vec4<f32> };
+@fragment fn fs(@builtin(position) fc: vec4<f32>) -> ROut {
+  let px = vec2<i32>(floor(fc.xy));
+  let cur = textureLoad(colorTex, px, 0).rgb;
+  var o: ROut;
+  if (ru.ctrl.y < 0.5) { o.screen = vec4(cur, 1.0); o.hist = vec4(cur, 1.0); return o; }
+  // 3×3 neighborhood colour box of the current frame (ghosting clamp).
+  var mn = cur; var mx = cur;
+  for (var dy = -1; dy <= 1; dy = dy + 1) {
+    for (var dx = -1; dx <= 1; dx = dx + 1) {
+      let c = textureLoad(colorTex, px + vec2<i32>(dx, dy), 0).rgb;
+      mn = min(mn, c); mx = max(mx, c);
+    }
+  }
+  let motion = textureLoad(motionTex, px, 0).xy;
+  let uv = fc.xy * ru.texel.xy;
+  let prevUV = uv - motion;
+  var outc = cur;
+  if (prevUV.x >= 0.0 && prevUV.x <= 1.0 && prevUV.y >= 0.0 && prevUV.y <= 1.0) {
+    let hist = clamp(textureSampleLevel(histTex, histSamp, prevUV, 0.0).rgb, mn, mx);
+    outc = mix(cur, hist, ru.ctrl.x);     // ctrl.x ≈ 0.9 ⇒ 10% current, 90% reprojected history
+  }
+  o.screen = vec4(outc, 1.0); o.hist = vec4(outc, 1.0);
+  return o;
+}
+`;
+export class GpuTaaRenderer {
+    device;
+    w = 0;
+    h = 0;
+    instBuf;
+    count = 0;
+    mBuf;
+    rBuf;
+    m = new Float32Array(44); // 2×mat4 + 2×vec4
+    r = new Float32Array(8);
+    scenePipe;
+    resolvePipe;
+    sceneBGL;
+    resolveBGL;
+    sceneBG;
+    sampler;
+    colorTex;
+    colorView;
+    motionTex;
+    motionView;
+    depthTex;
+    depthView;
+    hist = [];
+    histView = [];
+    resolveBG = [];
+    ping = 0;
+    constructor(device, format) {
+        this.device = device;
+        this.mBuf = device.createBuffer({ size: this.m.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.rBuf = device.createBuffer({ size: this.r.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' });
+        const sceneMod = device.createShaderModule({ code: SCENE_WGSL });
+        const resolveMod = device.createShaderModule({ code: RESOLVE_WGSL });
+        this.sceneBGL = device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } },
+                { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } },
+            ] });
+        this.scenePipe = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.sceneBGL] }),
+            vertex: { module: sceneMod, entryPoint: 'vs' },
+            fragment: { module: sceneMod, entryPoint: 'fs', targets: [{ format: COLOR_FMT }, { format: MOTION_FMT }] },
+            primitive: { topology: 'triangle-list', cullMode: 'none' },
+            depthStencil: { format: 'depth24plus', depthWriteEnabled: true, depthCompare: 'less' },
+        });
+        this.resolveBGL = device.createBindGroupLayout({ entries: [
+                { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'filtering' } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
+            ] });
+        this.resolvePipe = device.createRenderPipeline({
+            layout: device.createPipelineLayout({ bindGroupLayouts: [this.resolveBGL] }),
+            vertex: { module: resolveMod, entryPoint: 'vs' },
+            fragment: { module: resolveMod, entryPoint: 'fs', targets: [{ format }, { format: COLOR_FMT }] },
+            primitive: { topology: 'triangle-list' },
+        });
+    }
+    resize(w, h) {
+        this.w = w;
+        this.h = h;
+        for (const t of [this.colorTex, this.motionTex, this.depthTex, ...this.hist])
+            t?.destroy();
+        const mk = (format, usage) => this.device.createTexture({ size: [w, h], format, usage });
+        const RA = GPUTextureUsage.RENDER_ATTACHMENT, TB = GPUTextureUsage.TEXTURE_BINDING;
+        this.colorTex = mk(COLOR_FMT, RA | TB);
+        this.colorView = this.colorTex.createView();
+        this.motionTex = mk(MOTION_FMT, RA | TB);
+        this.motionView = this.motionTex.createView();
+        this.depthTex = mk('depth24plus', RA);
+        this.depthView = this.depthTex.createView();
+        this.hist = [mk(COLOR_FMT, RA | TB), mk(COLOR_FMT, RA | TB)];
+        this.histView = this.hist.map((t) => t.createView());
+        // Resolve bind group i READS history[i] and (this frame) WRITES history[1-i].
+        this.resolveBG = [0, 1].map((i) => this.device.createBindGroup({ layout: this.resolveBGL, entries: [
+                { binding: 0, resource: { buffer: this.rBuf } }, { binding: 1, resource: this.sampler },
+                { binding: 2, resource: this.colorView }, { binding: 3, resource: this.motionView }, { binding: 4, resource: this.histView[i] }
+            ] }));
+        this.ping = 0;
+    }
+    setScene(instances) {
+        this.count = instances.length;
+        const data = new Float32Array(this.count * 8);
+        for (let i = 0; i < this.count; i++) {
+            const c = instances[i], o = i * 8;
+            data[o] = c.x;
+            data[o + 1] = c.y;
+            data[o + 2] = c.z;
+            data[o + 3] = c.hue;
+            data[o + 4] = c.sx;
+            data[o + 5] = c.sy;
+            data[o + 6] = c.sz;
+        }
+        this.instBuf = this.device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this.device.queue.writeBuffer(this.instBuf, 0, data);
+        this.sceneBG = this.device.createBindGroup({ layout: this.sceneBGL, entries: [
+                { binding: 0, resource: { buffer: this.mBuf } }, { binding: 1, resource: { buffer: this.instBuf } }
+            ] });
+    }
+    /** currVP/prevVP: Float32Array(16), UNjittered. jitter: clip-space sub-pixel offset. */
+    frame(enc, swapView, currVP, prevVP, jitter, sunDir, ambient, taaOn, blend) {
+        this.m.set(currVP, 0);
+        this.m.set(prevVP, 16);
+        this.m[32] = taaOn ? jitter[0] : 0;
+        this.m[33] = taaOn ? jitter[1] : 0;
+        this.m[36] = sunDir[0];
+        this.m[37] = sunDir[1];
+        this.m[38] = sunDir[2];
+        this.m[39] = ambient;
+        this.device.queue.writeBuffer(this.mBuf, 0, this.m);
+        this.r[0] = 1 / this.w;
+        this.r[1] = 1 / this.h;
+        this.r[4] = blend;
+        this.r[5] = taaOn ? 1 : 0;
+        this.device.queue.writeBuffer(this.rBuf, 0, this.r);
+        // Scene → color + motion (MRT), jittered.
+        const sp = enc.beginRenderPass({
+            colorAttachments: [
+                { view: this.colorView, clearValue: { r: 0.02, g: 0.025, b: 0.035, a: 1 }, loadOp: 'clear', storeOp: 'store' },
+                { view: this.motionView, clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: 'clear', storeOp: 'store' }
+            ],
+            depthStencilAttachment: { view: this.depthView, depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' }
+        });
+        sp.setPipeline(this.scenePipe);
+        sp.setBindGroup(0, this.sceneBG);
+        sp.draw(36, this.count);
+        sp.end();
+        // Resolve: read history[ping], write screen + history[1-ping].
+        const rp = enc.beginRenderPass({ colorAttachments: [
+                { view: swapView, clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: 'clear', storeOp: 'store' },
+                { view: this.histView[1 - this.ping], loadOp: 'clear', storeOp: 'store' }
+            ] });
+        rp.setPipeline(this.resolvePipe);
+        rp.setBindGroup(0, this.resolveBG[this.ping]);
+        rp.draw(3);
+        rp.end();
+        this.ping = 1 - this.ping;
+    }
+}

package/dist/gpuTerrain.d.ts

@@ -0,0 +1,25 @@
+import { type GpuShadowMap } from './gpuShadowMap';
+export declare class GpuTerrainRenderer {
+    private device;
+    private terrainPipe;
+    private waterPipe;
+    private occPipe;
+    private uBuf;
+    private uBG;
+    private uBGw;
+    private lightBuf;
+    private occBG;
+    private posB;
+    private nrmB;
+    private colB;
+    private idxB;
+    private idxCount;
+    private waterB;
+    private texel;
+    constructor(device: GPUDevice, format: GPUTextureFormat, shadow: GpuShadowMap);
+    /** Replace the terrain mesh (positions/normals/colors are Nx3, indices triangle list). */
+    setTerrain(positions: Float32Array, normals: Float32Array, colors: Float32Array, indices: Uint32Array): void;
+    /** Occluder pass: draw the terrain depth into the shared shadow map from the sun's ortho view. */
+    shadowPass(pass: GPURenderPassEncoder, lightVP: Float32Array): void;
+    frame(enc: GPUCommandEncoder, colorView: GPUTextureView, depthView: GPUTextureView, camVP: Float32Array, sunDir: [number, number, number], sunCol: [number, number, number], amb: [number, number, number], camPos: [number, number, number], fog: [number, number, number], fogDensity: number, sea: number, extent: number, center: [number, number], lightVP: Float32Array, time?: number, load?: boolean): void;
+}