@woosh/meep-engine 3.47.0 → 3.49.0

package/src/shade/playground/tonemap_sdr/scenes.js

@@ -0,0 +1,404 @@
+import { Color } from "../../../core/color/Color.js";
+import { kelvin_to_rgb } from "../../../core/color/kelvin/kelvin_to_rgb.js";
+import Quaternion from "../../../core/geom/Quaternion.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+import { EntityComponentDataset } from "../../../engine/ecs/EntityComponentDataset.js";
+import { Transform64 } from "../../../engine/ecs/transform/Transform64.js";
+import { BoxGeometry } from "../../renderer/geometry/BoxGeometry.js";
+import { MeshoptClusterizer } from "../../renderer/geometry/meshlet/build/meshoptimizer/meshopt_clusterizer.js";
+import { meshlet_geometry_build_from_geometry } from "../../renderer/geometry/meshlet_geometry_build_from_geometry.js";
+import { MeshletGeometry } from "../../renderer/geometry/MeshletGeometry.js";
+import { make_torus_knot_geometry } from "../../renderer/geometry/primitives/make_torus_knot_geometry.js";
+import { make_uv_sphere_geometry } from "../../renderer/geometry/primitives/make_uv_sphere_geometry.js";
+import { make_sunlight } from "../../renderer/light/make_sunlight.js";
+import { PointLight } from "../../renderer/light/model/PointLight.js";
+import { place_light } from "../../renderer/light/place_light.js";
+import { StandardShadeMaterial } from "../../renderer/material/StandardShadeMaterial.js";
+import { place_primitive } from "../../renderer/scene/rows/place_primitive.js";
+import { Scene } from "../../renderer/scene/Scene.js";
+import { load_default_environment } from "../load_default_environment.js";
+import { make_flat_environment } from "../skinned_blas_refit/flat_environment.js";
+
+/**
+ * @typedef {import("../../renderer/Renderer.js").Renderer} Renderer
+ */
+
+/**
+ * @typedef {Object} ToneMapScene
+ * @property {string} name
+ * @property {Scene} scene
+ * @property {number[][]} view camera position and target
+ * @property {number} exposure_ev the fixed exposure the scene is authored for, in f-stops over a scene value of 1
+ * @property {string} note what the scene is there to show
+ */
+
+/**
+ * An sRGB-encoded 8-bit triple as linear Rec.709, which is what a material's colour takes.
+ *
+ * @param {number} r
+ * @param {number} g
+ * @param {number} b
+ * @returns {number[]}
+ */
+function from_srgb8(r, g, b) {
+    return [r, g, b].map(v => {
+        const c = v / 255;
+
+        return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+}
+
+/**
+ * A black body's colour as linear Rec.709. `kelvin_to_rgb` answers sRGB-encoded, and a light's colour and an
+ * emissive factor both take linear.
+ *
+ * @param {number} temperature in kelvin
+ * @returns {number[]}
+ */
+function kelvin_linear(temperature) {
+    const encoded = [];
+
+    kelvin_to_rgb(encoded, 0, temperature);
+
+    return encoded.map(c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+}
+
+/**
+ * What every scene starts from: a scene on its own dataset, and placers for boxes and spheres.
+ *
+ * @param {Renderer} renderer
+ */
+function scene_base(renderer) {
+    const scene = new Scene();
+
+    scene.dataset = new EntityComponentDataset();
+
+    const scene_context = renderer.scenes.obtain(scene);
+
+    const cube = new BoxGeometry();
+
+    const sphere = new MeshletGeometry();
+    meshlet_geometry_build_from_geometry(make_uv_sphere_geometry(1, 48, 24), sphere);
+
+    const knot = new MeshletGeometry();
+    meshlet_geometry_build_from_geometry(make_torus_knot_geometry(0.6, 0.2, 160, 24), knot);
+
+    /**
+     * @param {number[]} rgb linear
+     * @param {number} roughness
+     * @param {number} metallic
+     * @returns {StandardShadeMaterial}
+     */
+    const surface = (rgb, roughness, metallic) => {
+        const material = new StandardShadeMaterial();
+
+        material.diffuse_color.copy(new Color(rgb[0], rgb[1], rgb[2]));
+        material.roughness_factor = roughness;
+        material.metallic_factor = metallic;
+
+        return material;
+    };
+
+    /**
+     * A black surface that only emits: `rgb` times `strength`, in scene units.
+     *
+     * @param {number[]} rgb
+     * @param {number} strength
+     * @returns {StandardShadeMaterial}
+     */
+    const glow = (rgb, strength) => {
+        const material = surface([0, 0, 0], 1, 0);
+
+        material.emissive_factor.copy(new Color(rgb[0] * strength, rgb[1] * strength, rgb[2] * strength));
+
+        return material;
+    };
+
+    /**
+     * @param {MeshletGeometry} geometry
+     * @param {StandardShadeMaterial} material
+     * @param {number[]} position
+     * @param {number[]} scale
+     * @param {number} [yaw] radians about +Y
+     */
+    const place = (geometry, material, position, scale, yaw = 0) => {
+        const transform = new Transform64();
+        const rotation = Quaternion.fromAxisAngle(Vector3.up, yaw);
+
+        transform.setTranslation(position[0], position[1], position[2]);
+        transform.setRotation(rotation.x, rotation.y, rotation.z, rotation.w);
+        transform.setScale(scale[0], scale[1], scale[2]);
+        transform.updateMatrix();
+
+        place_primitive(scene_context, geometry, material, transform);
+    };
+
+    /**
+     * @param {number[]} position
+     * @param {number[]} rgb chromaticity, linear
+     * @param {number} candela
+     */
+    const lamp = (position, rgb, candela) => {
+        const light = new PointLight();
+
+        light.color.copy(new Color(rgb[0], rgb[1], rgb[2]));
+        light.intensity = candela;
+        light.distance = 0;
+        light.radius = 0.05;
+        light.casts_shadow = false;
+        light.transform.setTranslation(position[0], position[1], position[2]);
+        light.transform.updateMatrix();
+
+        place_light(scene, light);
+    };
+
+    return { scene, cube, sphere, knot, surface, glow, place, lamp };
+}
+
+/**
+ * Night, lit only by what glows. A fire of stacked emitters lights a floor and three props, and a ladder of emitters
+ * steps four saturated colours up by two stops at a time, from below the shoulder of every operator to far past it.
+ *
+ * @param {Renderer} renderer
+ * @returns {ToneMapScene}
+ */
+function create_fire(renderer) {
+    const { scene, cube, sphere, surface, glow, place, lamp } = scene_base(renderer);
+
+    scene.lights.environment = make_flat_environment([0.0015, 0.002, 0.004]);
+
+    place(cube, surface([0.18, 0.18, 0.18], 0.85, 0), [0, -0.05, 0], [30, 0.1, 30]);
+
+    // the fire: hot at the core, redder and dimmer outwards
+    const FIRE = [1, 0.35, 0.05];
+
+    place(sphere, glow([1, 0.62, 0.22], 48), [0, 0.28, 0], [0.22, 0.3, 0.22]);
+    place(sphere, glow(FIRE, 16), [0.18, 0.22, 0.1], [0.2, 0.24, 0.2]);
+    place(sphere, glow(FIRE, 16), [-0.16, 0.2, -0.08], [0.18, 0.26, 0.18]);
+    place(sphere, glow([1, 0.2, 0.03], 6), [0.05, 0.16, -0.22], [0.2, 0.16, 0.2]);
+    place(sphere, glow([1, 0.2, 0.03], 6), [-0.1, 0.14, 0.24], [0.22, 0.14, 0.22]);
+    place(sphere, glow([0.9, 0.12, 0.02], 2), [0, 0.06, 0], [0.5, 0.06, 0.5]);
+
+    // logs and stones around it
+    const char = surface([0.04, 0.03, 0.025], 0.9, 0);
+
+    for (let i = 0; i < 6; i++) {
+        const a = i / 6 * Math.PI * 2;
+
+        place(cube, char, [Math.cos(a) * 0.45, 0.06, Math.sin(a) * 0.45], [0.5, 0.1, 0.12], -a);
+    }
+
+    const fire_light = kelvin_linear(1900);
+
+    lamp([0, 0.6, 0], fire_light, 120);
+    lamp([0.2, 0.35, 0.15], fire_light, 40);
+
+    // props the fire lights: a white sphere, a grey column, a saturated blue box
+    place(sphere, surface([0.8, 0.8, 0.8], 0.4, 0), [-1.6, 0.5, 0.6], [0.5, 0.5, 0.5]);
+    place(cube, surface([0.45, 0.45, 0.45], 0.7, 0), [1.7, 1, 0.2], [0.5, 2, 0.5]);
+    place(cube, surface(from_srgb8(30, 80, 200), 0.5, 0), [1.2, 0.3, 1.2], [0.6, 0.6, 0.6], 0.4);
+
+    // the ladder: four colours, each two stops brighter than the last, left to right
+    const ladder = [
+        [1, 0.35, 0.05],  // fire orange
+        [1, 0.03, 0.02],  // brake-lamp red
+        [1, 0.55, 0.12],  // sodium
+        [0.05, 0.2, 1],   // neon blue
+    ];
+
+    for (let row = 0; row < ladder.length; row++) {
+        for (let step = 0; step < 6; step++) {
+            const strength = Math.pow(2, step * 2 - 2);
+
+            place(cube, glow(ladder[row], strength), [-2.75 + step * 1.1, 0.8 + row * 0.6, -4], [0.45, 0.45, 0.1]);
+        }
+    }
+
+    return {
+        name: 'Fire and emitters',
+        scene,
+        view: [[0, 1.7, 4.6], [0, 1.1, -1.5]],
+        exposure_ev: 0,
+        note: 'Night, lit by a fire. Back row: four colours from ¼ to 256, two stops a step.',
+    };
+}
+
+/**
+ * Midday. A photographed sky and a sun over a concrete yard, with a car-paint orange, primaries, foliage green, chrome
+ * and white — the case where the sky and the sunlit white sit near the top of the range.
+ *
+ * @param {Renderer} renderer
+ * @returns {ToneMapScene}
+ */
+function create_exterior(renderer) {
+    const { scene, cube, sphere, knot, surface, place } = scene_base(renderer);
+
+    scene.lights.environment = make_flat_environment([0.35, 0.45, 0.6]);
+    load_default_environment(scene, '/test_assets/environments/octahedral/rustig_koppie_puresky_2k.hdr');
+
+    const sun = make_sunlight({ intensity: 8, temperature: 5800, direction: new Vector3(-0.45, -0.7, -0.55) });
+
+    place_light(scene, sun);
+
+    place(cube, surface([0.42, 0.4, 0.37], 0.9, 0), [0, -0.05, -10], [80, 0.1, 80]);
+
+    // a white wall and a dark doorway, for a sunlit white beside a shadow
+    place(cube, surface([0.82, 0.8, 0.76], 0.8, 0), [0, 1.5, -4.5], [9, 3, 0.3]);
+    place(cube, surface([0.05, 0.05, 0.05], 0.9, 0), [2.5, 1.1, -4.3], [1.1, 2.2, 0.1]);
+
+    // GT7's own test colour: a vivid orange paint, outside Rec.709 in their renders, at the edge of it here
+    place(sphere, surface(from_srgb8(255, 96, 0), 0.12, 0), [-1.8, 0.7, -1.5], [0.7, 0.7, 0.7]);
+    place(knot, surface(from_srgb8(255, 96, 0), 0.12, 0), [-3.5, 0.9, -2.8], [1, 1, 1], 0.6);
+
+    place(cube, surface(from_srgb8(200, 20, 30), 0.5, 0), [0.4, 0.5, -1.2], [1, 1, 1], 0.3);
+    place(cube, surface(from_srgb8(20, 60, 190), 0.5, 0), [1.7, 0.4, -0.6], [0.8, 0.8, 0.8], -0.2);
+    place(sphere, surface(from_srgb8(60, 120, 30), 0.8, 0), [3.2, 0.9, -2.4], [0.9, 0.9, 0.9]);
+    place(sphere, surface([0.95, 0.95, 0.95], 0.05, 1), [-0.2, 0.45, 0.6], [0.45, 0.45, 0.45]);
+    place(sphere, surface([0.85, 0.85, 0.85], 0.6, 0), [1.1, 0.35, 1.3], [0.35, 0.35, 0.35]);
+
+    return {
+        name: 'Sunlit exterior',
+        scene,
+        view: [[1.5, 1.7, 5.5], [-0.3, 0.9, -2.5]],
+        exposure_ev: -0.5,
+        note: 'Sky and sun. A white wall in sun beside a doorway in shade; car-paint orange, primaries, chrome.',
+    };
+}
+
+/**
+ * Evening indoors. A room lit by one warm lamp, with a window onto a bright panel and a low sun throwing a patch
+ * through it: exposed for the room, the window and the patch are far over.
+ *
+ * @param {Renderer} renderer
+ * @returns {ToneMapScene}
+ */
+function create_interior(renderer) {
+    const { scene, cube, sphere, surface, glow, place, lamp } = scene_base(renderer);
+
+    scene.lights.environment = make_flat_environment([0.003, 0.003, 0.004]);
+
+    const sun = make_sunlight({ intensity: 60, temperature: 4200, direction: new Vector3(0.3, -0.8, 0.5) });
+
+    place_light(scene, sun);
+
+    const plaster = surface([0.7, 0.66, 0.6], 0.9, 0);
+    const wood = surface(from_srgb8(120, 72, 40), 0.6, 0);
+
+    // the room: 8 x 3 x 6 m, the window in the far wall
+    place(cube, wood, [0, -0.05, 0], [8, 0.1, 6]);
+    place(cube, plaster, [0, 3.05, 0], [8, 0.1, 6]);
+    place(cube, plaster, [-4.05, 1.5, 0], [0.1, 3, 6]);
+    place(cube, plaster, [4.05, 1.5, 0], [0.1, 3, 6]);
+    place(cube, plaster, [0, 1.5, 3.05], [8, 3, 0.1]);
+
+    // the far wall around a 2 x 1.4 m window, its sill at 0.9 m
+    place(cube, plaster, [-2.5, 1.5, -3.05], [3, 3, 0.1]);
+    place(cube, plaster, [2.5, 1.5, -3.05], [3, 3, 0.1]);
+    place(cube, plaster, [0, 0.45, -3.05], [2, 0.9, 0.1]);
+    place(cube, plaster, [0, 2.65, -3.05], [2, 0.7, 0.1]);
+
+    // outside: a bright overcast panel, the view through the window, low enough that the sun clears it
+    place(cube, glow([0.85, 0.9, 1], 12), [0, 1.6, -6], [12, 3, 0.1]);
+
+    // a lamp on a side table: an emitting shade and a 2700 K light under it
+    const warm = kelvin_linear(2700);
+
+    place(cube, wood, [-1.9, 0.3, -1.4], [0.6, 0.6, 0.6]);
+    place(sphere, glow(warm, 4), [-1.9, 0.95, -1.4], [0.22, 0.18, 0.22]);
+    lamp([-1.9, 0.95, -1.4], warm, 4);
+
+    // a teal sofa, a rug, and a shelf of books in saturated covers
+    const teal = surface(from_srgb8(0, 120, 120), 0.9, 0);
+
+    // the sofa sits under the window, where the sun patch falls on its seat
+    place(cube, teal, [0.4, 0.25, -2.45], [2.4, 0.5, 0.9]);
+    place(cube, teal, [0.4, 0.65, -2.9], [2.4, 0.5, 0.2]);
+    place(cube, surface(from_srgb8(150, 30, 40), 0.95, 0), [0.4, 0.01, -0.8], [3, 0.02, 2]);
+
+    const covers = [[200, 30, 30], [240, 190, 20], [30, 90, 200], [30, 140, 60], [230, 230, 220], [120, 40, 140]];
+
+    // the shelf stands against the left wall, beside the lamp
+    place(cube, wood, [-3.8, 1, -1.5], [0.4, 2, 1.8]);
+
+    for (let i = 0; i < 12; i++) {
+        const c = covers[i % covers.length];
+
+        place(cube, surface(from_srgb8(c[0], c[1], c[2]), 0.7, 0), [-3.55, 1.25, -2.25 + i * 0.13], [0.1, 0.35, 0.1]);
+    }
+
+    place(sphere, surface([0.8, 0.8, 0.8], 0.3, 0), [-1.2, 0.25, 0.8], [0.25, 0.25, 0.25]);
+
+    return {
+        name: 'Dim interior',
+        scene,
+        view: [[1.5, 1.5, 2.6], [-0.8, 0.9, -2.5]],
+        exposure_ev: 1,
+        note: 'One 2700 K lamp; a window onto a bright panel, and a low sun patch on the teal sofa under it.',
+    };
+}
+
+/**
+ * A studio. A photographed studio environment and a soft key light over a white sweep, with product colours given as
+ * sRGB values — what Khronos PBR Neutral promises to reproduce, and the shot e-commerce viewers default to it for.
+ *
+ * @param {Renderer} renderer
+ * @returns {ToneMapScene}
+ */
+function create_product(renderer) {
+    const { scene, cube, sphere, knot, surface, place } = scene_base(renderer);
+
+    scene.lights.environment = make_flat_environment([0.5, 0.5, 0.5]);
+    load_default_environment(scene, '/test_assets/environments/octahedral/blue_photo_studio_2k.hdr');
+
+    const key = make_sunlight({ intensity: 1.5, temperature: 6500, direction: new Vector3(0.5, -0.7, -0.5) });
+
+    key.radius = 0.2;
+    place_light(scene, key);
+
+    const sweep = surface([0.8, 0.8, 0.8], 0.7, 0);
+
+    place(cube, sweep, [0, -0.05, 0], [12, 0.1, 8]);
+    place(cube, sweep, [0, 2, -3], [12, 4, 0.1]);
+
+    const products = [
+        [from_srgb8(231, 218, 63), 0.35, 0],   // canary yellow
+        [from_srgb8(203, 63, 63), 0.35, 0],    // a marketing red
+        [from_srgb8(149, 218, 188), 0.35, 0],  // mint
+        [[0.8, 0.8, 0.8], 0.9, 0],             // matte paper white
+        [[1, 0.77, 0.34], 0.25, 1],            // gold
+        [[0.04, 0.04, 0.045], 0.15, 0],        // gloss black
+    ];
+
+    for (let i = 0; i < products.length; i++) {
+        const [rgb, roughness, metallic] = products[i];
+
+        place(sphere, surface(rgb, roughness, metallic), [-2.5 + i, 0.4, 0], [0.4, 0.4, 0.4]);
+    }
+
+    place(knot, surface(from_srgb8(255, 110, 20), 0.3, 0), [0, 1.35, -1], [0.9, 0.9, 0.9]);
+
+    return {
+        name: 'Product shot',
+        scene,
+        view: [[0, 1.4, 4.2], [0, 0.6, -0.5]],
+        exposure_ev: 0,
+        note: 'Studio light on a white sweep. Base colours given in sRGB: yellow 231,218,63 · red 203,63,63 · mint 149,218,188.',
+    };
+}
+
+/**
+ * Every scene the page offers, in menu order.
+ *
+ * @param {Renderer} renderer
+ * @returns {Promise<ToneMapScene[]>}
+ */
+export async function create_scenes(renderer) {
+    await MeshoptClusterizer.ready;
+
+    return [
+        create_fire(renderer),
+        create_exterior(renderer),
+        create_interior(renderer),
+        create_product(renderer),
+    ];
+}

package/src/shade/playground/volumetrics_froxel/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/volumetrics_froxel/main.js"],"names":[],"mappings":"AA2aA,uCA8dC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/volumetrics_froxel/main.js"],"names":[],"mappings":"AA0fA,uCAgeC"}

package/src/shade/playground/volumetrics_froxel/main.js

@@ -16,6 +16,7 @@ import { load_gltf } from "../../renderer/loader/gltf/load_gltf.js";
 import { Renderer } from "../../renderer/Renderer.js";
 import { Scene } from "../../renderer/scene/Scene.js";
 import {
+    participating_media_volume_advance_noise,
     ParticipatingMediaVolume,
     VolumetricsParticleSpec
 } from "../../renderer/volumetrics/ParticipatingMediaVolume.js";
@@ -211,7 +212,20 @@ function add_participating_media(scene) {
      * @param {number} spec.fade
      * @param {number} [spec.yaw_degrees]
      */
-    function volume({ position, scale, particle, extinction, fade, yaw_degrees = 0 }) {
+    /**
+     * @param {object} spec
+     * @param {number[]} spec.position
+     * @param {number[]} spec.scale
+     * @param {object} spec.particle from MIE_PARTICLES_STANDARD_PRECOMPUTED
+     * @param {number} spec.extinction
+     * @param {number} spec.fade
+     * @param {number} [spec.yaw_degrees]
+     * @param {number} [spec.noise_strength] 0 is the uniform medium; 1 is the engine's noise tile as
+     * it is, sampled in world space every `noise_scale` metres, scrolled by `NOISE_WIND` each frame
+     * @param {number} [spec.noise_scale]
+     * @param {number} [spec.noise_warp]
+     */
+    function volume({ position, scale, particle, extinction, fade, yaw_degrees = 0, noise_strength = 0, noise_scale = 32, noise_warp = 0.1 }) {
         const v = new ParticipatingMediaVolume();
 
         v.transform.setTranslation(...position);
@@ -229,6 +243,14 @@ function add_participating_media(scene) {
         v.particle_spec = VolumetricsParticleSpec.fromMeep(particle);
         v.target_extinction = extinction;
 
+        v.noise_strength = noise_strength;
+        v.noise_scale = noise_scale;
+        v.noise_warp = noise_warp;
+
+        if (noise_strength > 0) {
+            noisy_volumes.add(v);
+        }
+
         scene.volumetrics.add(v);
 
         return v;
@@ -237,7 +259,8 @@ function add_participating_media(scene) {
     const P = MIE_PARTICLES_STANDARD_PRECOMPUTED;
 
     // the dense bank along the western edge — the thickest medium in the scene, and the one that
-    // fills the frame corners from the `vol_0` view
+    // fills the frame corners from the `vol_0` view. Noisy: the bank is what the "Fog bank" and
+    // "Inside the fog" viewpoints look at, so it is where the noise is judged and measured
     volume({
         position: [-55, 4, -5.116],
         scale: [10, 3, 20],
@@ -245,24 +268,34 @@ function add_participating_media(scene) {
         particle: P.CLOUD_DROPLET_LARGE,
         extinction: 1,
         fade: 0.5,
+        noise_strength: 1,
+        noise_scale: 20,
+        noise_warp: 0.15,
     });
 
-    // graveyard
+    // graveyard — noisy: wisps 4 m apart (the default tile's four features over 16 m), drifting
+    // with the wind and changing shape as the warp tap slides against the base
     volume({
         position: [-51.98019820725889, 7.899311905935347, -15.3228393616169],
         scale: [7, 5, 7],
         particle: P.FOG_DROPLET_SMALL,
         extinction: 0.4,
         fade: 1,
+        noise_strength: 1,
+        noise_scale: 16,
+        noise_warp: 0.15,
     });
 
-    // mine
+    // mine — noisy: coarser clumps of dust, warped harder
     volume({
         position: [-50.846390607312934, 0.3159949821015605, 17.89429433940319],
         scale: [10, 7, 10],
         particle: P.COARSE_DUST_MEDIUM,
         extinction: 0.4,
         fade: 4,
+        noise_strength: 1,
+        noise_scale: 24,
+        noise_warp: 0.25,
     });
 
     // large crystal
@@ -294,6 +327,52 @@ function add_participating_media(scene) {
     });
 }
 
+/**
+ * The wind every noisy volume drifts with, metres a second. Gentle on purpose: the froxel TAA
+ * blends about 39 frames, and a feature that moves far inside that window smears.
+ * @type {number[]}
+ */
+const NOISE_WIND = [1.2, 0, 0.4];
+
+/**
+ * One frame of the noise: what `ParticipatingMediaSystem` does for an ECS scene, done here by hand
+ * because this page builds its volumes directly. A debug global stands in for an A/B switch:
+ * `globalThis.__VOL_NOISE = 0` makes every noisy volume uniform (the branch the shader skips), `1`
+ * puts the noise back; `measure.js`'s `ab` flips it by frame blocks.
+ *
+ * @param {Scene} scene
+ * @param {number} dt seconds
+ */
+function advance_noise(scene, dt) {
+    const strength = globalThis.__VOL_NOISE ?? 1;
+    let changed = false;
+
+    for (const v of scene.volumetrics.volumes) {
+        if (!noisy_volumes.has(v)) {
+            continue;
+        }
+
+        if (v.noise_strength !== strength) {
+            v.noise_strength = strength;
+            changed = true;
+        }
+
+        if (strength > 0 && participating_media_volume_advance_noise(v, NOISE_WIND, dt)) {
+            changed = true;
+        }
+    }
+
+    if (changed) {
+        scene.volumetrics.invalidate();
+    }
+}
+
+/**
+ * The volumes `add_participating_media` gave noise, so the A/B switch knows which to touch.
+ * @type {Set<ParticipatingMediaVolume>}
+ */
+const noisy_volumes = new Set();
+
 /**
  * A rolling mean frame time, so the readout is legible rather than jittering.
  */
@@ -893,6 +972,8 @@ export async function start() {
             return;
         }
 
+        advance_noise(scene, time_delta_s);
+
         renderer.render(camera, scene, time_delta_s);
 
         frame_timer.add(raf_time_s);

package/src/shade/playground/water_refraction/README.md

@@ -49,16 +49,13 @@ wave/object checks. NSS uses the renderer's existing weight requirement and fall
 when weights have not been installed; this standalone page does not supply NSS weights.
 
 Inspection modes display prepared coverage, receiver UV, bounded path, classification/update count,
-surface radiance, residual, RGB throughput, shared front throughput, water's normalization term,
-and the confidence used to select the refraction lookup.
+surface radiance, residual, RGB throughput, shared front throughput and water's normalization term.
 They replace presentation **after** shared resolve and temporal processing, so diagnostics show
 the current frame's measurements without TAA history. Internal-resolution measurements are
 displayed with nearest sampling at the output resolution.
 Shift-click requests one pixel from four prepared textures on the next frame; normal frames perform
 no readback. Arrays are `receiver=[u,v,path,status+updates/32]`,
 `transmission=[Tr,Tg,Tb,coverage]`, `radiance=[Wr,Wg,Wb,residual]`.
-The separate `confidence` field is the final weight after rejecting unsupported lookups; the
-confidence display reads this same weight rather than recomputing an approximation.
 Status 0 is a converged Newton hit; codes 8–13 are validated HZB hits, 16–21 undisplaced opaque fallbacks,
 24–29 bounded sky fallbacks, and 31 the below-interface control. The low three bits preserve the
 Newton miss reason: 0 none/not attempted, 1 bounds/clip, 2 sky, 3 parallel/invalid, 4 ray interval,
@@ -87,14 +84,12 @@ reflection and in-scattered radiance and its RGB transmittance; shared resolve a
 Rear transparent surfaces/particles are attenuated at their original screen positions. Their radiance
 is not sampled through the bent ray. Missing/off-screen receivers get bounded, explicit fallbacks.
 Missing receivers use the medium's extinction distance, bounded by the trace budget. Final shading
-fades the receiver UV toward the control UV around emergent silhouettes,
-shoreline visibility gaps and screen edges, then performs one geometry-aware color lookup. It derives
-water thickness from that lookup's local receiver plane and builds its complete optical event. It
-does not crossfade two displaced images. Three quarter-resolution passes form a conservative
-geometry/sky boundary mask and bounded Euclidean distance field. Isolated trace failures never seed
-that field, which would amplify them into large moving blotches. The raw receiver/residual displays
-still show classified misses; Refraction confidence shows the displacement fade actually used by
-the final image. Screen reflections also fade near the ray origin and frame
+takes a validated receiver at its whole displacement, however near an object, the shore or the frame
+edge it lies; a pixel without one shows its own undisplaced background. It then performs one
+geometry-aware color lookup, derives water thickness from that lookup's local receiver plane and
+builds its complete optical event. Nothing fades between the two lookups: any point between them is
+one the ray never reached (see 2026-10-16 below). The raw receiver/residual displays show classified
+misses. Screen reflections fade near the ray origin and frame
 edges to avoid self-hit speckles, reusing the existing SSR back-face/thickness/vignette validation.
 As in the paper, a converged Newton root is final: screen bounds plus the one-pixel and distance
 residuals accept it, with no further visibility proof. Like the paper's method it can converge past
@@ -105,6 +100,8 @@ mip dimensions, including odd viewport sizes; it does not assume a floating halv
 grid. It starts in the source pixel, since water is absent from opaque depth. HZB slab crossings
 are intersected once with the selected receiver plane and validated again before shading. A second
 Newton search here could jump past the first footprint to a root the traversal has ruled out.
+Where that plane meets the ray past a floor's edge, over a texel that reads as sky, the texel the
+traversal stopped on is validated on its own instead.
 An exhausted traversal uses the control event. Color filtering accepts only taps on the validated
 receiver's local plane, with geometric-normal and interface-side checks. Receiver selection retains
 full-precision UV/path/control-path data. Final shading reads the same selected interface and
@@ -113,6 +110,18 @@ AVBOIT still supplies the sole transparency resolve.
 Underwater transport, two-interface transport, transparent receivers and caustics remain the plan's
 follow-on stage, rather than being implied by the below-interface/overlap controls.
 
+2026-10-16: refraction has no fade. Three quarter-resolution passes used to slide the receiver UV
+toward the pixel's own within 64 pixels of any dry pixel, emergent object or the sky, and near the
+frame edge. On the Shore preset that faded 56 of 199 probed validated hits and removed 17 entirely,
+and the slid lookup bent the floor into a ring around every post and the box. Seeding the fade from
+pixels neither trace resolved instead pumped as the waves moved those failures: at the posts, 17.6
+pixels a frame changed by more than 24 levels, against 0.8 with the old fade; seeding it in
+proportion to the failures brought the rings back. Without any fade the floor stays straight and
+the posts change 0.9 pixels a frame (16 stepped frames at 60 Hz, the default view, paired in one
+page). What remains are the pixels whose rays pass behind a post: they show their own background,
+in the post's outline displaced by the refraction offset. Filling them needs floor visible near the
+post; the neighbours' offset lands on the post itself.
+
 The tangent-plane update follows the paper's Appendix A, but geometry reconstruction differs:
 Newton reads the unfiltered depth and geometric face normal at mip zero, rather than the paper's
 distance-dependent mip filtering for local smoothness. The conservative HZB is a visibility
@@ -131,10 +140,9 @@ the traversal for failed pixels and screen reflections.
 The main risks to check on target hardware are moving-wave temporal ghosts (water keeps the opaque
 depth/motion contract), coarse 8×8 volume attenuation near thin/partial edges, tangent-plane hits at
 depth discontinuities, and first activation of AVBOIT in otherwise opaque scenes. No paper performance
-claim is adopted; disocclusion fades and geometry-aware filtering add work to water rendering.
+claim is adopted; geometry-aware filtering adds work to water rendering.
 Water transient targets cost approximately 68 bytes per internal pixel before allocator lifetime
-reuse, plus up to 0.375 bytes per pixel for the three quarter-resolution visibility fields:
-32 bytes for receiver/trace metadata, 4 for interface depth, and 32 for final optics/background. The tiny-loss
+reuse: 32 bytes for receiver/trace metadata, 4 for interface depth, and 32 for final optics/background. The tiny-loss
 throughput target is float32 and is read through unfilterable loads, so float32-filterable is unnecessary.
 
 The checker fixture uses 64 texels per square, preserving its world-space pattern while keeping
@@ -144,9 +152,9 @@ Numerical regressions execute production receiver/final-shading entries against
 transport, and water's volume splat through shared integration at full, partial and odd-edge coverage.
 They also cover the actual shared WGSL contribution/resolve, count conservation,
 normal-incidence acceptance, analytic plane/sphere intersections, invalid rays, bounded fallback thickness,
-geometry-only visibility seeds, single-lookup transport, subpixel receiver thickness,
-grazing visibility intervals, odd-dimension traversal crossings, receiver ownership at silhouettes,
-converged roots kept without a traversal budget, source/receiver frame-edge fades and old/new serialization.
+subpixel receiver thickness, grazing visibility intervals, odd-dimension traversal crossings, a hit on the
+floor texel before the sky, receiver ownership at silhouettes, converged roots kept without a traversal
+budget and old/new serialization.
 Software-device orchestration verifies water precedes shared warp/integration/resolve without adding
 another one. Visual checks are complementary: inspect TAA/fog, mixed sources, below-interface fallback,
 overlap, no-water/MBOIT suppression, terrain replacement and device restart on a real GPU.

package/src/shade/playground/water_refraction/index.html

@@ -33,7 +33,7 @@ input[type=range]{width:135px}input[type=number]{width:84px}input,select,button,
 <label>Internal scale<select id="resolution"><option value="1">1×</option><option value=".75">0.75×</option><option value=".5">0.5×</option></select></label>
 <label>Opaque SSR<input id="ssr" type="checkbox"></label><label>Atmospheric fog<input id="fog" type="checkbox"></label>
 <label>Transparency<select id="transparency"><option value="avboit">AVBOIT</option><option value="mboit">MBOIT (water unavailable)</option></select></label>
-<h2>Inspect</h2><label>Display<select id="debug"><option value="0">Final composite</option><option value="1">Coverage</option><option value="2">Receiver UV</option><option value="3">Water path</option><option value="4">Trace status / updates</option><option value="5">Surface radiance</option><option value="6">Residual</option><option value="7">RGB throughput</option><option value="8">Shared front throughput</option><option value="9">Water normalization</option><option value="10">Refraction confidence</option></select></label>
+<h2>Inspect</h2><label>Display<select id="debug"><option value="0">Final composite</option><option value="1">Coverage</option><option value="2">Receiver UV</option><option value="3">Water path</option><option value="4">Trace status / updates</option><option value="5">Surface radiance</option><option value="6">Residual</option><option value="7">RGB throughput</option><option value="8">Shared front throughput</option><option value="9">Water normalization</option></select></label>
 <div class="row"><button id="compile">Compile check</button><button id="profile">Profile (T)</button></div><pre id="probe">Shift-click water to read a pixel.</pre>
 <h2>Reproduce a view</h2><div class="row"><button id="copy">Copy state</button><button id="apply">Apply state</button></div><textarea id="state" aria-label="Saved camera and settings"></textarea>
 <p>Rear transparent radiance is attenuated on its original screen path. Initial optics select one water interface; underwater transport and caustics are follow-on work. <a href="./README.md">Review guide</a></p>