@zephyr3d/scene 0.9.26 → 0.10.0

package/dist/render/fft_wavegenerator.js

@@ -6,29 +6,34 @@ import '../shaders/atmosphere.js';
 import { fetchSampler } from '../utility/misc.js';
 import { getDevice } from '../app/api.js';
 
+/**
+ * Size of the largest cascade over the peak wavelength of the spectrum,
+ * 2 pi sqrt(2) U^2 / g for the Phillips spectrum at wind speed U: the peak
+ * repeats some 14 times across it, and the band below it, where no wave
+ * height is left, stays out of every cascade.
+ */ const CASCADE_PEAK_SPAN = 14;
+/**
+ * Size of a cascade over that of the next smaller one. Each covers the
+ * wavelengths between the next larger one's Nyquist and its own, about three
+ * octaves at this ratio; not an integer, so the tiles of the cascades do not
+ * repeat in step.
+ */ const CASCADE_RATIO = 7.5;
+/** Sizes of the largest cascade are kept within, in meters. */ const CASCADE_MIN_SIZE = 16;
+const CASCADE_MAX_SIZE = 16384;
 function getDefaultBuildParams() {
     return {
         cascades: [
             {
-                size: 400.0,
                 strength: 0.4,
-                croppiness: -1.5,
-                minWave: 0,
-                maxWave: 100
+                croppiness: -1.5
             },
             {
-                size: 100.0,
                 strength: 0.4,
-                croppiness: -1.2,
-                minWave: 0,
-                maxWave: 100
+                croppiness: -1.2
             },
             {
-                size: 15,
-                strength: 0.2,
-                croppiness: -0.5,
-                minWave: 0,
-                maxWave: 7
+                strength: 0.4,
+                croppiness: -0.5
             }
         ],
         resolution: 256,
@@ -42,6 +47,22 @@ const RENDER_NONE = 0;
 const RENDER_NORMAL = 1;
 const RENDER_TWO_PASS = 2;
 const THREAD_GROUP_SIZE = 16;
+/**
+ * Mip levels of a cascade over which the share of its slope variance kept is
+ * tabulated (levels 1 to this); level 0 keeps it all, the level past the table
+ * none.
+ */ const SLOPE_LOD_LEVELS = 8;
+/**
+ * Anisotropy of the slope sampling. At 1 the mip level follows the pixel's
+ * long axis: soft at grazing views, but the finest near the camera. Higher
+ * picks it from the short axis, and the few taps the hardware takes along the
+ * long one leave the shortest waves to alias into speckle close by.
+ */ const SLOPE_MAX_ANISOTROPY = 1;
+/**
+ * Scale of the screen derivatives the slopes are filtered by, log2 of it a bias
+ * of the mip level. Above 1 hides the speckle of a higher anisotropy, but
+ * softens the near waves by as much.
+ */ const SLOPE_FILTER_SCALE = 1;
 /**
  * This class generates a 2D ocean field using the Fast Fourier Transform (FFT) algorithm.
  * @public
@@ -72,6 +93,8 @@ const THREAD_GROUP_SIZE = 16;
     _instanceData;
     _ifftTextures;
     _cascades;
+    /** Per cascade: slope (var x, var z, cov xz) in world units, and its texel size */ _slopeVariances;
+    /** Per cascade, two each: share of its slope variance mip levels 1-4 and 5-8 keep */ _slopeRetained;
     _paramsChanged;
     _version;
     _resolutionChanged;
@@ -86,7 +109,7 @@ const THREAD_GROUP_SIZE = 16;
         super();
         const device = getDevice();
         const renderTargetFloat16 = device.getDeviceCaps().textureCaps.supportHalfFloatColorBuffer;
-        const maxDrawBuffers = /*device.type !== 'webgl' && */ renderTargetFloat16 ? device.getDeviceCaps().framebufferCaps.maxDrawBuffers : 0;
+        const maxDrawBuffers = renderTargetFloat16 ? device.getDeviceCaps().framebufferCaps.maxDrawBuffers : 0;
         this._textureFormat = 'rgba16f';
         this._h0TextureFormat = 'rgba16f';
         this._dataTextureFormat = 'rgba16f';
@@ -173,6 +196,12 @@ const THREAD_GROUP_SIZE = 16;
                 new Vector4(),
                 new Vector4()
             ];
+            this._slopeVariances = [
+                new Vector4(),
+                new Vector4(),
+                new Vector4()
+            ];
+            this._slopeRetained = new Float32Array(6 * 4);
             this._updateRenderStates = getDevice().createRenderStateSet();
             this._updateRenderStates.useRasterizerState().setCullMode('none');
             this._updateRenderStates.useDepthState().enableTest(false).enableWrite(false);
@@ -186,17 +215,7 @@ const THREAD_GROUP_SIZE = 16;
     clone() {
         return new FFTWaveGenerator(this._params);
     }
-    /*
-  get params() {
-    return this._params;
-  }
-  set params(val: OceanFieldBuildParams) {
-    if (val && val !== this._params) {
-      this._params = val;
-      this.paramsChanged();
-    }
-  }
-  */ paramsChanged() {
+    paramsChanged() {
         this._paramsChanged = true;
         this._version++;
     }
@@ -237,18 +256,18 @@ const THREAD_GROUP_SIZE = 16;
             this.paramsChanged();
         }
     }
-    /** Gets the wave length for the specified cascade */ getWaveLength(cascade) {
-        return this._params.cascades[cascade].size;
-    }
     /**
-   * Sets the wave length for the specified cascade
+   * Gets the size of the patch the specified cascade simulates, in meters.
+   *
+   * The sizes follow the wind: the largest cascade spans the peak wavelength of
+   * the spectrum some times over, and each next one is a fixed fraction of it,
+   * so the three cover the waves that carry height and slope at any wind speed.
    * @param cascade - The cascade index
-   * @param length - The new wave length for the specified cascade
-   */ setWaveLength(cascade, length) {
-        if (this._params.cascades[cascade].size !== length) {
-            this._params.cascades[cascade].size = length;
-            this.paramsChanged();
-        }
+   */ getWaveLength(cascade) {
+        const windSpeed = Math.hypot(this._params.wind.x, this._params.wind.y);
+        const peak = 2 * Math.PI * Math.SQRT2 * windSpeed * windSpeed / 9.81;
+        const largest = Math.min(Math.max(peak * CASCADE_PEAK_SPAN, CASCADE_MIN_SIZE), CASCADE_MAX_SIZE);
+        return largest / Math.pow(CASCADE_RATIO, cascade);
     }
     /** Gets the wave strength for the specified cascade */ getWaveStrength(cascade) {
         return this._params.cascades[cascade].strength;
@@ -340,12 +359,19 @@ const THREAD_GROUP_SIZE = 16;
         this._h0BindGroup.setValue('resolution', this._params.resolution);
         this._h0BindGroup.setValue('wind', this._params.wind);
         this._h0BindGroup.setValue('alignment', this._params.alignment);
-        for(let i = 0; i < this._params.cascades.length; i++){
-            this._cascades[i].x = this._params.cascades[i].size;
-            this._cascades[i].y = this._params.cascades[i].strength * 0.081 / (this._params.cascades[i].size * this._params.cascades[i].size);
-            this._cascades[i].z = 2 * Math.PI / this._params.cascades[i].maxWave;
-            this._cascades[i].w = 2 * Math.PI / this._params.cascades[i].minWave;
+        // Bands split as in Bruneton's ocean demo (and Ceto, its Unity port): each
+        // cascade keeps the wave numbers outside the square |kx|, |ky| < kMin, kMin the
+        // Nyquist pi N / L of the next larger cascade (pi / L for the largest), and
+        // stops at its own Nyquist, so the cascades share no wave number.
+        const cascades = this._params.cascades;
+        for(let i = 0; i < cascades.length; i++){
+            const size = this.getWaveLength(i);
+            this._cascades[i].x = size;
+            this._cascades[i].y = cascades[i].strength * 0.081 / (size * size);
+            this._cascades[i].z = i === 0 ? Math.PI / size : Math.PI * this._params.resolution / this.getWaveLength(i - 1);
+            this._cascades[i].w = 0;
         }
+        this.computeSlopeVariances();
         this._h0BindGroup.setValue('cascade0', this._cascades[0]);
         this._h0BindGroup.setValue('cascade1', this._cascades[1]);
         this._h0BindGroup.setValue('cascade2', this._cascades[2]);
@@ -358,33 +384,90 @@ const THREAD_GROUP_SIZE = 16;
             FFTWaveGenerator._globals.quad.draw();
         }
     }
+    /**
+   * Expected slope covariance of each cascade, summed over the same spectrum the
+   * h0 and hk programs build: E|h(k)|^2 = 2 P(k) (a(k) + a(-k)), P the Phillips
+   * spectrum halved as h0 takes it, a the wind alignment, and the slopes i k h(k)
+   * with the Nyquist row and column zeroed. The inverse FFT is unnormalized, so
+   * a field's variance is the plain sum over the grid.
+   *
+   * Also how much of it each mip level of the cascade keeps: a level halving the
+   * texels keeps the wave numbers below its Nyquist along both axes.
+   * @internal
+   */ computeSlopeVariances() {
+        const N = this._params.resolution;
+        const wind = this._params.wind;
+        const windLen = Math.hypot(wind.x, wind.y);
+        const wx = windLen > 0 ? wind.x / windLen : 1;
+        const wz = windLen > 0 ? wind.y / windLen : 0;
+        const L = windLen * windLen / 9.81;
+        const L2 = L * L;
+        const alignment = this._params.alignment;
+        for(let i = 0; i < 3; i++){
+            const size = this._cascades[i].x;
+            const A = this._cascades[i].y;
+            const minK = this._cascades[i].z;
+            let xx = 0;
+            let zz = 0;
+            let xz = 0;
+            // Variance whose wave numbers are cut first at level 1 + n
+            const cut = new Array(SLOPE_LOD_LEVELS + 1).fill(0);
+            const nyquist = Math.PI * N / size;
+            if (size > 1e-3 && L2 > 0) {
+                const dk = Math.PI * 2 / size;
+                for(let cy = 1; cy < N; cy++){
+                    const kz = (cy - N / 2) * dk;
+                    for(let cx = 1; cx < N; cx++){
+                        const kx = (cx - N / 2) * dk;
+                        if (Math.abs(kx) < minK && Math.abs(kz) < minK) {
+                            continue;
+                        }
+                        const k2 = kx * kx + kz * kz;
+                        let e = A / (k2 * k2) * Math.exp(-1 / (k2 * L2));
+                        if (alignment > 0) {
+                            const c = (kx * wx + kz * wz) / Math.sqrt(k2);
+                            e *= Math.pow(Math.max(0, c), alignment) + Math.pow(Math.max(0, -c), alignment);
+                        } else {
+                            e *= 2;
+                        }
+                        xx += kx * kx * e;
+                        zz += kz * kz * e;
+                        xz += kx * kz * e;
+                        // Kept up to the level whose Nyquist nyquist / 2^level it still lies below
+                        const kept = Math.log2(nyquist / Math.max(Math.abs(kx), Math.abs(kz)));
+                        cut[Math.min(Math.max(Math.ceil(kept), 1), SLOPE_LOD_LEVELS + 1) - 1] += k2 * e;
+                    }
+                }
+            }
+            this._slopeVariances[i].setXYZW(xx, zz, xz, size / N);
+            const total = xx + zz;
+            let kept = total;
+            for(let level = 1; level <= SLOPE_LOD_LEVELS; level++){
+                kept -= cut[level - 1];
+                this._slopeRetained[i * SLOPE_LOD_LEVELS + level - 1] = total > 0 ? Math.max(kept / total, 0) : 0;
+            }
+        }
+    }
     /** @internal */ getNoiseTexture(size, randomSeed) {
         const device = getDevice();
-        let tex = FFTWaveGenerator._globals.noiseTextures.get(size);
+        // Keyed on the seed as well as the size: both select the noise.
+        const key = `${size}:${randomSeed}`;
+        let tex = FFTWaveGenerator._globals.noiseTextures.get(key);
         if (!tex) {
-            tex = device.createTexture2D(device.type === 'webgl' ? 'rgba32f' : 'rg32f', size, size, {
+            tex = device.createTexture2D('rg32f', size, size, {
                 mipmapping: false
             });
-            tex.name = `noiseTex${size}`;
-            tex.update(this.getNoise2d(size, randomSeed, device.type === 'webgl'), 0, 0, size, size);
-            FFTWaveGenerator._globals.noiseTextures.set(size, tex);
+            tex.name = `noiseTex${size}_${randomSeed}`;
+            tex.update(this.getNoise2d(size, randomSeed), 0, 0, size, size);
+            FFTWaveGenerator._globals.noiseTextures.set(key, tex);
         }
         return tex;
     }
-    /** @internal */ getNoise2d(size, randomSeed, rgba) {
+    /** @internal */ getNoise2d(size, randomSeed) {
         const rand = new PRNG(randomSeed);
-        if (rgba) {
-            const array = new Float32Array(size * size * 4);
-            for(let i = 0; i < size * size; i++){
-                array[i * 4 + 0] = rand.get();
-                array[i * 4 + 1] = rand.get();
-            }
-            return array;
-        } else {
-            return Float32Array.from([
-                ...Array(size * size * 2)
-            ].map(()=>rand.get()));
-        }
+        return Float32Array.from([
+            ...Array(size * size * 2)
+        ].map(()=>rand.get()));
     }
     /** @internal */ reverseBits(v, width) {
         return parseInt(v.toString(2).padStart(width, '0').split('').reverse().join(''), 2);
@@ -430,7 +513,7 @@ const THREAD_GROUP_SIZE = 16;
         if (!this._instanceData) {
             const device = getDevice();
             const h0Textures = this.createNTextures(device, this._h0TextureFormat, this._params.resolution, 3, 'Water-h0', false);
-            const dataTextures = this.createNTextures(device, this._dataTextureFormat, this._params.resolution, 6, 'Water-data', true);
+            const dataTextures = this.createNTextures(device, this._dataTextureFormat, this._params.resolution, 6, 'Water-data', true, true);
             const spectrumTextures = this.createNTextures(device, this._textureFormat, this._params.resolution, 6, 'Water-spectrum', true);
             const pingpongTextures = this.createNTextures(device, this._textureFormat, this._params.resolution, 6, 'Water-pingpong', false);
             this._instanceData = {
@@ -452,17 +535,17 @@ const THREAD_GROUP_SIZE = 16;
         }
         return this._instanceData;
     }
-    /** @internal */ createNTextures(device, format, size, num, name, linear) {
+    /** @internal */ createNTextures(device, format, size, num, name, linear, mipmapping = false) {
         const options = {
             samplerOptions: {
                 minFilter: linear ? 'linear' : 'nearest',
                 magFilter: linear ? 'linear' : 'nearest',
-                mipFilter: 'none',
+                mipFilter: mipmapping ? 'linear' : 'none',
                 addressU: 'repeat',
                 addressV: 'repeat'
             },
             writable: !!this._useComputeShader,
-            mipmapping: false
+            mipmapping
         };
         if (this._useComputeShader) {
             const tex = device.createTexture2DArray(format, size, size, num, options);
@@ -491,7 +574,7 @@ const THREAD_GROUP_SIZE = 16;
         this._resolutionChanged = false;
         this._paramsChanged = false;
         for(let i = 0; i < 3; i++){
-            this._sizes[i] = this._params.cascades[i].size;
+            this._sizes[i] = this._cascades[i].x;
             this._croppinesses[i] = this._params.cascades[i].croppiness;
         }
         if (this._renderMode === RENDER_NORMAL) {
@@ -503,6 +586,13 @@ const THREAD_GROUP_SIZE = 16;
             this.ifft2TwoPass();
             this.postIfft2TwoPass();
         }
+        // The fragment normal reads the slopes filtered to the pixel
+        const dataTextures = this.getInstanceData().dataTextures;
+        if (Array.isArray(dataTextures)) {
+            dataTextures.forEach((tex)=>tex.generateMipmaps());
+        } else {
+            dataTextures.generateMipmaps();
+        }
         device.popDeviceStates();
     }
     /** {@inheritDoc WaveGenerator.needUpdate} */ needUpdate() {
@@ -552,9 +642,6 @@ const THREAD_GROUP_SIZE = 16;
             this._hkBindGroup.setTexture('h0Texture0', h0Textures[0], nearestRepeatSampler);
             this._hkBindGroup.setTexture('h0Texture1', h0Textures[1], nearestRepeatSampler);
             this._hkBindGroup.setTexture('h0Texture2', h0Textures[2], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                this._hkBindGroup.setValue('h0TexSize', new Vector2(h0Textures[0].width, h0Textures[0].height));
-            }
             device.setFramebuffer(instanceData.spectrumFramebuffer);
             FFTWaveGenerator._globals.quad.draw();
         }
@@ -571,9 +658,6 @@ const THREAD_GROUP_SIZE = 16;
         this._hkBindGroup4.setTexture('h0Texture0', h0Textures[0], nearestRepeatSampler);
         this._hkBindGroup4.setTexture('h0Texture1', h0Textures[1], nearestRepeatSampler);
         this._hkBindGroup4.setValue('t', time);
-        if (device.type === 'webgl') {
-            this._hkBindGroup4.setValue('h0TexSize', new Vector2(h0Textures[0].width, h0Textures[0].height));
-        }
         device.setFramebuffer(instanceData.spectrumFramebuffer4);
         FFTWaveGenerator._globals.quad.draw();
         device.setProgram(FFTWaveGenerator._globals.programs.hkProgram2);
@@ -582,9 +666,6 @@ const THREAD_GROUP_SIZE = 16;
         this._hkBindGroup2.setValue('sizes', this._sizes);
         this._hkBindGroup2.setTexture('h0Texture2', h0Textures[2], nearestRepeatSampler);
         this._hkBindGroup2.setValue('t', time);
-        if (device.type === 'webgl') {
-            this._hkBindGroup2.setValue('h0TexSize', new Vector2(h0Textures[0].width, h0Textures[0].height));
-        }
         device.setFramebuffer(instanceData.spectrumFramebuffer2);
         FFTWaveGenerator._globals.quad.draw();
     }
@@ -625,9 +706,6 @@ const THREAD_GROUP_SIZE = 16;
                 this._fft2hBindGroup.setTexture('spectrum3', pingPongTexture[3], nearestRepeatSampler);
                 this._fft2hBindGroup.setTexture('spectrum4', pingPongTexture[4], nearestRepeatSampler);
                 this._fft2hBindGroup.setTexture('spectrum5', pingPongTexture[5], nearestRepeatSampler);
-                if (device.type === 'webgl') {
-                    this._fft2hBindGroup.setValue('texSize', new Vector4(pingPongTexture[0].width, pingPongTexture[0].height, butterflyTex.width, butterflyTex.height));
-                }
                 FFTWaveGenerator._globals.quad.draw();
             }
             pingPong = 1 - pingPong; //(pingPong + 1) % 2;
@@ -651,9 +729,6 @@ const THREAD_GROUP_SIZE = 16;
                 this._fft2vBindGroup.setTexture('spectrum3', pingPongTexture[3], nearestRepeatSampler);
                 this._fft2vBindGroup.setTexture('spectrum4', pingPongTexture[4], nearestRepeatSampler);
                 this._fft2vBindGroup.setTexture('spectrum5', pingPongTexture[5], nearestRepeatSampler);
-                if (device.type === 'webgl') {
-                    this._fft2vBindGroup.setValue('texSize', new Vector4(pingPongTexture[0].width, pingPongTexture[0].height, butterflyTex.width, butterflyTex.height));
-                }
                 FFTWaveGenerator._globals.quad.draw();
             }
             pingPong = 1 - pingPong;
@@ -723,9 +798,6 @@ const THREAD_GROUP_SIZE = 16;
             fft2hBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], nearestRepeatSampler);
             fft2hBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], nearestRepeatSampler);
             fft2hBindGroup4.setTexture('spectrum3', pingPongTextures[pingPong][3], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                fft2hBindGroup4.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
-            }
             FFTWaveGenerator._globals.quad.draw();
             device.setFramebuffer(pingPongFramebuffers2[pingPong]);
             device.setProgram(FFTWaveGenerator._globals.programs.fft2hProgram2);
@@ -735,9 +807,6 @@ const THREAD_GROUP_SIZE = 16;
             fft2hBindGroup2.setValue('phase', phase);
             fft2hBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], nearestRepeatSampler);
             fft2hBindGroup2.setTexture('spectrum5', pingPongTextures[pingPong][5], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                fft2hBindGroup2.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
-            }
             FFTWaveGenerator._globals.quad.draw();
             pingPong = (pingPong + 1) % 2;
         }
@@ -753,9 +822,6 @@ const THREAD_GROUP_SIZE = 16;
             fft2vBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], nearestRepeatSampler);
             fft2vBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], nearestRepeatSampler);
             fft2vBindGroup4.setTexture('spectrum3', pingPongTextures[pingPong][3], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                fft2vBindGroup4.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
-            }
             FFTWaveGenerator._globals.quad.draw();
             device.setFramebuffer(pingPongFramebuffers2[pingPong]);
             device.setProgram(FFTWaveGenerator._globals.programs.fft2vProgram2);
@@ -765,9 +831,6 @@ const THREAD_GROUP_SIZE = 16;
             fft2vBindGroup2.setValue('phase', phase);
             fft2vBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], nearestRepeatSampler);
             fft2vBindGroup2.setTexture('spectrum5', pingPongTextures[pingPong][5], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                fft2vBindGroup2.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
-            }
             FFTWaveGenerator._globals.quad.draw();
             pingPong = (pingPong + 1) % 2;
         }
@@ -789,7 +852,6 @@ const THREAD_GROUP_SIZE = 16;
         const nearestRepeatSampler = fetchSampler('repeat_nearest_nomip');
         device.setProgram(FFTWaveGenerator._globals.programs.postfft2Program);
         device.setBindGroup(0, this._postfft2BindGroup);
-        this._postfft2BindGroup.setValue('N2', this._params.resolution * this._params.resolution);
         if (this._useComputeShader) {
             this._postfft2BindGroup.setTexture('output', instanceData.dataTextures);
             this._postfft2BindGroup.setTexture('ifft', this._ifftTextures, nearestRepeatSampler);
@@ -803,9 +865,6 @@ const THREAD_GROUP_SIZE = 16;
             this._postfft2BindGroup.setTexture('ifft3', ifftTextures[3], nearestRepeatSampler);
             this._postfft2BindGroup.setTexture('ifft4', ifftTextures[4], nearestRepeatSampler);
             this._postfft2BindGroup.setTexture('ifft5', ifftTextures[5], nearestRepeatSampler);
-            if (device.type === 'webgl') {
-                this._postfft2BindGroup.setValue('ifftTexSize', new Vector2(ifftTextures[0].width, ifftTextures[0].height));
-            }
             FFTWaveGenerator._globals.quad.draw();
         }
     }
@@ -817,24 +876,16 @@ const THREAD_GROUP_SIZE = 16;
         device.setProgram(FFTWaveGenerator._globals.programs.postfft2Program4);
         device.setBindGroup(0, this._postfft2BindGroup4);
         const ifftTextures = this._ifftTextures;
-        this._postfft2BindGroup4.setValue('N2', this._params.resolution * this._params.resolution);
         this._postfft2BindGroup4.setTexture('ifft0', ifftTextures[0], nearestRepeatSampler);
         this._postfft2BindGroup4.setTexture('ifft1', ifftTextures[1], nearestRepeatSampler);
         this._postfft2BindGroup4.setTexture('ifft2', ifftTextures[2], nearestRepeatSampler);
         this._postfft2BindGroup4.setTexture('ifft3', ifftTextures[3], nearestRepeatSampler);
-        if (device.type === 'webgl') {
-            this._postfft2BindGroup4.setValue('ifftTexSize', new Vector2(ifftTextures[0].width, ifftTextures[0].height));
-        }
         FFTWaveGenerator._globals.quad.draw();
         device.setFramebuffer(instanceData.postIfft2Framebuffer2);
         device.setProgram(FFTWaveGenerator._globals.programs.postfft2Program2);
         device.setBindGroup(0, this._postfft2BindGroup2);
-        this._postfft2BindGroup2.setValue('N2', this._params.resolution * this._params.resolution);
         this._postfft2BindGroup2.setTexture('ifft4', ifftTextures[4], nearestRepeatSampler);
         this._postfft2BindGroup2.setTexture('ifft5', ifftTextures[5], nearestRepeatSampler);
-        if (device.type === 'webgl') {
-            this._postfft2BindGroup2.setValue('ifftTexSize', new Vector2(ifftTextures[0].width, ifftTextures[0].height));
-        }
         FFTWaveGenerator._globals.quad.draw();
     }
     /** {@inheritDoc WaveGenerator.setupUniforms} */ setupUniforms(scope, uniformGroup) {
@@ -851,9 +902,65 @@ const THREAD_GROUP_SIZE = 16;
             scope.dx_hy_dz_dxdz2 = pb.tex2D().uniform(uniformGroup);
             scope.sx_sz_dxdx_dzdz2 = pb.tex2D().uniform(uniformGroup);
         }
-        if (pb.shaderKind === 'fragment') {
-            scope.foamParams = pb.vec2().uniform(uniformGroup);
+        scope.foamParams = pb.vec2().uniform(uniformGroup);
+        scope.slopeVar0 = pb.vec4().uniform(uniformGroup);
+        scope.slopeVar1 = pb.vec4().uniform(uniformGroup);
+        scope.slopeVar2 = pb.vec4().uniform(uniformGroup);
+        scope.slopeRetained = pb.vec4[6]().uniform(uniformGroup);
+    }
+    /**
+   * Mip level each cascade is read at by a pixel with screen derivatives
+   * `xzGrad` of its xz, as anisotropic filtering picks it: from the shorter
+   * axis of the pixel, or the longer over the anisotropy where that is more.
+   * @internal
+   */ cascadeLods(scope, xzGrad) {
+        const pb = scope.$builder;
+        pb.func('fftCascadeLods', [
+            pb.vec4('xzGrad')
+        ], function() {
+            this.$l.lx = pb.mul(pb.length(this.xzGrad.xy), SLOPE_FILTER_SCALE);
+            this.$l.ly = pb.mul(pb.length(this.xzGrad.zw), SLOPE_FILTER_SCALE);
+            this.$l.fp = pb.max(pb.max(pb.min(this.lx, this.ly), pb.div(pb.max(this.lx, this.ly), SLOPE_MAX_ANISOTROPY)), 1e-6);
+            this.$l.texel = pb.vec3(this.slopeVar0.w, this.slopeVar1.w, this.slopeVar2.w);
+            this.$return(pb.max(pb.log2(pb.div(pb.vec3(this.fp), this.texel)), pb.vec3(0)));
+        });
+        return scope.fftCascadeLods(xzGrad);
+    }
+    /** Trilinear, anisotropic sampler of the slope mips. @internal */ static getSlopeSampler() {
+        const globals = FFTWaveGenerator._globals;
+        if (!globals.slopeSampler) {
+            globals.slopeSampler = getDevice().createSampler({
+                addressU: 'repeat',
+                addressV: 'repeat',
+                magFilter: 'linear',
+                minFilter: 'linear',
+                mipFilter: 'linear',
+                maxAnisotropy: SLOPE_MAX_ANISOTROPY
+            });
         }
+        return globals.slopeSampler;
+    }
+    /** {@inheritDoc WaveGenerator.calcUnresolvedSlopeVariance} */ calcUnresolvedSlopeVariance(scope, xzGrad) {
+        const pb = scope.$builder;
+        const that = this;
+        // Share of a cascade's slope variance its mip level keeps, linear between levels
+        pb.func('fftSlopeRetained', [
+            pb.float('lod'),
+            pb.vec4('lo'),
+            pb.vec4('hi')
+        ], function() {
+            this.$l.hatLo = pb.max(pb.sub(pb.vec4(1), pb.abs(pb.sub(pb.vec4(this.lod), pb.vec4(1, 2, 3, 4)))), pb.vec4(0));
+            this.$l.hatHi = pb.max(pb.sub(pb.vec4(1), pb.abs(pb.sub(pb.vec4(this.lod), pb.vec4(5, 6, 7, 8)))), pb.vec4(0));
+            this.$return(pb.add(pb.max(pb.sub(1, this.lod), 0), pb.dot(this.hatLo, this.lo), pb.mul(pb.dot(this.hatHi, this.hi), pb.clamp(pb.sub(SLOPE_LOD_LEVELS + 1, this.lod), 0, 1))));
+        });
+        pb.func('fftUnresolvedSlopeVariance', [
+            pb.vec4('xzGrad')
+        ], function() {
+            this.$l.lod = that.cascadeLods(this, this.xzGrad);
+            this.$l.lost = pb.sub(pb.vec3(1), pb.vec3(this.fftSlopeRetained(this.lod.x, this.slopeRetained.at(0), this.slopeRetained.at(1)), this.fftSlopeRetained(this.lod.y, this.slopeRetained.at(2), this.slopeRetained.at(3)), this.fftSlopeRetained(this.lod.z, this.slopeRetained.at(4), this.slopeRetained.at(5))));
+            this.$return(pb.add(pb.mul(this.slopeVar0.xyz, this.lost.x), pb.mul(this.slopeVar1.xyz, this.lost.y), pb.mul(this.slopeVar2.xyz, this.lost.z)));
+        });
+        return scope.fftUnresolvedSlopeVariance(xzGrad);
     }
     /** {@inheritDoc WaveGenerator.calcVertexPositionAndNormal} */ calcVertexPositionAndNormal(scope, inPos, outPos, outNormal) {
         const pb = scope.$builder;
@@ -903,13 +1010,31 @@ const THREAD_GROUP_SIZE = 16;
             this.$l.sx = pb.add(this._sx_sz_dxdx_dzdz0.x, this._sx_sz_dxdx_dzdz1.x, this._sx_sz_dxdx_dzdz2.x);
             this.$l.sz = pb.add(this._sx_sz_dxdx_dzdz0.y, this._sx_sz_dxdx_dzdz1.y, this._sx_sz_dxdx_dzdz2.y);
             this.$l.dxdx_dzdz = pb.add(pb.mul(this._sx_sz_dxdx_dzdz0.zw, this.croppinesses.x), pb.mul(this._sx_sz_dxdx_dzdz1.zw, this.croppinesses.y), pb.mul(this._sx_sz_dxdx_dzdz2.zw, this.croppinesses.z));
-            this.$l.slope = pb.vec2(pb.div(this.sx, pb.add(1.0, this.dxdx_dzdz.x)), pb.div(this.sz, pb.add(1.0, this.dxdx_dzdz.y)));
-            this.$l.normal = pb.normalize(pb.vec3(pb.neg(this.slope.x), 1.0, pb.neg(this.slope.y)));
+            // Normal of the displaced surface. With the Jacobian of the horizontal
+            // displacement [[A, C], [C, F]], A = 1 + croppiness*d2x, F = 1 + croppiness*d2z,
+            // C = croppiness*dxdz and J = A*F - C*C, the tangents' cross product is
+            //
+            //   N ~ ( -sx * F, J, -sz * A )
+            //
+            // J must stay off the horizontal components, or the normal flips with
+            // sign(J). The y component takes |J|: where the sheet folds (J < 0, the
+            // foam band) the true normal points down, which the shading cannot light.
+            let dxdzSamples;
+            if (that._useComputeShader) {
+                dxdzSamples = pb.vec3(pb.textureArraySampleLevel(this.dataTexture, this.uv0, 0, 0).w, pb.textureArraySampleLevel(this.dataTexture, this.uv1, 2, 0).w, pb.textureArraySampleLevel(this.dataTexture, this.uv2, 4, 0).w);
+            } else {
+                dxdzSamples = pb.vec3(pb.textureSampleLevel(this.dx_hy_dz_dxdz0, this.uv0, 0).w, pb.textureSampleLevel(this.dx_hy_dz_dxdz1, this.uv1, 0).w, pb.textureSampleLevel(this.dx_hy_dz_dxdz2, this.uv2, 0).w);
+            }
+            this.$l.dxdz = pb.add(pb.mul(dxdzSamples.x, this.croppinesses.x), pb.mul(dxdzSamples.y, this.croppinesses.y), pb.mul(dxdzSamples.z, this.croppinesses.z));
+            this.$l.jA = pb.add(1.0, this.dxdx_dzdz.x);
+            this.$l.jF = pb.add(1.0, this.dxdx_dzdz.y);
+            this.$l.jdet = pb.sub(pb.mul(this.jA, this.jF), pb.mul(this.dxdz, this.dxdz));
+            this.$l.normal = pb.normalize(pb.vec3(pb.neg(pb.mul(this.sx, this.jF)), pb.abs(this.jdet), pb.neg(pb.mul(this.sz, this.jA))));
             this.$return(this.normal);
         });
         return scope.calcFragmentNormal(xz);
     }
