@yali-engine/water 0.12.0 → 0.14.0

package/dist/water.js

@@ -1,12 +1,42 @@
+import { mat4 } from '@yali-engine/math';
 import { bakeShore, toHalf } from "./shore.js";
 import { waterSurface } from "./water-shaders.gen.js";
 import { WaterWaves } from "./waves.js";
+/**
+ * The surface grid's index buffer (ADR-0222): quad (r, s) of the (rings + 1) × (segments + 1) lattice as (r, s) (r+1, s)
+ * (r+1, s+1) and (r, s) (r+1, s+1) (r, s+1).
+ */
+function gridIndices(device, rings, segments) {
+    const w = segments + 1;
+    const idx = new Uint32Array(rings * segments * 6);
+    let k = 0;
+    for (let r = 0; r < rings; r++) {
+        for (let s = 0; s < segments; s++) {
+            const a = r * w + s;
+            const b = (r + 1) * w + s;
+            idx[k++] = a;
+            idx[k++] = b;
+            idx[k++] = b + 1;
+            idx[k++] = a;
+            idx[k++] = b + 1;
+            idx[k++] = a + 1;
+        }
+    }
+    const buf = device.createBuffer({ label: 'yali:water:grid', size: idx.byteLength, usage: 0x10 | 0x08 });
+    device.queue.writeBuffer(buf, 0, idx);
+    return buf;
+}
 const TIERS = { high: 2, medium: 1, low: 0 };
-/** Bytes of `SurfaceParams` (`shaders/water/surface.wesl`): 4 cascades + 8 vectors. */
-const PARAMS_BYTES = (4 + 8 + 4) * 16;
-/** The motion uniform (ADR-0210): this frame's and last frame's view-projections (unjittered), the eye's move, a flag. */
-const MOTION_BYTES = 16 * 4 * 2 + 16;
+/** Bytes of `SurfaceParams` (`shaders/water/surface.wesl`): 4 cascades + 8 vectors + 4 of the surf + the glints + the clouds' shadow. */
+const PARAMS_BYTES = (4 + 8 + 4 + 2) * 16;
+/** The sun's solid angle, steradians: a disc 0.5357° across (`SUN_ANGLE` in the render package's shadows). */
+const SUN_SOLID_ANGLE = Math.PI * ((0.5357 * Math.PI) / 360) ** 2;
+/** The motion uniform (ADR-0210): this frame's and last frame's view-projections (unjittered), the eye's move, a flag; the reactive mask's strength (ADR-0229). */
+const MOTION_BYTES = 16 * 4 * 2 + 16 + 16;
 /** The first ring's spacing (m) and how much wider each next ring is. */
+/** The surf field's texels a side (ADR-0223): 0.5 m over the demo's 256 m shore field; the low tier's 256 (ADR-0232). */
+const SURF_TEXELS = 512;
+const SURF_TEXELS_LOW = 256;
 /** Spray sprites (`SPRAY_SIDE`² in surface.wesl, ADR-0218). */
 const SPRAY_SPRITES = 192 * 192;
 const FIRST_RING = 0.12;
@@ -67,10 +97,30 @@ export class Water {
     surfLip;
     /** Spray thrown up by breaking waves (ADR-0218; live, 0 = none, 1 = default). */
     spray;
+    /** The ripples finer than the cascades (ADR-0223; live, 0 none, 1 Cox & Munk's slope for the wind). */
+    ripples = 1;
+    /** Rocks the swash and the surf reach are wet: darker below the water's line (ADR-0228; live). */
+    wetRocks = true;
+    /**
+     * How strongly fresh whitewater, the swash's front, the lip and spray mark TAA's reactive mask (ADR-0229; live, 0–1,
+     * default 0.6), where TAA runs with `taa: { reactive: true }`: their shading moves unlike the surface's points, so TAA
+     * leans on this frame there instead of smearing them.
+     */
+    reactive = 0.6;
+    /**
+     * Sun glints (ADR-0226; live, 0 = the smooth highlight only, 1 = default): far water mirrors the sun from a few ripples
+     * at a time, so the glitter path is sparkles that rise and fade, keeping the smooth highlight's mean.
+     */
+    glints = 1;
+    /** A glinting facet's size, metres (ADR-0226; live, default 0.02: the capillary ripples). Smaller = more, finer sparkles. */
+    glintSize = 0.02;
+    /** How long a glint lives, seconds (ADR-0226; live, default 0.3). */
+    glintLife = 0.3;
     #quality = 'high';
     /**
      * The quality tier (ADR-0220; live): `high` everything; `medium` the coarse foam pattern only, 16 reflection steps, half
-     * the spray; `low` no caustics, no scene reflections, no spray. Setting it sets those knobs (they stay live after).
+     * the spray; `low` no caustics, no scene reflections, no spray, and a 256² surf field (1 m texels, ADR-0232). Setting it
+     * sets those knobs (they stay live after).
      */
     get quality() {
         return this.#quality;
@@ -82,8 +132,30 @@ export class Water {
         this.reflectionSteps = q === 'high' ? 24 : 16;
         this.reflections = q === 'low' ? 0 : 40;
         this.spray = q === 'high' ? 1 : q === 'medium' ? 0.5 : 0;
+        // The surf field's resolution follows the tier (ADR-0232): remade, and every group naming it with it.
+        if (this.#shoreField && this.#surfN !== this.#surfTexels()) {
+            this.#makeSurfField(this.#surfTexels());
+            this.#resetGroups();
+        }
+    }
+    /** The surf field's texels a side at this tier (ADR-0232). */
+    #surfTexels() {
+        return this.#quality === 'low' ? SURF_TEXELS_LOW : SURF_TEXELS;
+    }
+    /** The surf field's texels a side now. */
+    #surfN = 1;
+    #resetGroups() {
+        this.#groups = [null, null];
+        this.#groupKey = '';
+        this.#motionGroups = [null, null];
+        this.#sprayGroups = [null, null];
+        this.#surfGroups = [null, null];
+        this.#wetGroups = [null, null];
+        this.#sprayReactiveGroups = [null, null];
     }
     #prevSurfTime = 0;
+    /** The waves' time at the last motion upload: unchanged, they count as still (ADR-0228). */
+    #motionSeconds = Number.NaN;
     #shoreField = null;
     #shoreTexture;
     #spillTexture;
