ugly-game 0.2.0 → 0.3.0

package/dist/gpuWorld.js

@@ -0,0 +1,309 @@
+// The integrated scene renderer: sun SHADOW MAPPING + TAA in one pipeline, driven by the
+// deterministic ECS sim. The new hard part vs. the isolated /gputaa demo is PER-OBJECT MOTION
+// VECTORS: the sim moves crates/character/projectiles every frame, so camera-only reprojection
+// would smear them. Each instance therefore carries its PREVIOUS-frame world center; the scene
+// pass emits a true motion vector (camera motion + object motion), and TAA reprojects history
+// through it. Passes: (1) shadow depth from the sun, (2) shadow-lit scene → MRT color+motion
+// (jittered), (3) TAA resolve → screen + ping-ponged history.
+import { CUBE } from './gpuShadow';
+const COLOR_FMT = 'rgba16float';
+const MOTION_FMT = 'rg16float';
+const SHADOW_SIZE = 2048;
+const COMMON = /* wgsl */ `
+struct Inst { pos: vec4<f32>, scl: vec4<f32>, prev: 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});
+`;
+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> {
+  let it = insts[ii];
+  return lightVP * vec4(it.pos.xyz + CUBE_POS[vi] * it.scl.xyz, 1.0);
+}
+`;
+const SCENE_WGSL = COMMON + /* wgsl */ `
+struct U {
+  currVP: mat4x4<f32>,
+  prevVP: mat4x4<f32>,
+  lightVP: mat4x4<f32>,
+  jitter: vec4<f32>,   // xy clip-space sub-pixel jitter
+  sun: vec4<f32>,      // xyz dir, w ambient
+  params: vec4<f32>,   // x 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;
+@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,
+  @location(3) curr: vec4<f32>,   // unjittered current clip (motion)
+  @location(4) prev: vec4<f32>,   // previous clip (motion)
+};
+@vertex fn vs(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> VOut {
+  let it = insts[ii];
+  let world = it.pos.xyz + CUBE_POS[vi] * it.scl.xyz;
+  let prevWorld = it.prev.xyz + CUBE_POS[vi] * it.scl.xyz;   // scale constant frame-to-frame
+  let c = u.currVP * vec4(world, 1.0);
+  var o: VOut;
+  o.curr = c; o.prev = u.prevVP * vec4(prevWorld, 1.0);
+  var cj = c; cj.x = cj.x + u.jitter.x * c.w; cj.y = cj.y + u.jitter.y * c.w;
+  o.clip = cj; o.world = world; o.nrm = normalize(CUBE_NRM[vi] / it.scl.xyz); o.hue = it.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(world: vec3<f32>, N: vec3<f32>, ndl: f32) -> f32 {
+  let wo = world + N * (0.06 + 0.22 * (1.0 - ndl));
+  let lp = u.lightVP * 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 texel = 1.0 / u.params.x;
+  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, proj.z - 0.0006);
+  } }
+  return s / 9.0;
+}
+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(u.sun.xyz)), 0.0);
+  let base = select(mix(vec3(0.32), hsv(v.hue), 0.62), vec3(0.6, 0.62, 0.66), v.hue < 0.0);
+  let lit = base * (u.sun.w + ndl * shadowPCF(v.world, N, 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(pow(clamp(lit, vec3(0.0), vec3(1.0)), vec3(0.4545)), 1.0);
+  o.motion = currUV - prevUV;
+  return o;
+}
+`;
+const RESOLVE_WGSL = /* wgsl */ `
+struct RU { texel: vec4<f32>, ctrl: vec4<f32> };  // texel.xy = 1/size; ctrl.x 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; }
+  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 prevUV = fc.xy * ru.texel.xy - 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);
+  }
+  o.screen = vec4(outc, 1.0); o.hist = vec4(outc, 1.0);
+  return o;
+}
+`;
+export class GpuWorldRenderer {
+    device;
+    w = 0;
+    h = 0;
+    instBuf;
+    scratch = new Float32Array(0);
+    count = 0;
+    uBuf;
+    rBuf;
+    u = new Float32Array(64);
+    r = new Float32Array(8);
+    lightScratch = new Float32Array(16);
+    lightBuf;
+    shadowTex;
+    shadowView;
+    shadowSamp;
+    histSamp;
+    shadowPipe;
+    scenePipe;
+    resolvePipe;
+    shadowBGL;
+    sceneBGL;
+    resolveBGL;
+    shadowBG;
+    sceneBG;
+    colorTex;
+    colorView;
+    motionTex;
+    motionView;
+    depthTex;
+    depthView;
+    hist = [];
+    histView = [];
+    resolveBG = [];
+    ping = 0;
+    constructor(device, format) {
+        this.device = device;
+        this.uBuf = device.createBuffer({ size: this.u.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.rBuf = device.createBuffer({ size: this.r.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.lightBuf = device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.shadowTex = device.createTexture({ size: [SHADOW_SIZE, SHADOW_SIZE], format: 'depth32float', usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING });
+        this.shadowView = this.shadowTex.createView();
+        this.shadowSamp = device.createSampler({ compare: 'less' });
+        this.histSamp = device.createSampler({ magFilter: 'linear', minFilter: 'linear' });
+        const shadowMod = device.createShaderModule({ code: SHADOW_WGSL });
+        const sceneMod = device.createShaderModule({ code: SCENE_WGSL });
+        const resolveMod = device.createShaderModule({ code: RESOLVE_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.sceneBGL = 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' } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'comparison' } }
+            ] });
+        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 RA = GPUTextureUsage.RENDER_ATTACHMENT, TB = GPUTextureUsage.TEXTURE_BINDING;
+        const mk = (f, u) => this.device.createTexture({ size: [w, h], format: f, usage: u });
+        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());
+        this.resolveBG = [0, 1].map((i) => this.device.createBindGroup({ layout: this.resolveBGL, entries: [
+                { binding: 0, resource: { buffer: this.rBuf } }, { binding: 1, resource: this.histSamp },
+                { binding: 2, resource: this.colorView }, { binding: 3, resource: this.motionView }, { binding: 4, resource: this.histView[i] }
+            ] }));
+        this.ping = 0;
+    }
+    setCapacity(cap) {
+        this.scratch = new Float32Array(cap * 12);
+        this.instBuf = this.device.createBuffer({ size: this.scratch.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+        this.count = 0;
+        this.shadowBG = this.device.createBindGroup({ layout: this.shadowBGL, entries: [
+                { binding: 0, resource: { buffer: this.lightBuf } }, { binding: 1, resource: { buffer: this.instBuf } }
+            ] });
+        this.sceneBG = this.device.createBindGroup({ layout: this.sceneBGL, entries: [
+                { binding: 0, resource: { buffer: this.uBuf } }, { binding: 1, resource: { buffer: this.instBuf } },
+                { binding: 2, resource: this.shadowView }, { binding: 3, resource: this.shadowSamp }
+            ] });
+    }
+    updateInstances(list) {
+        const n = Math.min(list.length, this.scratch.length / 12);
+        for (let i = 0; i < n; i++) {
+            const c = list[i], o = i * 12;
+            this.scratch[o] = c.x;
+            this.scratch[o + 1] = c.y;
+            this.scratch[o + 2] = c.z;
+            this.scratch[o + 3] = c.hue;
+            this.scratch[o + 4] = c.sx;
+            this.scratch[o + 5] = c.sy;
+            this.scratch[o + 6] = c.sz;
+            this.scratch[o + 8] = c.px;
+            this.scratch[o + 9] = c.py;
+            this.scratch[o + 10] = c.pz;
+        }
+        this.device.queue.writeBuffer(this.instBuf, 0, this.scratch, 0, n * 12);
+        this.count = n;
+    }
+    /** currVP/prevVP/lightVP: Float32Array(16). jitter: clip sub-pixel. */
+    frame(enc, swapView, currVP, prevVP, lightVP, jitter, sunDir, ambient, taaOn, blend) {
+        this.u.set(currVP, 0);
+        this.u.set(prevVP, 16);
+        this.u.set(lightVP, 32);
+        this.u[48] = taaOn ? jitter[0] : 0;
+        this.u[49] = taaOn ? jitter[1] : 0;
+        this.u[52] = sunDir[0];
+        this.u[53] = sunDir[1];
+        this.u[54] = sunDir[2];
+        this.u[55] = ambient;
+        this.u[56] = SHADOW_SIZE; // params.x (params vec4 starts at float 56: x=56,y=57,z=58,w=59)
+        this.device.queue.writeBuffer(this.uBuf, 0, this.u);
+        this.lightScratch.set(lightVP);
+        this.device.queue.writeBuffer(this.lightBuf, 0, this.lightScratch);
+        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);
+        // 1) shadow depth from the sun
+        const sp = enc.beginRenderPass({ colorAttachments: [], depthStencilAttachment: {
+                view: this.shadowView, depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store'
+            } });
+        sp.setPipeline(this.shadowPipe);
+        sp.setBindGroup(0, this.shadowBG);
+        sp.draw(36, this.count);
+        sp.end();
+        // 2) shadow-lit scene → color + motion (jittered)
+        const mp = 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' }
+        });
+        mp.setPipeline(this.scenePipe);
+        mp.setBindGroup(0, this.sceneBG);
+        mp.draw(36, this.count);
+        mp.end();
+        // 3) TAA resolve → 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/shaderGraph.d.ts

@@ -0,0 +1,84 @@
+export type GNode = {
+    id: string;
+    op: 'uv';
+} | {
+    id: string;
+    op: 'time';
+} | {
+    id: string;
+    op: 'const';
+    v: number[];
+} | {
+    id: string;
+    op: 'tex';
+    layer: number;
+    uv: string;
+} | {
+    id: string;
+    op: 'checker';
+    uv: string;
+    scale: number;
+} | {
+    id: string;
+    op: 'noise';
+    uv: string;
+    scale: number;
+} | {
+    id: string;
+    op: 'fresnel';
+    power: number;
+} | {
+    id: string;
+    op: 'osc';
+    a: string;
+} | {
+    id: string;
+    op: 'mul';
+    a: string;
+    b: string;
+} | {
+    id: string;
+    op: 'add';
+    a: string;
+    b: string;
+} | {
+    id: string;
+    op: 'mix';
+    a: string;
+    b: string;
+    t: string;
+} | {
+    id: string;
+    op: 'sw';
+    a: string;
+    s: string;
+} | {
+    id: string;
+    op: 'out';
+    albedo: string;
+    rough: string;
+    metal: string;
+    emit: string;
+};
+export interface Graph {
+    name: string;
+    nodes: GNode[];
+}
+/** Compile a material graph to the WGSL source of `fn material(uv, N, V, t) -> Surface`. */
+export declare function compileGraph(g: Graph): string;
+export interface Surf {
+    albedo: number[];
+    rough: number;
+    metal: number;
+    emit: number[];
+}
+/** Evaluate a material graph on the CPU for one input — the reference the GPU probe is checked against. */
+export declare function evalGraph(g: Graph, s: {
+    uv: [number, number];
+    n: [number, number, number];
+    v: [number, number, number];
+    t: number;
+}, texConst?: number[]): Surf;
+/** Does this graph use nodes whose value can't be reproduced exactly CPU↔GPU (noise → sin chaos)? */
+export declare function isExactlyComparable(g: Graph): boolean;
+export declare const EXAMPLE_GRAPHS: Graph[];

package/dist/shaderGraph.js

@@ -0,0 +1,231 @@
+// An artist-facing SHADER GRAPH → WGSL compiler. Materials are authored as DATA (a DAG of typed
+// nodes), not hand-written shader code — the "custom shaders without writing WGSL" answer. The
+// graph authors the SURFACE (albedo/roughness/metallic/emissive); the engine's shared template
+// does the PBR lighting. compileGraph() topologically emits one WGSL `let` per node and splices a
+// `material()` function into the scene shader. Pure + deterministic → headlessly testable (compile
+// a graph, assert the WGSL) and the same graph always yields byte-identical source.
+const WID = { f32: 1, vec2: 2, vec3: 3, vec4: 4 };
+const num = (x) => (Number.isInteger(x) ? `${x}.0` : `${x}`);
+const vecLit = (v) => {
+    const w = v.length;
+    if (w === 1)
+        return { ty: 'f32', expr: num(v[0]) };
+    return { ty: ['f32', 'vec2', 'vec3', 'vec4'][w - 1], expr: `vec${w}<f32>(${v.map(num).join(', ')})` };
+};
+const asVec3 = (id, ty) => ty === 'vec3' ? id : ty === 'vec4' ? `${id}.xyz` : ty === 'vec2' ? `vec3(${id}, 0.0)` : `vec3(${id})`;
+const asF32 = (id, ty) => ty === 'f32' ? id : `${id}.x`;
+/** Compile a material graph to the WGSL source of `fn material(uv, N, V, t) -> Surface`. */
+export function compileGraph(g) {
+    const byId = new Map(g.nodes.map((n) => [n.id, n]));
+    const out = g.nodes.find((n) => n.op === 'out');
+    if (!out)
+        throw new Error('graph has no output node');
+    const ty = new Map();
+    const lines = [];
+    const done = new Set();
+    const nm = (id) => `n_${id}`;
+    const visit = (id) => {
+        if (done.has(id))
+            return;
+        const n = byId.get(id);
+        if (!n)
+            throw new Error(`missing node ${id}`);
+        // resolve dependencies first (post-order)
+        for (const dep of depsOf(n))
+            visit(dep);
+        done.add(id);
+        let t = 'f32', expr = '0.0';
+        switch (n.op) {
+            case 'uv':
+                t = 'vec2';
+                expr = 'uv';
+                break;
+            case 'time':
+                t = 'f32';
+                expr = 't';
+                break;
+            case 'const': {
+                const c = vecLit(n.v);
+                t = c.ty;
+                expr = c.expr;
+                break;
+            }
+            case 'tex':
+                t = 'vec4';
+                expr = `textureSample(gtex, gsamp, ${nm(n.uv)}, ${n.layer})`;
+                break;
+            case 'checker':
+                t = 'f32';
+                expr = `gchecker(${nm(n.uv)} * ${num(n.scale)})`;
+                break;
+            case 'noise':
+                t = 'f32';
+                expr = `gnoise(${nm(n.uv)} * ${num(n.scale)})`;
+                break;
+            case 'fresnel':
+                t = 'f32';
+                expr = `pow(1.0 - max(dot(N, V), 0.0), ${num(n.power)})`;
+                break;
+            case 'osc':
+                t = 'f32';
+                expr = `(0.5 + 0.5 * sin(${asF32(nm(n.a), ty.get(n.a))}))`;
+                break;
+            case 'mul':
+            case 'add': {
+                const ta = ty.get(n.a), tb = ty.get(n.b);
+                t = WID[ta] >= WID[tb] ? ta : tb;
+                expr = `(${nm(n.a)} ${n.op === 'mul' ? '*' : '+'} ${nm(n.b)})`;
+                break;
+            }
+            case 'mix': {
+                const ta = ty.get(n.a);
+                t = ta;
+                expr = `mix(${nm(n.a)}, ${nm(n.b)}, ${asF32(nm(n.t), ty.get(n.t))})`;
+                break;
+            }
+            case 'sw': {
+                const s = n.s;
+                t = ['f32', 'vec2', 'vec3', 'vec4'][s.length - 1];
+                expr = `${nm(n.a)}.${s}`;
+                break;
+            }
+            case 'out': return; // handled after the walk
+        }
+        ty.set(id, t);
+        lines.push(`  let ${nm(id)} = ${expr};`); // WGSL infers the let type
+    };
+    for (const dep of [out.albedo, out.rough, out.metal, out.emit])
+        visit(dep);
+    return `fn material(uv: vec2<f32>, N: vec3<f32>, V: vec3<f32>, t: f32) -> Surface {
+${lines.join('\n')}
+  var s: Surface;
+  s.albedo = ${asVec3(nm(out.albedo), ty.get(out.albedo))};
+  s.rough = clamp(${asF32(nm(out.rough), ty.get(out.rough))}, 0.04, 1.0);
+  s.metal = clamp(${asF32(nm(out.metal), ty.get(out.metal))}, 0.0, 1.0);
+  s.emit = ${asVec3(nm(out.emit), ty.get(out.emit))};
+  return s;
+}`;
+}
+function depsOf(n) {
+    switch (n.op) {
+        case 'tex':
+        case 'checker':
+        case 'noise': return [n.uv];
+        case 'mul':
+        case 'add': return [n.a, n.b];
+        case 'mix': return [n.a, n.b, n.t];
+        case 'sw':
+        case 'osc': return [n.a];
+        case 'out': return [n.albedo, n.rough, n.metal, n.emit];
+        default: return [];
+    }
+}
+const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
+const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+const bcast = (a, b, f) => { const n = Math.max(a.length, b.length), g = (v, i) => v.length === 1 ? v[0] : v[i]; return Array.from({ length: n }, (_, i) => f(g(a, i), g(b, i))); };
+const toVec3 = (v) => v.length >= 3 ? [v[0], v[1], v[2]] : v.length === 2 ? [v[0], v[1], 0] : [v[0], v[0], v[0]];
+function cpuNoise(x, y) {
+    const h = (px, py) => { const s = Math.sin(px * 12.9898 + py * 78.233) * 43758.5453; return s - Math.floor(s); };
+    const ix = Math.floor(x), iy = Math.floor(y), fx = x - ix, fy = y - iy, wx = fx * fx * (3 - 2 * fx), wy = fy * fy * (3 - 2 * fy);
+    const a = h(ix, iy), b = h(ix + 1, iy), c = h(ix, iy + 1), d = h(ix + 1, iy + 1);
+    return (a + (b - a) * wx) + ((c + (d - c) * wx) - (a + (b - a) * wx)) * wy;
+}
+/** Evaluate a material graph on the CPU for one input — the reference the GPU probe is checked against. */
+export function evalGraph(g, s, texConst = [0.7843, 0.7843, 0.7843, 1]) {
+    const byId = new Map(g.nodes.map((n) => [n.id, n])), memo = new Map();
+    const val = (id) => {
+        if (memo.has(id))
+            return memo.get(id);
+        const n = byId.get(id);
+        let r = [0];
+        switch (n.op) {
+            case 'uv':
+                r = [s.uv[0], s.uv[1]];
+                break;
+            case 'time':
+                r = [s.t];
+                break;
+            case 'const':
+                r = [...n.v];
+                break;
+            case 'tex':
+                val(n.uv);
+                r = [...texConst];
+                break;
+            case 'checker': {
+                const u = val(n.uv);
+                r = [((Math.floor(u[0] * n.scale) + Math.floor(u[1] * n.scale)) & 1) ? 1 : 0];
+                break;
+            }
+            case 'noise': {
+                const u = val(n.uv);
+                r = [cpuNoise(u[0] * n.scale, u[1] * n.scale)];
+                break;
+            }
+            case 'fresnel':
+                r = [Math.pow(1 - Math.max(dot3(s.n, s.v), 0), n.power)];
+                break;
+            case 'osc':
+                r = [0.5 + 0.5 * Math.sin(val(n.a)[0])];
+                break;
+            case 'mul':
+                r = bcast(val(n.a), val(n.b), (x, y) => x * y);
+                break;
+            case 'add':
+                r = bcast(val(n.a), val(n.b), (x, y) => x + y);
+                break;
+            case 'mix': {
+                const a = val(n.a), b = val(n.b), tt = val(n.t)[0];
+                r = a.map((av, i) => av + (b[i] - av) * tt);
+                break;
+            }
+            case 'sw': {
+                const a = val(n.a), idx = { x: 0, y: 1, z: 2, w: 3 };
+                r = Array.from(n.s).map((ch) => a[idx[ch]]);
+                break;
+            }
+            case 'out':
+                r = [0];
+                break;
+        }
+        memo.set(id, r);
+        return r;
+    };
+    const o = g.nodes.find((n) => n.op === 'out');
+    if (!o)
+        throw new Error('no out');
+    return { albedo: toVec3(val(o.albedo)), rough: clamp(val(o.rough)[0], 0.04, 1), metal: clamp(val(o.metal)[0], 0, 1), emit: toVec3(val(o.emit)) };
+}
+/** Does this graph use nodes whose value can't be reproduced exactly CPU↔GPU (noise → sin chaos)? */
+export function isExactlyComparable(g) { return !g.nodes.some((n) => n.op === 'noise'); }
+// ── example material graphs (DATA, not shader code) ──────────────────────────────────────────
+export const EXAMPLE_GRAPHS = [
+    { name: 'brushed metal', nodes: [
+            { id: 'uv', op: 'uv' }, { id: 'str', op: 'noise', uv: 'uv', scale: 40 },
+            { id: 'tint', op: 'const', v: [0.62, 0.64, 0.70] }, { id: 'strv', op: 'mul', a: 'tint', b: 'str' },
+            { id: 'alb', op: 'mix', a: 'tint', b: 'strv', t: 'str' },
+            { id: 'r', op: 'const', v: [0.28] }, { id: 'm', op: 'const', v: [1.0] }, { id: 'e', op: 'const', v: [0, 0, 0] },
+            { id: 'out', op: 'out', albedo: 'alb', rough: 'r', metal: 'm', emit: 'e' }
+        ] },
+    { name: 'checker tile', nodes: [
+            { id: 'uv', op: 'uv' }, { id: 'ch', op: 'checker', uv: 'uv', scale: 5 },
+            { id: 'a', op: 'const', v: [0.9, 0.2, 0.2] }, { id: 'b', op: 'const', v: [0.95, 0.95, 0.95] },
+            { id: 'alb', op: 'mix', a: 'a', b: 'b', t: 'ch' },
+            { id: 'r', op: 'const', v: [0.5] }, { id: 'm', op: 'const', v: [0.0] }, { id: 'e', op: 'const', v: [0, 0, 0] },
+            { id: 'out', op: 'out', albedo: 'alb', rough: 'r', metal: 'm', emit: 'e' }
+        ] },
+    { name: 'fresnel glow', nodes: [
+            { id: 'base', op: 'const', v: [0.05, 0.09, 0.16] }, { id: 'fr', op: 'fresnel', power: 3 },
+            { id: 'rim', op: 'const', v: [0.2, 0.9, 1.0] }, { id: 'glow', op: 'mul', a: 'rim', b: 'fr' },
+            { id: 'r', op: 'const', v: [0.15] }, { id: 'm', op: 'const', v: [0.0] },
+            { id: 'out', op: 'out', albedo: 'base', rough: 'r', metal: 'm', emit: 'glow' }
+        ] },
+    { name: 'animated pulse', nodes: [
+            { id: 'uv', op: 'uv' }, { id: 't', op: 'time' }, { id: 'n', op: 'noise', uv: 'uv', scale: 8 },
+            { id: 'freq', op: 'const', v: [6.28] }, { id: 'nph', op: 'mul', a: 'n', b: 'freq' }, { id: 'phase', op: 'add', a: 'nph', b: 't' },
+            { id: 'p', op: 'osc', a: 'phase' }, // BOUNDED 0..1 pulse (was noise+time → unbounded blow-out)
+            { id: 'col', op: 'const', v: [1.0, 0.4, 0.1] }, { id: 'em', op: 'mul', a: 'col', b: 'p' },
+            { id: 'dark', op: 'const', v: [0.1, 0.05, 0.03] }, { id: 'r', op: 'const', v: [0.6] }, { id: 'm', op: 'const', v: [0.0] },
+            { id: 'out', op: 'out', albedo: 'dark', rough: 'r', metal: 'm', emit: 'em' }
+        ] },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-game",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },