ugly-game 0.7.8 → 0.7.9

package/dist/assets/gpuProps.d.ts

@@ -1,3 +1,25 @@
+/**
+ * Per-world surface + motion parameters.
+ *
+ * `windAmp` should come from the world's AIR DENSITY: an airless world's flora is perfectly, eerily
+ * still, which is both physically correct and an instant read on where you are. `hueShift` and
+ * `saturation` carry the star-spectrum grade, so one planet's forest is waxy blue-green and the
+ * next is dry and rust-coloured from identical meshes.
+ */
+export interface PropWorld {
+    windDir: [number, number];
+    /** 0 disables sway entirely (and the vertex path early-outs). */
+    windAmp: number;
+    /** 0 disables the procedural grain. Larger = finer detail. */
+    grainScale: number;
+    grainDepth: number;
+    roughness: number;
+    /** bioluminescence — flat emissive added on dark worlds */
+    emissive: number;
+    hueShift: number;
+    saturation: number;
+    valueLift: number;
+}
 export interface PropMesh {
     positions: Float32Array;
     normals: Float32Array;
@@ -24,6 +46,17 @@ export declare class GpuPropsRenderer {
     private shadowBG;
     private lastSV;
     private lastSS;
+    /** Per-world look + motion. Defaults are inert: no sway, no grain, no grade. */
+    private world;
+    private phase;
+    /**
+     * Set the per-world look and motion. This is the whole point of the procedural surface: the same
+     * geometry and the same shader render a different planet's flora by moving a handful of numbers —
+     * no per-model textures to author, download, or keep coherent.
+     */
+    setWorld(w: Partial<PropWorld>): void;
+    /** Advance the wind phase. Pass the frame delta; sway is skipped entirely when windAmp is 0. */
+    tick(dt: number): void;
     constructor(device: GPUDevice, format: GPUTextureFormat);
     setModels(meshes: PropMesh[]): void;
     /** Group instances by model and upload per-model transform buffers. */

package/dist/assets/gpuProps.js

@@ -4,16 +4,37 @@
 // terrain. Runs in a load pass after the terrain so props depth-test against the surface.
 // ─────────────────────────────────────────────────────────────────────────────
 const SHADER = /* wgsl */ `
-struct U { mvp: mat4x4<f32>, lightVP: mat4x4<f32>, sun: vec4<f32>, sunCol: vec4<f32>, amb: vec4<f32>, cam: vec4<f32>, fog: vec4<f32>, up: vec4<f32> };
+// wind  = (dirX, dirZ, amplitude, phase)      — sway, amplitude scaled by the world's air density
+// surf  = (grainScale, grainDepth, roughness, emissive)
+// grade = (hueShift, saturation, valueLift, unused)
+struct U { mvp: mat4x4<f32>, lightVP: mat4x4<f32>, sun: vec4<f32>, sunCol: vec4<f32>, amb: vec4<f32>, cam: vec4<f32>, fog: vec4<f32>, up: vec4<f32>, wind: vec4<f32>, surf: vec4<f32>, grade: vec4<f32> };
 @group(0) @binding(0) var<uniform> u: U;
 @group(0) @binding(1) var<storage,read> models: array<mat4x4<f32>>;
 @group(1) @binding(0) var shadowMap: texture_depth_2d;      // the SAME sun shadow map the terrain cubes sample
 @group(1) @binding(1) var shadowSamp: sampler_comparison;
-struct VO { @builtin(position) pos: vec4<f32>, @location(0) world: vec3<f32>, @location(1) n: vec3<f32>, @location(2) c: vec3<f32> };
+struct VO { @builtin(position) pos: vec4<f32>, @location(0) world: vec3<f32>, @location(1) n: vec3<f32>, @location(2) c: vec3<f32>, @location(3) l: vec3<f32> };
+// WIND SWAY. Displacement is weighted by height above the instance's own anchor, so a trunk stays
+// planted while the canopy moves, and the phase is offset by world position so a grove never sways
+// in unison. Amplitude comes from the world's air density: an airless world is perfectly, eerily
+// still — physically right, and a strong signal of where you are.
+fn sway(local: vec3<f32>, world: vec3<f32>, up: vec3<f32>, scale: f32) -> vec3<f32> {
+  if (u.wind.z <= 0.0001) { return world; }
+  let h = max(dot(local, vec3(0.0, 1.0, 0.0)), 0.0);       // model +Y is local up (see placeMat)
+  let stiff = pow(min(h * 0.22, 1.0), 1.6);                 // stiff at the base, loose at the tip
+  let ph = u.wind.w + dot(world.xz, vec2(0.13, 0.17));
+  let a = u.wind.z * stiff * scale;
+  let d = a * (sin(ph) + 0.35 * sin(ph * 2.7 + h));
+  var wd = vec3(u.wind.x, 0.0, u.wind.y);
+  wd = normalize(wd - up * dot(wd, up));                    // project into the local tangent plane
+  return world + wd * d;
+}
 @vertex fn vs(@location(0) p: vec3<f32>, @location(1) nrm: vec3<f32>, @location(2) col: vec3<f32>, @builtin(instance_index) ii: u32) -> VO {
   let m = models[ii];
-  let world = (m * vec4(p, 1.0)).xyz;
-  var o: VO; o.pos = u.mvp * vec4(world, 1.0); o.world = world; o.n = (m * vec4(nrm, 0.0)).xyz; o.c = col; return o;
+  var world = (m * vec4(p, 1.0)).xyz;
+  let upv = normalize((m * vec4(0.0, 1.0, 0.0, 0.0)).xyz);
+  let sc = length(m[0].xyz);
+  world = sway(p, world, upv, sc);
+  var o: VO; o.pos = u.mvp * vec4(world, 1.0); o.world = world; o.n = (m * vec4(nrm, 0.0)).xyz; o.c = col; o.l = p; return o;
 }
 // same fixed directional FILL as the terrain cubes (gpuShadow.fixedFill) so plants/rocks read the same 3D shape,
 // day or night, under one shared light. up.w > 0.5 signals a valid local-up was supplied (else fall back to flat).
@@ -40,22 +61,84 @@ fn shadowFactor(world: vec3<f32>, ndl: f32) -> f32 {
   }
   return s / 9.0;
 }
+// ── PROCEDURAL SURFACE ───────────────────────────────────────────────────────
+// Detail is generated in the shader rather than sampled from a texture. Three reasons, all of them
+// load-bearing for a procedurally-populated universe: generated meshes have unreliable UVs (so
+// tri-planar, which needs none); there are no maps to download (the asset budget is already tight);
+// and the SAME code yields a different surface per planet by shifting a handful of parameters, which
+// is exactly what an infinite universe needs. Cohesion survives because every organism resolves
+// through one shared parameter set, not a per-model texture.
+fn hash3(p: vec3<f32>) -> f32 {
+  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);
+}
+fn vnoise(p: vec3<f32>) -> f32 {
+  let i = floor(p); let f = fract(p);
+  let w = f * f * (3.0 - 2.0 * f);
+  let n000 = hash3(i); let n100 = hash3(i + vec3(1.0, 0.0, 0.0));
+  let n010 = hash3(i + vec3(0.0, 1.0, 0.0)); let n110 = hash3(i + vec3(1.0, 1.0, 0.0));
+  let n001 = hash3(i + vec3(0.0, 0.0, 1.0)); let n101 = hash3(i + vec3(1.0, 0.0, 1.0));
+  let n011 = hash3(i + vec3(0.0, 1.0, 1.0)); let n111 = hash3(i + vec3(1.0, 1.0, 1.0));
+  return mix(mix(mix(n000, n100, w.x), mix(n010, n110, w.x), w.y),
+             mix(mix(n001, n101, w.x), mix(n011, n111, w.x), w.y), w.z);
+}
+/** Tri-planar fbm — no UVs required, which matters because generated meshes rarely have usable ones. */
+fn triplanar(p: vec3<f32>, n: vec3<f32>, scale: f32) -> f32 {
+  let q = p * scale;
+  let w = abs(normalize(n));
+  let wn = w / max(w.x + w.y + w.z, 0.0001);
+  var v = vnoise(vec3(q.y, q.z, 0.0)) * wn.x
+        + vnoise(vec3(q.x, q.z, 1.7)) * wn.y
+        + vnoise(vec3(q.x, q.y, 3.3)) * wn.z;
+  v = v * 0.65 + 0.35 * vnoise(q * 2.7 + 11.0);   // a second octave for fine break-up
+  return v;
+}
+fn hsvShift(c: vec3<f32>, hue: f32, sat: f32, val: f32) -> vec3<f32> {
+  let k = vec3(0.57735, 0.57735, 0.57735);        // rotate about the grey axis
+  let cosA = cos(hue); let sinA = sin(hue);
+  let rot = c * cosA + cross(k, c) * sinA + k * dot(k, c) * (1.0 - cosA);
+  let g = dot(rot, vec3(0.299, 0.587, 0.114));
+  return clamp(mix(vec3(g, g, g), rot, sat) * val, vec3(0.0), vec3(4.0));
+}
 @fragment fn fs(i: VO) -> @location(0) vec4<f32> {
   let N = normalize(i.n);
   let ff = select(1.0, 0.5 + 0.85 * fixedFill(N, u.up.xyz), u.up.w > 0.5);   // fixed fill (fall back to flat amb if no up)
   let d = clamp(dot(N, -normalize(u.sun.xyz)), 0.0, 1.0);
   let sh = mix(1.0, shadowFactor(i.world, d), u.sun.w);   // u.sun.w = shadow-receive enable (0 ⇒ off, byte-identical for demo)
-  let lit = i.c * (u.amb.xyz * ff + d * u.sunCol.xyz * sh);
+  // procedural grain modulates the role colour; the per-world grade then re-tints the whole planet
+  var base = i.c;
+  if (u.surf.x > 0.0) {
+    let grain = triplanar(i.l, N, u.surf.x);
+    base = base * (1.0 - u.surf.y * 0.5 + u.surf.y * grain);
+  }
+  base = hsvShift(base, u.grade.x, max(u.grade.y, 0.0), max(u.grade.z, 0.0));
+  let spec = u.surf.z;
+  let lit = base * (u.amb.xyz * ff + d * u.sunCol.xyz * sh * (1.0 + spec * 0.6))
+          + base * u.surf.w;   // emissive — bioluminescence on dark worlds
   let dist = length(i.world - u.cam.xyz);
   let f = clamp(1.0 - exp(-dist * u.fog.w), 0.0, 1.0);
   return vec4(mix(lit, u.fog.xyz, f), 1.0);
 }`;
 // Depth-only occluder pass: instanced prop depth from the sun's ortho view (so trees/rocks cast shadows).
+// Depth-only occluder. It MUST apply the identical sway, or the shadows stay put while the leaves
+// move — a very visible detachment.
 const OCCLUDER = /* wgsl */ `
-@group(0) @binding(0) var<uniform> lightVP: mat4x4<f32>;
+struct OU { lightVP: mat4x4<f32>, wind: vec4<f32> };
+@group(0) @binding(0) var<uniform> o: OU;
 @group(0) @binding(1) var<storage,read> models: array<mat4x4<f32>>;
 @vertex fn vs(@location(0) p: vec3<f32>, @builtin(instance_index) ii: u32) -> @builtin(position) vec4<f32> {
-  return lightVP * (models[ii] * vec4(p, 1.0));
+  let m = models[ii];
+  var world = (m * vec4(p, 1.0)).xyz;
+  if (o.wind.z > 0.0001) {
+    let upv = normalize((m * vec4(0.0, 1.0, 0.0, 0.0)).xyz);
+    let h = max(p.y, 0.0);
+    let stiff = pow(min(h * 0.22, 1.0), 1.6);
+    let ph = o.wind.w + dot(world.xz, vec2(0.13, 0.17));
+    let a = o.wind.z * stiff * length(m[0].xyz);
+    var wd = vec3(o.wind.x, 0.0, o.wind.y);
+    wd = normalize(wd - upv * dot(wd, upv));
+    world = world + wd * (a * (sin(ph) + 0.35 * sin(ph * 2.7 + h)));
+  }
+  return o.lightVP * vec4(world, 1.0);
 }`;
 export class GpuPropsRenderer {
     device;
@@ -75,6 +158,32 @@ export class GpuPropsRenderer {
     shadowBG = null;
     lastSV = null;
     lastSS = null;
+    /** Per-world look + motion. Defaults are inert: no sway, no grain, no grade. */
+    world = {
+        windDir: [1, 0],
+        windAmp: 0,
+        grainScale: 0,
+        grainDepth: 0,
+        roughness: 0,
+        emissive: 0,
+        hueShift: 0,
+        saturation: 1,
+        valueLift: 1,
+    };
+    phase = 0;
+    /**
+     * Set the per-world look and motion. This is the whole point of the procedural surface: the same
+     * geometry and the same shader render a different planet's flora by moving a handful of numbers —
+     * no per-model textures to author, download, or keep coherent.
+     */
+    setWorld(w) {
+        this.world = { ...this.world, ...w };
+    }
+    /** Advance the wind phase. Pass the frame delta; sway is skipped entirely when windAmp is 0. */
+    tick(dt) {
+        if (this.world.windAmp > 0)
+            this.phase += dt * (0.8 + this.world.windAmp * 2.4);
+    }
     constructor(device, format) {
         this.device = device;
         const sm = device.createShaderModule({ code: SHADER });
@@ -127,11 +236,11 @@ export class GpuPropsRenderer {
             },
         });
         this.uBuf = device.createBuffer({
-            size: 128 + 16 * 6, // 2× mat4 (mvp + lightVP) + 6× vec4
+            size: 128 + 16 * 9, // 2× mat4 (mvp + lightVP) + 9× vec4 (…, wind, surf, grade)
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
         this.lightBuf = device.createBuffer({
-            size: 64,
+            size: 64 + 16, // lightVP + wind (the occluder sways identically or shadows detach)
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
         const dummy = device.createTexture({
@@ -213,7 +322,15 @@ export class GpuPropsRenderer {
     }
     /** Occluder pass: draw all instanced props' depth into the shared shadow map from the sun's ortho view. */
     shadowPass(pass, lightVP) {
-        this.device.queue.writeBuffer(this.lightBuf, 0, lightVP);
+        const ob = new Float32Array(20);
+        ob.set(lightVP, 0);
+        ob.set([
+            this.world.windDir[0],
+            this.world.windDir[1],
+            this.world.windAmp,
+            this.phase,
+        ], 16);
+        this.device.queue.writeBuffer(this.lightBuf, 0, ob);
         pass.setPipeline(this.occPipe);
         for (let m = 0; m < this.models.length; m++) {
             const bg = this.occBGs[m], mdl = this.models[m];
@@ -230,7 +347,7 @@ export class GpuPropsRenderer {
     // in the same shadow. Omit all three (the demo path) → no shadowing, byte-identical to before.
     lightVP, shadowView, shadowSamp) {
         const receive = !!(lightVP && shadowView && shadowSamp);
-        const u = new Float32Array(56);
+        const u = new Float32Array(68);
         u.set(camVP, 0);
         u.set(lightVP ?? IDENTITY4, 16); // lightVP (identity when not receiving — result is gated off by sun.w)
         u.set([sunDir[0], sunDir[1], sunDir[2], receive ? 1 : 0], 32); // sun.w = shadow-receive enable
@@ -240,6 +357,12 @@ export class GpuPropsRenderer {
         u.set([fog[0], fog[1], fog[2], fogDensity], 48);
         if (up)
             u.set([up[0], up[1], up[2], 1], 52); // up.w=1 → enable the fixed directional fill (matches the terrain)
+        // wind / surface / grade — all default to OFF, so a caller that never calls setWorld() renders
+        // byte-identically to before this feature existed.
+        const w = this.world;
+        u.set([w.windDir[0], w.windDir[1], w.windAmp, this.phase], 56);
+        u.set([w.grainScale, w.grainDepth, w.roughness, w.emissive], 60);
+        u.set([w.hueShift, w.saturation, w.valueLift, 0], 64);
         this.device.queue.writeBuffer(this.uBuf, 0, u);
         // group 1: the shadow map + comparison sampler (dummy when not receiving). Rebuild only when the view changes.
         const sv = shadowView ?? this.dummyShadowView, ss = shadowSamp ?? this.dummyShadowSamp;

package/dist/gpuShadow.js

@@ -91,10 +91,12 @@ fn hsv(hh: f32) -> vec3<f32> {
 // OCCLUSION CULLING (Hi-Z). After the frustum test, an in-frustum cube is ALSO dropped if it's fully hidden behind
 // nearer geometry. `hiz` is a coarse MAX-depth buffer (each texel = the farthest visible NDC depth over its block)
 // built from the PREVIOUS frame's depth. A cube is occluded iff its nearest corner is behind the farthest occluder
-// across its whole screen footprint. Using last frame's depth + a coarse buffer makes this HOLE-FREE by
-// construction: a newly-disoccluded area has far/cleared depth so nothing there is culled — the worst case is
-// under-culling for one frame, never a false cull. occ.x toggles it (camera pass only; the shadow pass never
-// occludes — an off-screen occluder still casts a shadow into view). occ.yz = hiz dims, occ.w = pixels/texel.
+// across its whole screen footprint. Because the depth is one frame STALE, a cube reprojects a few pixels under
+// camera motion and can be tested against near depth from where an occluder used to be — a false cull that blinks
+// the cube out for a frame. To absorb that, the footprint query is DILATED by 2 Hi-Z texels (see below); MAX over
+// the larger region only ever raises the occluder distance, so it strictly keeps more cubes and never hides real
+// geometry. occ.x toggles it (camera pass only; the shadow pass never occludes — an off-screen occluder still
+// casts a shadow into view). occ.yz = hiz dims, occ.w = pixels/texel.
 const CULL_WGSL = /* wgsl */ `
 struct Inst { pos: vec4<f32>, scl: vec4<f32>, rot: vec4<f32>, aux: vec4<f32> };
 struct Args { vc: u32, ic: atomic<u32>, fv: u32, fi: u32 };

package/dist/input/browserBackend.js

@@ -12,6 +12,17 @@
 //   • touch: one finger = cursor (tap = place edge); two fingers = pan + pinch-zoom + twist.
 // ─────────────────────────────────────────────────────────────────────────────
 import { emptyFrame } from './resolve';
+// setPointerCapture throws InvalidStateError when a pointer-lock request is still in-flight or the pointerId is no
+// longer active. A failed capture only means an off-canvas drag won't keep tracking — never fatal — so swallow it
+// rather than let it bubble as an "Uncaught InvalidStateError".
+function safeCapture(el, pointerId) {
+    try {
+        el.setPointerCapture(pointerId);
+    }
+    catch {
+        /* pointer inactive or lock pending — capture simply doesn't apply this gesture */
+    }
+}
 export class BrowserRawBackend {
     keysDown = new Set();
     edges = new Set();
@@ -121,7 +132,7 @@ export class BrowserRawBackend {
                 this.touches.set(e.pointerId, { x: e.clientX, y: e.clientY, moved: 0 });
                 this.gPrev = this.touches.size === 2 ? this.gesture() : null;
                 if (!document.pointerLockElement)
-                    el.setPointerCapture(e.pointerId); // track gestures that leave the canvas
+                    safeCapture(el, e.pointerId); // track gestures that leave the canvas
             }
             else {
                 if (!this.pointerButtons.has(e.button))
@@ -130,8 +141,11 @@ export class BrowserRawBackend {
                 // Pointer LOCK and pointer CAPTURE are mutually-exclusive ways to route pointer input. Calling capture
                 // while lock is engaged/pending throws InvalidStateError (Firefox then never locks → no mouselook;
                 // Chrome logs it on every click while locked). So when the game wants mouselook use ONLY pointer lock;
-                // otherwise capture so a drag keeps tracking off-canvas. `document.pointerLockElement` is the guard that
-                // makes capture valid by construction — no try/catch needed.
+                // otherwise capture so a drag keeps tracking off-canvas. `document.pointerLockElement` narrows the window,
+                // but it's NOT sufficient: a click landing while a requestPointerLock() is still PENDING (lockElement is
+                // null but the browser has a lock in-flight), or on a pointerId the UA no longer considers active, still
+                // throws InvalidStateError — which surfaced as an "Uncaught InvalidStateError" in prod. `safeCapture`
+                // swallows it (a failed capture just means a drag won't track past the canvas edge — harmless).
                 if (this.pointerLock) {
                     if (!document.pointerLockElement)
                         void Promise.resolve(el.requestPointerLock()).catch(() => {
@@ -139,7 +153,7 @@ export class BrowserRawBackend {
                         });
                 }
                 else if (!document.pointerLockElement) {
-                    el.setPointerCapture(e.pointerId);
+                    safeCapture(el, e.pointerId);
                 }
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-game",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "type": "module",
   "exports": {
     ".": {