@@ -92,10 +164,33 @@ export class Water {
     segments;
     #pipeline;
     #sprayPipeline = null;
-    #sprayGroup = null;
+    #sprayGroups = [null, null];
     #sprayKey = '';
+    /**
+     * The surf field (ADR-0223): A (displacement, broken) and D (front, phase, height factor, carried whitewater) in
+     * ping-pong pairs, B (slope, face, onset) and C (fresh foam, swash cover, wet, film); `SURF_TEXELS`² over the shore field.
+     */
+    #surfA = [];
+    #surfB = null;
+    #surfC = null;
+    #surfD = [];
+    #surfPipeline = null;
+    #surfGroups = [null, null];
+    /** Which half of each pair this frame's surf field wrote. */
+    #surfParity = 0;
     #motionPipeline = null;
-    #motionGroup = null;
+    /** With TAA's reactive mask (ADR-0229): the motion pass with the mask as a second target, and spray into the mask. */
+    #motionReactivePipeline = null;
+    #sprayReactivePipeline = null;
+    #sprayReactiveGroups = [null, null];
+    #sprayReactiveKey = -1;
+    /** Wet rocks (ADR-0228): the fullscreen multiply, its inverse view-projection and bind group. */
+    #wetPipeline = null;
+    #wetParams;
+    #wetData = new Float32Array(16);
+    #wetGroups = [null, null];
+    #wetKey = -1;
+    #motionGroups = [null, null];
     #motionParams;
     #motionData = new Float32Array(MOTION_BYTES / 4);
     #prevVP = new Float32Array(16);
@@ -110,10 +205,12 @@ export class Water {
     #under = false;
     #inv = 1;
     #params;
+    /** The grid's triangles (ADR-0222): two a quad over the (rings + 1) × (segments + 1) lattice of points. */
+    #indices;
     #data = new Float32Array(PARAMS_BYTES / 4);
     #sampler;
     #clamp;
-    #group = null;
+    #groups = [null, null];
     #groupKey = '';
     #depthKey = -1;
     #seconds = 0;
@@ -149,7 +246,11 @@ export class Water {
         this.rings = o.rings ?? 240;
         this.segments = o.segments ?? 384;
         this.#params = device.createBuffer({ label: 'yali:water:surface', size: PARAMS_BYTES, usage: 0x40 | 0x08 });
+        this.#indices = gridIndices(device, this.rings, this.segments);
+        // Stand-ins until a seabed brings the surf (the shaders name the field's bindings either way).
+        this.#makeSurfField(1);
         this.#motionParams = device.createBuffer({ label: 'yali:water:motion', size: MOTION_BYTES, usage: 0x40 | 0x08 });
+        this.#wetParams = device.createBuffer({ label: 'yali:water:wet', size: 64, usage: 0x40 | 0x08 });
         this.#clamp = device.createSampler({ label: 'yali:water:clamp', magFilter: 'linear', minFilter: 'linear' });
         this.#sampler = device.createSampler({ label: 'yali:water:wrap', addressModeU: 'repeat', addressModeV: 'repeat', magFilter: 'linear', minFilter: 'linear', mipmapFilter: 'linear' });
     }
@@ -165,6 +266,8 @@ export class Water {
             }),
             this.waves.init(cache),
             cache.compute({ label: 'yali:water:copy-depth', compute: { shader: waterSurface, entryPoint: 'copy_depth' } }).then((p) => (this.#copyDepth = p)),
+            // The surf field (ADR-0223).
+            cache.compute({ label: 'yali:water:surf-field', compute: { shader: waterSurface, entryPoint: 'surf_field' } }).then((p) => (this.#surfPipeline = p)),
             // Spray (ADR-0218): soft sprites over the surface, premultiplied, depth-tested, never written.
             cache
                 .render({
@@ -175,6 +278,15 @@ export class Water {
                 depthStencil: { format: 'depth32float', depthWriteEnabled: false, depthCompare: 'greater' },
             })
                 .then((p) => (this.#sprayPipeline = p)),
+            // Wet rocks (ADR-0228): a fullscreen multiply over the opaque scene.
+            cache
+                .render({
+                label: 'yali:water:wet',
+                vertex: { shader: waterSurface, entryPoint: 'vs_wet' },
+                fragment: { shader: waterSurface, entryPoint: 'fs_wet', targets: [{ format, blend: { color: { srcFactor: 'dst', dstFactor: 'zero' }, alpha: { srcFactor: 'zero', dstFactor: 'one' } } }] },
+                primitive: { topology: 'triangle-list' },
+            })
+                .then((p) => (this.#wetPipeline = p)),
             // The waves' motion for TAA (ADR-0210): the same grid drawn into the motion target.
             cache
                 .render({
@@ -185,6 +297,25 @@ export class Water {
                 depthStencil: { format: 'depth32float', depthWriteEnabled: true, depthCompare: 'greater' },
             })
                 .then((p) => (this.#motionPipeline = p)),
+            // With TAA's reactive mask (ADR-0229): the same motion with the mask beside it, and the spray's sprites into it.
+            cache
+                .render({
+                label: 'yali:water:motion-reactive',
+                vertex: { shader: waterSurface, entryPoint: 'vs_motion' },
+                fragment: { shader: waterSurface, entryPoint: 'fs_motion_reactive', targets: [{ format: 'rgba16float' }, { format: 'r8unorm' }] },
+                primitive: { topology: 'triangle-list', cullMode: 'none' },
+                depthStencil: { format: 'depth32float', depthWriteEnabled: true, depthCompare: 'greater' },
+            })
+                .then((p) => (this.#motionReactivePipeline = p)),
+            cache
+                .render({
+                label: 'yali:water:spray-reactive',
+                vertex: { shader: waterSurface, entryPoint: 'vs_spray' },
+                fragment: { shader: waterSurface, entryPoint: 'fs_spray_reactive', targets: [{ format: 'r8unorm', blend: { color: { operation: 'max', srcFactor: 'one', dstFactor: 'one' }, alpha: { operation: 'max', srcFactor: 'one', dstFactor: 'one' } } }] },
+                primitive: { topology: 'triangle-list', cullMode: 'none' },
+                depthStencil: { format: 'depth32float', depthWriteEnabled: false, depthCompare: 'greater' },
+            })
+                .then((p) => (this.#sprayReactivePipeline = p)),
         ]);
         this.#pipeline = pipeline;
     }
@@ -213,7 +344,16 @@ export class Water {
         d.set([...this.absorption, this.refraction], 36);
         // The scene behind is read at the pre-exposure it was written with (this frame's).
         this.#inv = 1 / Math.max(1e-6, f.scene.preExposure);
-        d.set([this.shoreFoam, this.#under ? 1 : 0, this.#inv, 0], 40);
+        // The ripples finer than the cascades (ADR-0223) make up the slope variance Cox & Munk measured for this wind
+        // (0.003 + 0.00512 U in all, half an axis) that the cascades leave out; their gain over the finest cascade's own.
+        const sv = this.waves.slopeVariance;
+        const have = sv.reduce((a, b) => a + b, 0);
+        const missing = Math.max(0, (0.003 + 0.00512 * this.waves.wind) / 2 - have);
+        const ripples = this.ripples * Math.min(8, Math.sqrt(missing / Math.max(1e-9, sv[sv.length - 1] * 0.74)));
+        // Shore foam is churned by waves (ADR-0230): a calm sea's thin water over sand or a rock's top does not foam. Its band
+        // grows from nothing at 2.5 m/s of wind to the full depth from 6.5 (whitecaps begin about there).
+        const sea = Math.max(0, Math.min(1, (this.waves.wind - 2.5) / 4));
+        d.set([Math.max(1e-4, this.shoreFoam * sea), this.#under ? 1 : 0, this.#inv, ripples], 40);
         d.set([this.reflections, this.reflectionSteps, 0.6, this.debugMirror ? 1 : 0], 44);
         // The surf (ADR-0213): the eye on the shore field (f64 here, small after), the crest clock now and last frame.
         const sf = this.#shoreField;
@@ -233,7 +373,19 @@ export class Water {
         const surfTime = ((this.#seconds % span) + span) % span;
         d.set([surfTime, this.surfVariety, this.surfLip, this.#prevSurfTime], 60);
         this.#prevSurfTime = surfTime;
+        d.set([this.glints, Math.max(1e-3, this.glintSize), SUN_SOLID_ANGLE, Math.max(1 / 60, this.glintLife)], 64);
+        // The clouds' shadow (ADR-0227): the map's centre less the eye in f64, then small.
+        const cs = f.environment.cloudShadow;
+        if (cs)
+            d.set([cs.centre[0] - eye[0], cs.centre[1] - eye[2], 1 / cs.size, 1], 68);
+        else
+            d.set([0, 0, 0, 0], 68);
         this.device.queue.writeBuffer(this.#params, 0, d);
+        if (this.enabled)
+            this.#runSurfField();
+        // Wet rocks (ADR-0228): the scene's points from its depth, through this frame's inverse view-projection.
+        if (this.wetRocks && mat4.invert(this.#wetData, f.camera.uniform))
+            this.device.queue.writeBuffer(this.#wetParams, 0, this.#wetData);
         if (this.#prevDisplacement) {
             // Motion: this frame's view-projection (camera-relative, unjittered: `camera.uniform`), last frame's, and how far
             // the eye moved (last frame's camera-relative points are this frame's plus it).
@@ -242,10 +394,13 @@ export class Water {
             for (let i = 0; i < 16; i++)
                 m[i] = vp[i];
             m.set(this.#prevVP, 16);
+            m[36] = Math.max(0, Math.min(1, this.reactive));
             for (let i = 0; i < 3; i++)
                 m[32 + i] = eye[i] - this.#prevEye[i];
-            // Until last frame's waves exist (two frames), the waves count as still: the camera's motion only.
-            m[35] = this.motion && this.#motionFrames >= 2 && this.frozenAt === null ? 1 : 0;
+            // Until last frame's waves exist (two frames), the waves count as still: the camera's motion only. Held waves move
+            // when their time changes (a probe stepping them frame by frame, ADR-0228), and are still while it stands.
+            m[35] = this.motion && this.#motionFrames >= 2 && this.#seconds !== this.#motionSeconds ? 1 : 0;
+            this.#motionSeconds = this.#seconds;
             this.device.queue.writeBuffer(this.#motionParams, 0, m);
             for (let i = 0; i < 16; i++)
                 this.#prevVP[i] = vp[i];
@@ -253,6 +408,94 @@ export class Water {
                 this.#prevEye[i] = eye[i];
         }
     }
+    /** The surf field's textures (ADR-0223), made with the seabed: four rgba16float targets, A and D in pairs. */
+    #makeSurfField(texels) {
+        this.#surfN = texels;
+        for (const t of [...this.#surfA, ...this.#surfD, this.#surfB, this.#surfC])
+            t?.destroy();
+        const make = (label) => this.device.createTexture({ label, size: [texels, texels], format: 'rgba16float', usage: 0x08 | 0x04 });
+        this.#surfA = [make('yali:water:surf-a0'), make('yali:water:surf-a1')];
+        this.#surfB = make('yali:water:surf-b');
+        this.#surfC = make('yali:water:surf-c');
+        this.#surfD = [make('yali:water:surf-d0'), make('yali:water:surf-d1')];
+    }
+    /** The surf field as the surface, motion and spray passes read it: this frame's half `p` and last frame's. */
+    #surfEntries(p) {
+        if (!this.#surfB)
+            return [];
+        return [
+            { binding: 17, resource: this.#surfA[p].createView() },
+            { binding: 18, resource: this.#surfB.createView() },
+            { binding: 19, resource: this.#surfC.createView() },
+            { binding: 20, resource: this.#surfD[p].createView() },
+            // Last frame's displacement (the motion pass's; auto layouts keep it wherever `surf_tex` is compiled in). Last
+            // frame's whitewater (22) only the surf field reads.
+            { binding: 21, resource: this.#surfA[1 - p].createView() },
+        ];
+    }
+    /**
+     * The surf field for this frame (ADR-0223), in its own submission before the frame's passes (TAA's motion pass may come
+     * before a feature's own): `surf_field` writes A and D's other half from last frame's D.
+     */
+    #runSurfField() {
+        if (!this.#surfPipeline || !this.#surfB || !this.#shoreField)
+            return;
+        const p = 1 - this.#surfParity;
+        this.#surfParity = p;
+        this.#surfGroups[p] ??= this.device.createBindGroup({
+            label: 'yali:water:surf-field',
+            layout: this.#surfPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 2, resource: { buffer: this.#params } },
+                { binding: 9, resource: this.#clamp },
+                { binding: 14, resource: this.#shoreTexture.createView() },
+                { binding: 15, resource: this.#spillTexture.createView() },
+                { binding: 22, resource: this.#surfD[1 - p].createView() },
+                { binding: 23, resource: this.#surfA[p].createView() },
+                { binding: 24, resource: this.#surfB.createView() },
+                { binding: 25, resource: this.#surfC.createView() },
+                { binding: 26, resource: this.#surfD[p].createView() },
+            ],
+        });
+        const enc = this.device.createCommandEncoder({ label: 'yali:water:surf-field' });
+        const pass = enc.beginComputePass({ label: 'yali:water:surf-field' });
+        pass.setPipeline(this.#surfPipeline);
+        pass.setBindGroup(0, this.#surfGroups[p]);
+        pass.dispatchWorkgroups(this.#surfN / 8, this.#surfN / 8);
+        pass.end();
+        this.device.queue.submit([enc.finish()]);
+    }
+    /**
+     * The surf field's GPU cost, ms a frame (ADR-0223): one submission of `frames` + 1 dispatches less one of 1, over
+     * `frames`, each timed to `onSubmittedWorkDone` (the render loop's own frames land in either window, and the difference
+     * cancels them; the field runs in its own submission, which the frame graph's timers do not see). Null without a seabed.
+     *
+     * @example
+     * const ms = await ocean.measureSurf();
+     */
+    async measureSurf(frames = 20) {
+        const p = this.#surfParity;
+        const group = this.#surfGroups[p];
+        if (!this.#surfPipeline || !group)
+            return null;
+        const run = async (n) => {
+            const enc = this.device.createCommandEncoder({ label: 'yali:water:surf-measure' });
+            const pass = enc.beginComputePass();
+            pass.setPipeline(this.#surfPipeline);
+            pass.setBindGroup(0, group);
+            for (let i = 0; i < n; i++)
+                pass.dispatchWorkgroups(this.#surfN / 8, this.#surfN / 8);
+            pass.end();
+            await this.device.queue.onSubmittedWorkDone();
+            const t0 = performance.now();
+            this.device.queue.submit([enc.finish()]);
+            await this.device.queue.onSubmittedWorkDone();
+            return performance.now() - t0;
+        };
+        await run(2);
+        const small = await run(1);
+        return Math.max(0, (await run(frames + 1)) - small) / frames;
+    }
     /**
      * The seabed under the water (ADR-0213): bakes the shore field (`bakeShore`: depth, the crests' arrival phase for
      * `surfPeriod`, their direction) and uploads it; the surf then rises, bends to the beach and breaks. Call again after
@@ -281,32 +524,34 @@ export class Water {
         this.#spillTexture = this.device.createTexture({ label: 'yali:water:spill', size: [field.size, field.size], format: 'rg16float', usage: 0x04 | 0x02 });
         this.device.queue.writeTexture({ texture: this.#spillTexture }, spill, { bytesPerRow: field.size * 4 }, [field.size, field.size]);
         this.#shoreField = field;
-        this.#group = null;
-        this.#groupKey = '';
-        this.#motionGroup = null;
-        this.#sprayGroup = null;
+        this.#resetGroups();
+        this.#makeSurfField(this.#surfTexels());
         return field;
     }
     /** The baked shore field, or null before `setSeabed`. */
     get shoreField() {
         return this.#shoreField;
     }
-    addMotionPasses(graph, motion, depth) {
+    addMotionPasses(graph, motion, depth, reactive = null) {
         const disp = this.waves.displacement;
         this.#prevDisplacement ??= this.device.createTexture({ label: 'yali:water:displacement-prev', size: [disp.width, disp.height, disp.depthOrArrayLayers], format: disp.format, usage: 0x04 | 0x02 });
-        this.#motionGroup = null;
+        this.#motionGroups = [null, null];
         graph.addPass({
             name: 'water.motion',
             kind: 'render',
-            reads: ['water.waves'],
+            // With TAA's reactive mask (ADR-0229) the mask is a second target, written after its clear.
+            reads: ['water.waves', ...(reactive ? ['post.reactiveClear'] : [])],
             color: { target: motion, clear: { r: 0, g: 0, b: 0, a: 0 }, load: true },
+            ...(reactive ? { extraColor: [{ target: reactive, clear: { r: 0, g: 0, b: 0, a: 0 }, load: true }] } : {}),
             depth: { target: depth, clear: 0, load: true, store: true },
             execute: (pass) => {
-                if (!this.enabled || !this.#motionPipeline || !this.#scene)
+                const pipeline = reactive ? this.#motionReactivePipeline : this.#motionPipeline;
+                if (!this.enabled || !pipeline || !this.#scene)
                     return;
-                this.#motionGroup ??= this.device.createBindGroup({
+                const mp = this.#surfParity;
+                this.#motionGroups[mp] ??= this.device.createBindGroup({
                     label: 'yali:water:motion',
-                    layout: this.#motionPipeline.getBindGroupLayout(0),
+                    layout: pipeline.getBindGroupLayout(0),
                     entries: [
                         { binding: 0, resource: { buffer: this.#scene.cameraBuffer } },
                         { binding: 2, resource: { buffer: this.#params } },
@@ -317,13 +562,50 @@ export class Water {
                         { binding: 9, resource: this.#clamp },
                         { binding: 14, resource: this.#shoreTexture.createView() },
                         { binding: 15, resource: this.#spillTexture.createView() },
+                        ...this.#surfEntries(mp),
                     ],
                 });
-                pass.setPipeline(this.#motionPipeline);
-                pass.setBindGroup(0, this.#motionGroup);
-                pass.draw(this.rings * this.segments * 6);
+                pass.setPipeline(pipeline);
+                pass.setBindGroup(0, this.#motionGroups[mp]);
+                pass.setIndexBuffer(this.#indices, 'uint32');
+                pass.drawIndexed(this.rings * this.segments * 6);
             },
         });
+        // The spray's sprites into the reactive mask (ADR-0229), depth-tested against the motion pass's depth.
+        if (reactive) {
+            graph.addPass({
+                name: 'water.sprayReactive',
+                kind: 'render',
+                reads: ['water.motion', 'water.depth'],
+                color: { target: reactive, clear: { r: 0, g: 0, b: 0, a: 0 }, load: true },
+                depth: { target: depth, clear: 0, load: true, store: true },
+                execute: (pass, ctx) => {
+                    if (!this.enabled || this.spray <= 0 || this.reactive <= 0 || !this.#shoreField || !this.#sprayReactivePipeline || !this.#scene)
+                        return;
+                    const sq = this.#surfParity;
+                    if (this.#sprayReactiveKey !== ctx.generation) {
+                        this.#sprayReactiveKey = ctx.generation;
+                        this.#sprayReactiveGroups = [null, null];
+                    }
+                    this.#sprayReactiveGroups[sq] ??= this.device.createBindGroup({
+                        label: 'yali:water:spray-reactive',
+                        layout: this.#sprayReactivePipeline.getBindGroupLayout(0),
+                        entries: [
+                            { binding: 0, resource: { buffer: this.#scene.cameraBuffer } },
+                            { binding: 2, resource: { buffer: this.#params } },
+                            { binding: 9, resource: this.#clamp },
+                            { binding: 13, resource: { buffer: this.#motionParams } },
+                            { binding: 14, resource: this.#shoreTexture.createView() },
+                            { binding: 15, resource: this.#spillTexture.createView() },
+                            ...this.#surfEntries(sq),
+                        ],
+                    });
+                    pass.setPipeline(this.#sprayReactivePipeline);
+                    pass.setBindGroup(0, this.#sprayReactiveGroups[sq]);
+                    pass.draw(6, SPRAY_SPRITES);
+                },
+            });
+        }
         // After TAA has read this frame's motion, keep this frame's waves for the next frame's.
         graph.addPass({
             name: 'water.keepWaves',
@@ -344,10 +626,42 @@ export class Water {
         this.#scene = scene;
         graph.transientTexture('water.under', { format: 'rgba16float', usage: 0x02 | 0x04 });
         graph.transientTexture('water.depth', { format: 'r32float', usage: 0x08 | 0x04 });
+        // Wet rocks (ADR-0228): before the copy, so the water sees them wet through itself too.
+        graph.addPass({
+            name: 'water.wet',
+            kind: 'render',
+            reads: [depth],
+            writes: ['water.wet'],
+            color: { target: color, clear: { r: 0, g: 0, b: 0, a: 0 }, load: true },
+            execute: (pass, ctx) => {
+                if (!this.enabled || !this.wetRocks || !this.#wetPipeline || !this.#shoreField)
+                    return;
+                const wp = this.#surfParity;
+                if (this.#wetKey !== ctx.generation) {
+                    this.#wetKey = ctx.generation;
+                    this.#wetGroups = [null, null];
+                }
+                this.#wetGroups[wp] ??= this.device.createBindGroup({
+                    label: 'yali:water:wet',
+                    layout: this.#wetPipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 2, resource: { buffer: this.#params } },
+                        { binding: 9, resource: this.#clamp },
+                        { binding: 10, resource: ctx.view(depth) },
+                        { binding: 14, resource: this.#shoreTexture.createView() },
+                        { binding: 28, resource: { buffer: this.#wetParams } },
+                        ...this.#surfEntries(wp).filter((e) => e.binding === 19 || e.binding === 20),
+                    ],
+                });
+                pass.setPipeline(this.#wetPipeline);
+                pass.setBindGroup(0, this.#wetGroups[wp]);
+                pass.draw(3);
+            },
+        });
         graph.addPass({
             name: 'water.under',
             kind: 'encoder',
-            reads: [],
+            reads: ['water.wet'],
             writes: ['water.under'],
             execute: (encoder, ctx) => {
                 if (this.enabled)
@@ -392,10 +706,15 @@ export class Water {
                 if (!this.enabled || !env)
                     return;
                 const pano = env.cloudPanorama;
-                const key = `${env.version}:${ctx.generation}:${pano ? pano.label : '-'}`;
-                if (!this.#group || key !== this.#groupKey) {
+                const shadow = env.cloudShadow?.texture ?? null;
+                const key = `${env.version}:${ctx.generation}:${pano ? pano.label : '-'}:${shadow ? shadow.label : '-'}`;
+                const gp = this.#surfParity;
+                if (key !== this.#groupKey) {
                     this.#groupKey = key;
-                    this.#group = this.device.createBindGroup({
+                    this.#groups = [null, null];
+                }
+                if (!this.#groups[gp]) {
+                    this.#groups[gp] = this.device.createBindGroup({
                         label: 'yali:water:surface',
                         layout: this.#pipeline.getBindGroupLayout(0),
                         entries: [
@@ -413,12 +732,16 @@ export class Water {
                             { binding: 15, resource: this.#spillTexture.createView() },
                             // The clouds' panorama (ADR-0219), or a stand-in the shader never reads (size.z = 0).
                             { binding: 16, resource: (pano ?? this.#spillTexture).createView() },
+                            // The clouds' shadow (ADR-0227), or a stand-in the shader never reads (cshadow.w = 0).
+                            { binding: 27, resource: (shadow ?? this.#spillTexture).createView() },
+                            ...this.#surfEntries(gp),
                         ],
                     });
                 }
                 pass.setPipeline(this.#pipeline);
-                pass.setBindGroup(0, this.#group);
-                pass.draw(this.rings * this.segments * 6);
+                pass.setBindGroup(0, this.#groups[gp]);
+                pass.setIndexBuffer(this.#indices, 'uint32');
+                pass.drawIndexed(this.rings * this.segments * 6);
             },
         });
         // Spray over the surface (ADR-0218): drawn only with a seabed (the surf), one instance per sprite.
@@ -431,10 +754,16 @@ export class Water {
             execute: (pass, ctx) => {
                 if (!this.enabled || this.spray <= 0 || !this.#shoreField || !this.#sprayPipeline)
                     return;
-                const key = `${ctx.generation}`;
-                if (!this.#sprayGroup || key !== this.#sprayKey) {
+                // The clouds' shadow dims the sprites' sun too (ADR-0227).
+                const shadow = this.#env?.cloudShadow?.texture ?? null;
+                const key = `${ctx.generation}:${shadow ? shadow.label : '-'}`;
+                const sq = this.#surfParity;
+                if (key !== this.#sprayKey) {
                     this.#sprayKey = key;
-                    this.#sprayGroup = this.device.createBindGroup({
+                    this.#sprayGroups = [null, null];
+                }
+                if (!this.#sprayGroups[sq]) {
+                    this.#sprayGroups[sq] = this.device.createBindGroup({
                         label: 'yali:water:spray',
                         layout: this.#sprayPipeline.getBindGroupLayout(0),
                         entries: [
@@ -445,11 +774,13 @@ export class Water {
                             { binding: 9, resource: this.#clamp },
                             { binding: 14, resource: this.#shoreTexture.createView() },
                             { binding: 15, resource: this.#spillTexture.createView() },
+                            { binding: 27, resource: (shadow ?? this.#spillTexture).createView() },
+                            ...this.#surfEntries(sq),
                         ],
                     });
                 }
                 pass.setPipeline(this.#sprayPipeline);
-                pass.setBindGroup(0, this.#sprayGroup);
+                pass.setBindGroup(0, this.#sprayGroups[sq]);
                 pass.draw(6, SPRAY_SPRITES);
             },
         });
@@ -483,6 +814,9 @@ export class Water {
             tiles: [...this.waves.tiles],
             size: this.waves.size,
             gpuBytes: this.gpuBytes,
+            glints: { strength: this.glints, size: this.glintSize, life: this.glintLife },
+            wetRocks: this.wetRocks,
+            reactive: this.reactive,
             surf: { seabed: !!this.#shoreField, height: this.surfHeight, period: this.surfPeriod, breaking: this.surfBreaking, lean: this.surfLean, start: this.surfStart, calm: this.surfCalm, variety: this.surfVariety, lip: this.surfLip, spray: this.spray },
         });
         return [
@@ -507,12 +841,22 @@ export class Water {
                         surfVariety: { type: 'number', description: 'How much waves differ: sets and sections along the shore, 0 (all alike) to 1.' },
                         surfLip: { type: 'number', description: 'How far a breaking crest throws its lip forward, 0 to 1.' },
                         spray: { type: 'number', description: 'Spray thrown up by breaking waves, 0 (none) to 4; 1 is the default.' },
+                        glints: { type: 'number', description: 'Sun glints on far water, 0 (the smooth highlight only) to 1 (default).' },
+                        glintSize: { type: 'number', description: 'The size of a glinting ripple, metres, 0.002 to 0.5 (default 0.02): smaller gives more, finer sparkles.' },
+                        glintLife: { type: 'number', description: 'How long a glint lives, seconds, 0.05 to 3 (default 0.3).' },
+                        reactive: { type: 'number', description: 'How strongly whitewater and spray mark TAA’s reactive mask, 0 to 1 (default 0.6; needs taa: { reactive: true }).' },
+                        wetRocks: { type: 'boolean', description: 'Rocks the swash and the surf reach look wet: darker below the water line.' },
                         follow: { type: 'boolean', description: 'true: the waves follow the app clock again.' },
                     },
                 },
                 run: (args) => {
                     if (args.enabled !== undefined)
                         this.enabled = !!args.enabled;
+                    if (args.wetRocks !== undefined)
+                        this.wetRocks = !!args.wetRocks;
+                    const rx = num(args, 'reactive', 0, 1);
+                    if (rx !== undefined)
+                        this.reactive = rx;
                     if (args.quality !== undefined) {
                         if (args.quality !== 'high' && args.quality !== 'medium' && args.quality !== 'low')
                             throw bad('quality', 'must be high, medium or low');
@@ -556,6 +900,15 @@ export class Water {
                     const sr = num(args, 'spray', 0, 4);
                     if (sr !== undefined)
                         this.spray = sr;
+                    const gl = num(args, 'glints', 0, 1);
+                    if (gl !== undefined)
+                        this.glints = gl;
+                    const gs = num(args, 'glintSize', 0.002, 0.5);
+                    if (gs !== undefined)
+                        this.glintSize = gs;
+                    const gt = num(args, 'glintLife', 0.05, 3);
+                    if (gt !== undefined)
+                        this.glintLife = gt;
                     return state();
                 },
             },
@@ -588,6 +941,9 @@ export class Water {
     destroy() {
         this.waves.destroy();
         this.#params.destroy();
+        this.#indices.destroy();
+        for (const t of [...this.#surfA, ...this.#surfD, this.#surfB, this.#surfC])
+            t?.destroy();
         this.#motionParams.destroy();
         this.#shoreTexture.destroy();
         this.#spillTexture.destroy();