-    /** {@inheritDoc WaveGenerator.calcFragmentNormalAndFoam} */ calcFragmentNormalAndFoam(scope, xz) {
+    /** {@inheritDoc WaveGenerator.calcFragmentNormalAndFoam} */ calcFragmentNormalAndFoam(scope, xz, _vertexNormal, _foamSample, xzGrad) {
         const pb = scope.$builder;
         const that = this;
         pb.func('jacobian', [
@@ -927,52 +1052,55 @@ const THREAD_GROUP_SIZE = 16;
         ], function() {
             this.$return(pb.sub(pb.mul(this.jacobian.x, this.jacobian.w), pb.mul(this.jacobian.y, this.jacobian.z)));
         });
-        pb.func('calcNormalAndFoam', [
+        const params = xzGrad ? [
+            pb.vec2('xz'),
+            pb.vec4('xzGrad')
+        ] : [
             pb.vec2('xz')
-        ], function() {
+        ];
+        const funcName = xzGrad ? 'calcNormalAndFoamF' : 'calcNormalAndFoam';
+        pb.func(funcName, params, function() {
             this.$l.uv0 = pb.div(this.xz, this.sizes.x);
             this.$l.uv1 = pb.div(this.xz, this.sizes.y);
             this.$l.uv2 = pb.div(this.xz, this.sizes.z);
-            if (that._useComputeShader) {
-                this.$l._sx_sz_dxdx_dzdz0 = pb.textureArraySampleLevel(this.dataTexture, this.uv0, 1, 0);
-                this.$l._sx_sz_dxdx_dzdz1 = pb.textureArraySampleLevel(this.dataTexture, this.uv1, 3, 0);
-                this.$l._sx_sz_dxdx_dzdz2 = pb.textureArraySampleLevel(this.dataTexture, this.uv2, 5, 0);
-            } else {
-                this.$l._sx_sz_dxdx_dzdz0 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz0, this.uv0, 0);
-                this.$l._sx_sz_dxdx_dzdz1 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz1, this.uv1, 0);
-                this.$l._sx_sz_dxdx_dzdz2 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz2, this.uv2, 0);
-            }
+            // Slopes and Jacobian filtered down to the pixel: each cascade read with
+            // the screen derivatives of its texture coordinates, trilinear and
+            // anisotropic, so the waves too short for the pixel average out rather
+            // than alias into speckle
+            const sample = (tex, layer, uv, size)=>{
+                if (!xzGrad) {
+                    return that._useComputeShader ? pb.textureArraySampleLevel(this.dataTexture, this[uv], layer, 0) : pb.textureSampleLevel(this[tex], this[uv], 0);
+                }
+                const ddx = pb.mul(this.xzGrad.xy, pb.div(SLOPE_FILTER_SCALE, this.sizes[size]));
+                const ddy = pb.mul(this.xzGrad.zw, pb.div(SLOPE_FILTER_SCALE, this.sizes[size]));
+                return that._useComputeShader ? pb.textureArraySampleGrad(this.dataTexture, this[uv], layer, ddx, ddy) : pb.textureSampleGrad(this[tex], this[uv], ddx, ddy);
+            };
+            this.$l._sx_sz_dxdx_dzdz0 = sample('sx_sz_dxdx_dzdz0', 1, 'uv0', 'x');
+            this.$l._sx_sz_dxdx_dzdz1 = sample('sx_sz_dxdx_dzdz1', 3, 'uv1', 'y');
+            this.$l._sx_sz_dxdx_dzdz2 = sample('sx_sz_dxdx_dzdz2', 5, 'uv2', 'z');
             this.$l.sx = pb.add(this._sx_sz_dxdx_dzdz0.x, this._sx_sz_dxdx_dzdz1.x, this._sx_sz_dxdx_dzdz2.x);
             this.$l.sz = pb.add(this._sx_sz_dxdx_dzdz0.y, this._sx_sz_dxdx_dzdz1.y, this._sx_sz_dxdx_dzdz2.y);
             this.$l.dxdx_dzdz = pb.add(pb.mul(this._sx_sz_dxdx_dzdz0.zw, this.croppinesses.x), pb.mul(this._sx_sz_dxdx_dzdz1.zw, this.croppinesses.y), pb.mul(this._sx_sz_dxdx_dzdz2.zw, this.croppinesses.z));
-            this.$l.slope = pb.vec2(pb.div(this.sx, pb.add(1.0, this.dxdx_dzdz.x)), pb.div(this.sz, pb.add(1.0, this.dxdx_dzdz.y)));
-            this.$l.normal = pb.normalize(pb.vec3(pb.neg(this.slope.x), 1.0, pb.neg(this.slope.y)));
-            // foam
-            this.$l.dxdx_dzdz0 = this._sx_sz_dxdx_dzdz0.zw;
-            this.$l.dxdx_dzdz1 = this._sx_sz_dxdx_dzdz1.zw;
-            this.$l.dxdx_dzdz2 = this._sx_sz_dxdx_dzdz2.zw;
-            if (that._useComputeShader) {
-                this.$l.dxdz0 = pb.textureArraySampleLevel(this.dataTexture, this.uv0, 0, 0).w;
-                this.$l.dxdz1 = pb.textureArraySampleLevel(this.dataTexture, this.uv1, 2, 0).w;
-                this.$l.dxdz2 = pb.textureArraySampleLevel(this.dataTexture, this.uv2, 4, 0).w;
-            } else {
-                this.$l.dxdz0 = pb.textureSampleLevel(this.dx_hy_dz_dxdz0, this.uv0, 0).w;
-                this.$l.dxdz1 = pb.textureSampleLevel(this.dx_hy_dz_dxdz1, this.uv1, 0).w;
-                this.$l.dxdz2 = pb.textureSampleLevel(this.dx_hy_dz_dxdz2, this.uv2, 0).w;
-            }
+            this.$l.dxdz0 = sample('dx_hy_dz_dxdz0', 0, 'uv0', 'x').w;
+            this.$l.dxdz1 = sample('dx_hy_dz_dxdz1', 2, 'uv1', 'y').w;
+            this.$l.dxdz2 = sample('dx_hy_dz_dxdz2', 4, 'uv2', 'z').w;
             this.$l.dxdz = pb.add(pb.mul(this.dxdz0, this.croppinesses.x), pb.mul(this.dxdz1, this.croppinesses.y), pb.mul(this.dxdz2, this.croppinesses.z));
-            this.$l.val = this.det(this.jacobian(this.dxdx_dzdz.x, this.dxdz, this.dxdx_dzdz.y));
+            this.$l.jacobian4 = this.jacobian(this.dxdx_dzdz.x, this.dxdz, this.dxdx_dzdz.y);
+            this.$l.val = this.det(this.jacobian4);
+            // Same Jacobian as the foam reads: N ~ (-sx*F, |J|, -sz*A), with A and F
+            // packed into x and w. See calcFragmentNormal.
+            this.$l.normal = pb.normalize(pb.vec3(pb.neg(pb.mul(this.sx, this.jacobian4.w)), pb.abs(this.val), pb.neg(pb.mul(this.sz, this.jacobian4.x))));
             this.$l.foam = pb.abs(pb.pow(pb.neg(pb.min(0, pb.sub(this.val, this.foamParams.x))), this.foamParams.y));
             this.$return(pb.vec4(this.normal, this.foam));
         });
-        return scope.calcNormalAndFoam(xz);
+        return xzGrad ? scope[funcName](xz, xzGrad) : scope[funcName](xz);
     }
     /** {@inheritDoc WaveGenerator.isOk} */ isOk() {
         return this._renderMode !== RENDER_NONE;
     }
     /** {@inheritDoc WaveGenerator.applyWaterBindGroup} */ applyWaterBindGroup(bindGroup) {
         const instanceData = this.getInstanceData();
-        const linearRepeatSampler = fetchSampler('repeat_linear_nomip');
+        const linearRepeatSampler = FFTWaveGenerator.getSlopeSampler();
         if (this._useComputeShader) {
             bindGroup.setTexture('dataTexture', instanceData.dataTextures, linearRepeatSampler);
         } else {
@@ -987,6 +1115,10 @@ const THREAD_GROUP_SIZE = 16;
         bindGroup.setValue('foamParams', this._params.foamParams);
         bindGroup.setValue('sizes', this._sizes);
         bindGroup.setValue('croppinesses', this._croppinesses);
+        bindGroup.setValue('slopeVar0', this._slopeVariances[0]);
+        bindGroup.setValue('slopeVar1', this._slopeVariances[1]);
+        bindGroup.setValue('slopeVar2', this._slopeVariances[2]);
+        bindGroup.setValue('slopeRetained', this._slopeRetained);
     }
     /** {@inheritDoc WaveGenerator.calcClipmapTileAABB} */ calcClipmapTileAABB(minX, maxX, minZ, maxZ, y, outAABB) {
         const disturb = Math.max(Math.abs(this.wind.x), Math.abs(this.wind.y), 2);