three-base 2.0.142 → 2.0.166

package/WaterFlow/ShallowWaterSurface.js

@@ -1,441 +1,441 @@
-import * as THREE from 'three';
-const quadVertex = /* glsl */ `
-  out vec2 vUv;
-  void main() {
-    vUv = uv;
-    gl_Position = vec4(position, 1.0);
-  }
-`;
-function createWaveTarget(width, height) {
-    return new THREE.WebGLRenderTarget(width, height, {
-        format: THREE.RGBAFormat,
-        type: THREE.HalfFloatType,
-        minFilter: THREE.LinearFilter,
-        magFilter: THREE.LinearFilter,
-        wrapS: THREE.ClampToEdgeWrapping,
-        wrapT: THREE.ClampToEdgeWrapping,
-        depthBuffer: false,
-    });
-}
-function ambientSurfaceHeight(u, v, time) {
-    const sourceX = 0.56 + Math.sin(time * 0.17) * 0.13;
-    const sourceZ = 0.48 + Math.cos(time * 0.14) * 0.11;
-    const radialX = (u - sourceX) * 1.65;
-    const radialZ = v - sourceZ;
-    const radialDistance = Math.hypot(radialX, radialZ);
-    const swellA = Math.sin(u * 11.0 + v * 7.0 + time * 1.15) * 0.008;
-    const swellB = Math.sin(-u * 8.0 + v * 13.0 - time * 0.88 + 0.9) * 0.0055;
-    const radial = Math.sin(radialDistance * 29.0 - time * 2.05)
-        * Math.exp(-radialDistance * 2.0) * 0.0065;
-    return swellA + swellB + radial;
-}
-function sloshSurfaceHeight(u, v, slosh) {
-    return (u - 0.5) * 2 * slosh.x + (v - 0.5) * 2 * slosh.y;
-}
-export class ShallowWaterSurface {
-    renderer;
-    width;
-    height;
-    basinMinX;
-    basinMaxX;
-    basinHalfZ;
-    basinCenterZ;
-    waterY;
-    cpuSampling;
-    cpuWidth;
-    cpuHeight;
-    cpuCurrent;
-    cpuPrevious;
-    cpuNext;
-    cpuLastDelta;
-    cpuImpactX;
-    cpuImpactZ;
-    cpuImpactEnergy;
-    cpuEmitting;
-    elapsed;
-    slosh;
-    previousSlosh;
-    motionImpulse;
-    /** 高度场乒乓 RT：每帧交换，故非 readonly。 */
-    read;
-    write;
-    computeScene;
-    computeCamera;
-    computeMaterial;
-    computeQuad;
-    material;
-    /** 对外可见的水面网格（ReservoirSystem 会改 renderOrder / visible）。 */
-    mesh;
-    constructor(renderer, { width = 256, height = 128, basinMinX = 0.25, basinMaxX = 3.85, basinHalfZ = 0.82, basinCenterZ = 0, waterY = 0.2, cpuSampling = false, } = {}) {
-        this.renderer = renderer;
-        this.width = width;
-        this.height = height;
-        this.basinMinX = basinMinX;
-        this.basinMaxX = basinMaxX;
-        this.basinHalfZ = basinHalfZ;
-        this.basinCenterZ = basinCenterZ;
-        this.waterY = waterY;
-        this.cpuSampling = cpuSampling;
-        this.cpuWidth = cpuSampling ? 48 : 0;
-        this.cpuHeight = cpuSampling ? 24 : 0;
-        this.cpuCurrent = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
-        this.cpuPrevious = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
-        this.cpuNext = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
-        this.cpuLastDelta = 1 / 60;
-        this.cpuImpactX = (basinMinX + basinMaxX) * 0.5;
-        this.cpuImpactZ = basinCenterZ;
-        this.cpuImpactEnergy = 0;
-        this.cpuEmitting = false;
-        this.elapsed = 0;
-        this.slosh = new THREE.Vector2();
-        this.previousSlosh = new THREE.Vector2();
-        this.motionImpulse = new THREE.Vector2();
-        this.read = createWaveTarget(width, height);
-        this.write = createWaveTarget(width, height);
-        this.computeScene = new THREE.Scene();
-        this.computeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-        this.computeMaterial = new THREE.ShaderMaterial({
-            glslVersion: THREE.GLSL3,
-            uniforms: {
-                uState: { value: this.read.texture },
-                uTexel: { value: new THREE.Vector2(1 / width, 1 / height) },
-                uImpactUv: { value: new THREE.Vector2(0.35, 0.5) },
-                uImpulse: { value: 0 },
-                uTime: { value: 0 },
-                uMotionImpulse: { value: new THREE.Vector2() },
-            },
-            vertexShader: quadVertex,
-            fragmentShader: /* glsl */ `
-        precision highp float;
-        uniform sampler2D uState;
-        uniform vec2 uTexel;
-        uniform vec2 uImpactUv;
-        uniform float uImpulse;
-        uniform float uTime;
-        uniform vec2 uMotionImpulse;
-        in vec2 vUv;
-        out vec4 outColor;
-
-        void main() {
-          vec2 state = texture(uState, vUv).rg;
-          float current = state.r;
-          float previous = state.g;
-          float left = texture(uState, vUv - vec2(uTexel.x, 0.0)).r;
-          float right = texture(uState, vUv + vec2(uTexel.x, 0.0)).r;
-          float down = texture(uState, vUv - vec2(0.0, uTexel.y)).r;
-          float up = texture(uState, vUv + vec2(0.0, uTexel.y)).r;
-          float laplacian = left + right + down + up - 4.0 * current;
-          float nextHeight = (2.0 * current - previous) + laplacian * 0.235;
-          nextHeight *= 0.9925;
-
-          vec2 aspectUv = (vUv - uImpactUv) * vec2(2.2, 1.0);
-          float impact = exp(-dot(aspectUv, aspectUv) * 420.0);
-          float microPulse = 0.72 + 0.28 * sin(uTime * 19.0);
-          nextHeight += impact * uImpulse * microPulse;
-
-          vec2 sourceA = vec2(0.22 + sin(uTime * 0.19) * 0.08, 0.31 + cos(uTime * 0.16) * 0.09);
-          vec2 sourceB = vec2(0.72 + cos(uTime * 0.13) * 0.09, 0.68 + sin(uTime * 0.17) * 0.08);
-          vec2 deltaA = (vUv - sourceA) * vec2(1.75, 1.0);
-          vec2 deltaB = (vUv - sourceB) * vec2(1.55, 1.0);
-          float distanceA = length(deltaA);
-          float distanceB = length(deltaB);
-          float ambientWaves = sin(distanceA * 47.0 - uTime * 2.15) * exp(-distanceA * 3.8)
-                             + sin(distanceB * 39.0 - uTime * 1.72 + 1.4) * exp(-distanceB * 3.5);
-          nextHeight += ambientWaves * 0.000028;
-
-          vec2 centered = vUv - 0.5;
-          float wallResponse = 0.34
-            + 0.66 * pow(max(abs(centered.x), abs(centered.y)) * 2.0, 2.0);
-          nextHeight += dot(centered, uMotionImpulse) * wallResponse;
-
-          float edge = smoothstep(0.0, 0.025, vUv.x) * smoothstep(1.0, 0.975, vUv.x)
-                     * smoothstep(0.0, 0.045, vUv.y) * smoothstep(1.0, 0.955, vUv.y);
-          nextHeight *= mix(0.86, 1.0, edge);
-          outColor = vec4(nextHeight, current, 0.0, 1.0);
-        }
-      `,
-            depthTest: false,
-            depthWrite: false,
-            toneMapped: false,
-        });
-        this.computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.computeMaterial);
-        this.computeQuad.frustumCulled = false;
-        this.computeScene.add(this.computeQuad);
-        this.material = new THREE.ShaderMaterial({
-            glslVersion: THREE.GLSL3,
-            uniforms: {
-                uHeightMap: { value: this.read.texture },
-                uTexel: { value: new THREE.Vector2(1 / width, 1 / height) },
-                uTime: { value: 0 },
-                uSlosh: { value: this.slosh },
-                uLightPosition: { value: new THREE.Vector3(-1, 5, 4) },
-            },
-            vertexShader: /* glsl */ `
-        precision highp float;
-        uniform sampler2D uHeightMap;
-        uniform vec2 uTexel;
-        uniform float uTime;
-        uniform vec2 uSlosh;
-        out vec2 vUv;
-        out vec3 vWorldPosition;
-        out vec3 vWorldNormal;
-
-        float ambientHeight(vec2 sampleUv) {
-          vec2 source = vec2(
-            0.56 + sin(uTime * 0.17) * 0.13,
-            0.48 + cos(uTime * 0.14) * 0.11
-          );
-          vec2 radialDelta = (sampleUv - source) * vec2(1.65, 1.0);
-          float radialDistance = length(radialDelta);
-          float swellA = sin(sampleUv.x * 11.0 + sampleUv.y * 7.0 + uTime * 1.15) * 0.008;
-          float swellB = sin(-sampleUv.x * 8.0 + sampleUv.y * 13.0 - uTime * 0.88 + 0.9) * 0.0055;
-          float radial = sin(radialDistance * 29.0 - uTime * 2.05)
-            * exp(-radialDistance * 2.0) * 0.0065;
-          return swellA + swellB + radial;
-        }
-
-        float surfaceHeight(vec2 sampleUv) {
-          float sloshHeight = dot((sampleUv - 0.5) * 2.0, uSlosh);
-          return texture(uHeightMap, sampleUv).r * 0.52 + ambientHeight(sampleUv) + sloshHeight;
-        }
-
-        void main() {
-          vUv = uv;
-          float h = surfaceHeight(uv);
-          float hL = surfaceHeight(uv - vec2(uTexel.x, 0.0));
-          float hR = surfaceHeight(uv + vec2(uTexel.x, 0.0));
-          float hD = surfaceHeight(uv - vec2(0.0, uTexel.y));
-          float hU = surfaceHeight(uv + vec2(0.0, uTexel.y));
-          vec3 displaced = position;
-          displaced.z += h;
-          vec3 localNormal = normalize(vec3((hL - hR) * 46.0, (hD - hU) * 46.0, 1.0));
-          vec4 world = modelMatrix * vec4(displaced, 1.0);
-          vWorldPosition = world.xyz;
-          vWorldNormal = normalize(mat3(modelMatrix) * localNormal);
-          gl_Position = projectionMatrix * viewMatrix * world;
-        }
-      `,
-            fragmentShader: /* glsl */ `
-        precision highp float;
-        uniform sampler2D uHeightMap;
-        uniform vec2 uTexel;
-        uniform float uTime;
-        uniform vec3 uLightPosition;
-        in vec2 vUv;
-        in vec3 vWorldPosition;
-        in vec3 vWorldNormal;
-        out vec4 outColor;
-
-        void main() {
-          vec2 microRipple = vec2(
-            sin(vUv.x * 54.0 + vUv.y * 19.0 + uTime * 1.35)
-              + sin(vUv.y * 37.0 - uTime * 0.94),
-            cos(vUv.y * 49.0 - vUv.x * 17.0 + uTime * 1.12)
-              + cos(vUv.x * 31.0 + uTime * 0.78)
-          ) * 0.014;
-          vec3 normal = normalize(vWorldNormal + vec3(microRipple.x, 0.0, microRipple.y));
-          vec3 viewDir = normalize(cameraPosition - vWorldPosition);
-          vec3 lightDir = normalize(uLightPosition - vWorldPosition);
-          vec3 halfDir = normalize(viewDir + lightDir);
-          float fresnel = 0.02 + 0.98 * pow(1.0 - max(dot(viewDir, normal), 0.0), 5.0);
-          float specular = pow(max(dot(normal, halfDir), 0.0), 118.0);
-          float height = texture(uHeightMap, vUv).r;
-          float slope = abs(texture(uHeightMap, vUv + vec2(uTexel.x, 0.0)).r - texture(uHeightMap, vUv - vec2(uTexel.x, 0.0)).r)
-                      + abs(texture(uHeightMap, vUv + vec2(0.0, uTexel.y)).r - texture(uHeightMap, vUv - vec2(0.0, uTexel.y)).r);
-          float foam = smoothstep(0.018, 0.07, slope + abs(height) * 0.16);
-          vec3 deep = vec3(0.018, 0.16, 0.2);
-          vec3 reflection = mix(vec3(0.06, 0.2, 0.24), vec3(0.5, 0.86, 0.9), fresnel);
-          vec3 color = mix(deep, reflection, 0.32 + fresnel * 0.68);
-          color += vec3(0.75, 0.98, 1.0) * specular * 1.4;
-          color = mix(color, vec3(0.72, 0.94, 0.96), foam * 0.36);
-          outColor = vec4(color, 0.66 + fresnel * 0.22);
-        }
-      `,
-            transparent: true,
-            depthWrite: false,
-            side: THREE.DoubleSide,
-        });
-        const segmentsX = width >= 200 ? 128 : 64;
-        const segmentsY = width >= 200 ? 64 : 32;
-        this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(basinMaxX - basinMinX - 0.12, basinHalfZ * 2 - 0.12, segmentsX, segmentsY), this.material);
-        this.mesh.rotation.x = -Math.PI / 2;
-        this.mesh.position.set((basinMinX + basinMaxX) * 0.5, waterY, basinCenterZ);
-        this.mesh.renderOrder = 2;
-        this.clear();
-    }
-    clear() {
-        this.cpuCurrent?.fill(0);
-        this.cpuPrevious?.fill(0);
-        this.cpuNext?.fill(0);
-        const previousTarget = this.renderer.getRenderTarget();
-        const previousColor = this.renderer.getClearColor(new THREE.Color());
-        const previousAlpha = this.renderer.getClearAlpha();
-        this.renderer.setClearColor(0x000000, 0);
-        this.renderer.setRenderTarget(this.read);
-        this.renderer.clear();
-        this.renderer.setRenderTarget(this.write);
-        this.renderer.clear();
-        this.renderer.setRenderTarget(previousTarget);
-        this.renderer.setClearColor(previousColor, previousAlpha);
-    }
-    setBounds({ basinMinX, basinMaxX, basinHalfZ, basinCenterZ = 0, waterY }) {
-        this.basinMinX = basinMinX;
-        this.basinMaxX = basinMaxX;
-        this.basinHalfZ = basinHalfZ;
-        this.basinCenterZ = basinCenterZ;
-        this.waterY = waterY;
-        this.mesh.position.set((basinMinX + basinMaxX) * 0.5, waterY, basinCenterZ);
-    }
-    setContainerMotion(sloshX = 0, sloshZ = 0, impulseX = 0, impulseZ = 0) {
-        this.previousSlosh.copy(this.slosh);
-        this.slosh.set(sloshX, sloshZ);
-        this.motionImpulse.set(impulseX, impulseZ);
-        this.computeMaterial.uniforms.uMotionImpulse.value.copy(this.motionImpulse);
-    }
-    update(delta, elapsed, impactWorldX, energy, emitting, impactWorldZ = 0) {
-        this.elapsed = elapsed;
-        const impactUvX = THREE.MathUtils.clamp((impactWorldX - this.basinMinX) / (this.basinMaxX - this.basinMinX), 0.03, 0.97);
-        const impactUvZ = THREE.MathUtils.clamp((impactWorldZ - (this.basinCenterZ - this.basinHalfZ)) / (this.basinHalfZ * 2), 0.03, 0.97);
-        const impulse = emitting ? Math.min(energy * delta * 0.00135, 0.0035) : 0;
-        this.computeMaterial.uniforms.uState.value = this.read.texture;
-        this.computeMaterial.uniforms.uImpactUv.value.set(impactUvX, impactUvZ);
-        this.computeMaterial.uniforms.uImpulse.value = impulse;
-        this.computeMaterial.uniforms.uTime.value = elapsed;
-        if (this.cpuSampling) {
-            this.stepCpuSampler(delta, elapsed, impactUvX, impactUvZ, impactWorldX, impactWorldZ, energy, emitting, impulse);
+import * as THREE from 'three';
+const quadVertex = /* glsl */ `
+  out vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0);
+  }
+`;
+function createWaveTarget(width, height) {
+    return new THREE.WebGLRenderTarget(width, height, {
+        format: THREE.RGBAFormat,
+        type: THREE.HalfFloatType,
+        minFilter: THREE.LinearFilter,
+        magFilter: THREE.LinearFilter,
+        wrapS: THREE.ClampToEdgeWrapping,
+        wrapT: THREE.ClampToEdgeWrapping,
+        depthBuffer: false,
+    });
+}
+function ambientSurfaceHeight(u, v, time) {
+    const sourceX = 0.56 + Math.sin(time * 0.17) * 0.13;
+    const sourceZ = 0.48 + Math.cos(time * 0.14) * 0.11;
+    const radialX = (u - sourceX) * 1.65;
+    const radialZ = v - sourceZ;
+    const radialDistance = Math.hypot(radialX, radialZ);
+    const swellA = Math.sin(u * 11.0 + v * 7.0 + time * 1.15) * 0.008;
+    const swellB = Math.sin(-u * 8.0 + v * 13.0 - time * 0.88 + 0.9) * 0.0055;
+    const radial = Math.sin(radialDistance * 29.0 - time * 2.05)
+        * Math.exp(-radialDistance * 2.0) * 0.0065;
+    return swellA + swellB + radial;
+}
+function sloshSurfaceHeight(u, v, slosh) {
+    return (u - 0.5) * 2 * slosh.x + (v - 0.5) * 2 * slosh.y;
+}
+export class ShallowWaterSurface {
+    renderer;
+    width;
+    height;
+    basinMinX;
+    basinMaxX;
+    basinHalfZ;
+    basinCenterZ;
+    waterY;
+    cpuSampling;
+    cpuWidth;
+    cpuHeight;
+    cpuCurrent;
+    cpuPrevious;
+    cpuNext;
+    cpuLastDelta;
+    cpuImpactX;
+    cpuImpactZ;
+    cpuImpactEnergy;
+    cpuEmitting;
+    elapsed;
+    slosh;
+    previousSlosh;
+    motionImpulse;
+    /** 高度场乒乓 RT：每帧交换，故非 readonly。 */
+    read;
+    write;
+    computeScene;
+    computeCamera;
+    computeMaterial;
+    computeQuad;
+    material;
+    /** 对外可见的水面网格（ReservoirSystem 会改 renderOrder / visible）。 */
+    mesh;
+    constructor(renderer, { width = 256, height = 128, basinMinX = 0.25, basinMaxX = 3.85, basinHalfZ = 0.82, basinCenterZ = 0, waterY = 0.2, cpuSampling = false, } = {}) {
+        this.renderer = renderer;
+        this.width = width;
+        this.height = height;
+        this.basinMinX = basinMinX;
+        this.basinMaxX = basinMaxX;
+        this.basinHalfZ = basinHalfZ;
+        this.basinCenterZ = basinCenterZ;
+        this.waterY = waterY;
+        this.cpuSampling = cpuSampling;
+        this.cpuWidth = cpuSampling ? 48 : 0;
+        this.cpuHeight = cpuSampling ? 24 : 0;
+        this.cpuCurrent = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
+        this.cpuPrevious = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
+        this.cpuNext = cpuSampling ? new Float32Array(this.cpuWidth * this.cpuHeight) : null;
+        this.cpuLastDelta = 1 / 60;
+        this.cpuImpactX = (basinMinX + basinMaxX) * 0.5;
+        this.cpuImpactZ = basinCenterZ;
+        this.cpuImpactEnergy = 0;
+        this.cpuEmitting = false;
+        this.elapsed = 0;
+        this.slosh = new THREE.Vector2();
+        this.previousSlosh = new THREE.Vector2();
+        this.motionImpulse = new THREE.Vector2();
+        this.read = createWaveTarget(width, height);
+        this.write = createWaveTarget(width, height);
+        this.computeScene = new THREE.Scene();
+        this.computeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        this.computeMaterial = new THREE.ShaderMaterial({
+            glslVersion: THREE.GLSL3,
+            uniforms: {
+                uState: { value: this.read.texture },
+                uTexel: { value: new THREE.Vector2(1 / width, 1 / height) },
+                uImpactUv: { value: new THREE.Vector2(0.35, 0.5) },
+                uImpulse: { value: 0 },
+                uTime: { value: 0 },
+                uMotionImpulse: { value: new THREE.Vector2() },
+            },
+            vertexShader: quadVertex,
+            fragmentShader: /* glsl */ `
+        precision highp float;
+        uniform sampler2D uState;
+        uniform vec2 uTexel;
+        uniform vec2 uImpactUv;
+        uniform float uImpulse;
+        uniform float uTime;
+        uniform vec2 uMotionImpulse;
+        in vec2 vUv;
+        out vec4 outColor;
+
+        void main() {
+          vec2 state = texture(uState, vUv).rg;
+          float current = state.r;
+          float previous = state.g;
+          float left = texture(uState, vUv - vec2(uTexel.x, 0.0)).r;
+          float right = texture(uState, vUv + vec2(uTexel.x, 0.0)).r;
+          float down = texture(uState, vUv - vec2(0.0, uTexel.y)).r;
+          float up = texture(uState, vUv + vec2(0.0, uTexel.y)).r;
+          float laplacian = left + right + down + up - 4.0 * current;
+          float nextHeight = (2.0 * current - previous) + laplacian * 0.235;
+          nextHeight *= 0.9925;
+
+          vec2 aspectUv = (vUv - uImpactUv) * vec2(2.2, 1.0);
+          float impact = exp(-dot(aspectUv, aspectUv) * 420.0);
+          float microPulse = 0.72 + 0.28 * sin(uTime * 19.0);
+          nextHeight += impact * uImpulse * microPulse;
+
+          vec2 sourceA = vec2(0.22 + sin(uTime * 0.19) * 0.08, 0.31 + cos(uTime * 0.16) * 0.09);
+          vec2 sourceB = vec2(0.72 + cos(uTime * 0.13) * 0.09, 0.68 + sin(uTime * 0.17) * 0.08);
+          vec2 deltaA = (vUv - sourceA) * vec2(1.75, 1.0);
+          vec2 deltaB = (vUv - sourceB) * vec2(1.55, 1.0);
+          float distanceA = length(deltaA);
+          float distanceB = length(deltaB);
+          float ambientWaves = sin(distanceA * 47.0 - uTime * 2.15) * exp(-distanceA * 3.8)
+                             + sin(distanceB * 39.0 - uTime * 1.72 + 1.4) * exp(-distanceB * 3.5);
+          nextHeight += ambientWaves * 0.000028;
+
+          vec2 centered = vUv - 0.5;
+          float wallResponse = 0.34
+            + 0.66 * pow(max(abs(centered.x), abs(centered.y)) * 2.0, 2.0);
+          nextHeight += dot(centered, uMotionImpulse) * wallResponse;
+
+          float edge = smoothstep(0.0, 0.025, vUv.x) * smoothstep(1.0, 0.975, vUv.x)
+                     * smoothstep(0.0, 0.045, vUv.y) * smoothstep(1.0, 0.955, vUv.y);
+          nextHeight *= mix(0.86, 1.0, edge);
+          outColor = vec4(nextHeight, current, 0.0, 1.0);
         }
-        const previousTarget = this.renderer.getRenderTarget();
-        this.renderer.setRenderTarget(this.write);
-        this.renderer.render(this.computeScene, this.computeCamera);
-        this.renderer.setRenderTarget(previousTarget);
-        [this.read, this.write] = [this.write, this.read];
-        this.material.uniforms.uHeightMap.value = this.read.texture;
-        this.material.uniforms.uTime.value = elapsed;
-    }
-    stepCpuSampler(delta, elapsed, impactUvX, impactUvZ, impactWorldX, impactWorldZ, energy, emitting, impulse) {
-        const width = this.cpuWidth;
-        const height = this.cpuHeight;
-        const current = this.cpuCurrent;
-        const previous = this.cpuPrevious;
-        const next = this.cpuNext;
-        const microPulse = 0.72 + 0.28 * Math.sin(elapsed * 19);
-        const sourceAX = 0.22 + Math.sin(elapsed * 0.19) * 0.08;
-        const sourceAZ = 0.31 + Math.cos(elapsed * 0.16) * 0.09;
-        const sourceBX = 0.72 + Math.cos(elapsed * 0.13) * 0.09;
-        const sourceBZ = 0.68 + Math.sin(elapsed * 0.17) * 0.08;
-        for (let z = 0; z < height; z++) {
-            const uvZ = (z + 0.5) / height;
-            const zEdge = Math.min(1, uvZ / 0.055, (1 - uvZ) / 0.055);
-            for (let x = 0; x < width; x++) {
-                const index = z * width + x;
-                const uvX = (x + 0.5) / width;
-                const left = current[z * width + Math.max(0, x - 1)];
-                const right = current[z * width + Math.min(width - 1, x + 1)];
-                const down = current[Math.max(0, z - 1) * width + x];
-                const up = current[Math.min(height - 1, z + 1) * width + x];
-                const laplacian = left + right + down + up - 4 * current[index];
-                let nextHeight = (2 * current[index] - previous[index]) + laplacian * 0.235;
-                nextHeight *= 0.9925;
-                const dx = (uvX - impactUvX) * 2.2;
-                const dz = uvZ - impactUvZ;
-                nextHeight += Math.exp(-(dx * dx + dz * dz) * 420) * impulse * microPulse;
-                const ambientAX = (uvX - sourceAX) * 1.75;
-                const ambientAZ = uvZ - sourceAZ;
-                const ambientBX = (uvX - sourceBX) * 1.55;
-                const ambientBZ = uvZ - sourceBZ;
-                const distanceA = Math.hypot(ambientAX, ambientAZ);
-                const distanceB = Math.hypot(ambientBX, ambientBZ);
-                const ambientWaves = Math.sin(distanceA * 47 - elapsed * 2.15) * Math.exp(-distanceA * 3.8)
-                    + Math.sin(distanceB * 39 - elapsed * 1.72 + 1.4) * Math.exp(-distanceB * 3.5);
-                nextHeight += ambientWaves * 0.000028;
-                const centeredX = uvX - 0.5;
-                const centeredZ = uvZ - 0.5;
-                const wallResponse = 0.34 + 0.66 * Math.pow(Math.max(Math.abs(centeredX), Math.abs(centeredZ)) * 2, 2);
-                nextHeight += (centeredX * this.motionImpulse.x + centeredZ * this.motionImpulse.y) * wallResponse;
-                const xEdge = Math.min(1, uvX / 0.035, (1 - uvX) / 0.035);
-                nextHeight *= THREE.MathUtils.lerp(0.86, 1, Math.max(0, Math.min(xEdge, zEdge)));
-                next[index] = nextHeight;
-            }
+      `,
+            depthTest: false,
+            depthWrite: false,
+            toneMapped: false,
+        });
+        this.computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.computeMaterial);
+        this.computeQuad.frustumCulled = false;
+        this.computeScene.add(this.computeQuad);
+        this.material = new THREE.ShaderMaterial({
+            glslVersion: THREE.GLSL3,
+            uniforms: {
+                uHeightMap: { value: this.read.texture },
+                uTexel: { value: new THREE.Vector2(1 / width, 1 / height) },
+                uTime: { value: 0 },
+                uSlosh: { value: this.slosh },
+                uLightPosition: { value: new THREE.Vector3(-1, 5, 4) },
+            },
+            vertexShader: /* glsl */ `
+        precision highp float;
+        uniform sampler2D uHeightMap;
+        uniform vec2 uTexel;
+        uniform float uTime;
+        uniform vec2 uSlosh;
+        out vec2 vUv;
+        out vec3 vWorldPosition;
+        out vec3 vWorldNormal;
+
+        float ambientHeight(vec2 sampleUv) {
+          vec2 source = vec2(
+            0.56 + sin(uTime * 0.17) * 0.13,
+            0.48 + cos(uTime * 0.14) * 0.11
+          );
+          vec2 radialDelta = (sampleUv - source) * vec2(1.65, 1.0);
+          float radialDistance = length(radialDelta);
+          float swellA = sin(sampleUv.x * 11.0 + sampleUv.y * 7.0 + uTime * 1.15) * 0.008;
+          float swellB = sin(-sampleUv.x * 8.0 + sampleUv.y * 13.0 - uTime * 0.88 + 0.9) * 0.0055;
+          float radial = sin(radialDistance * 29.0 - uTime * 2.05)
+            * exp(-radialDistance * 2.0) * 0.0065;
+          return swellA + swellB + radial;
         }
-        this.cpuPrevious = current;
-        this.cpuCurrent = next;
-        this.cpuNext = previous;
-        this.cpuLastDelta = Math.max(delta, 1 / 120);
-        this.cpuImpactX = impactWorldX;
-        this.cpuImpactZ = impactWorldZ;
-        this.cpuImpactEnergy = energy;
-        this.cpuEmitting = emitting;
-    }
-    sampleSurface(worldX, worldZ, target = {}) {
-        target.height = 0;
-        target.velocityY = 0;
-        target.slopeX = 0;
-        target.slopeZ = 0;
-        target.flowX = 0;
-        target.flowZ = 0;
-        target.impact = 0;
-        if (!this.cpuSampling || !this.cpuCurrent)
-            return target;
-        const sample = (field, u, v) => {
-            const x = THREE.MathUtils.clamp(u, 0, 1) * (this.cpuWidth - 1);
-            const z = THREE.MathUtils.clamp(v, 0, 1) * (this.cpuHeight - 1);
-            const x0 = Math.floor(x);
-            const z0 = Math.floor(z);
-            const x1 = Math.min(this.cpuWidth - 1, x0 + 1);
-            const z1 = Math.min(this.cpuHeight - 1, z0 + 1);
-            const tx = x - x0;
-            const tz = z - z0;
-            const a = THREE.MathUtils.lerp(field[z0 * this.cpuWidth + x0], field[z0 * this.cpuWidth + x1], tx);
-            const b = THREE.MathUtils.lerp(field[z1 * this.cpuWidth + x0], field[z1 * this.cpuWidth + x1], tx);
-            return THREE.MathUtils.lerp(a, b, tz);
-        };
-        const u = (worldX - this.basinMinX) / Math.max(this.basinMaxX - this.basinMinX, 0.001);
-        const v = (worldZ - (this.basinCenterZ - this.basinHalfZ)) / Math.max(this.basinHalfZ * 2, 0.001);
-        const du = 1 / Math.max(this.cpuWidth - 1, 1);
-        const dv = 1 / Math.max(this.cpuHeight - 1, 1);
-        const center = sample(this.cpuCurrent, u, v);
-        const previous = sample(this.cpuPrevious, u, v);
-        const left = sample(this.cpuCurrent, u - du, v);
-        const right = sample(this.cpuCurrent, u + du, v);
-        const down = sample(this.cpuCurrent, u, v - dv);
-        const up = sample(this.cpuCurrent, u, v + dv);
-        const cellX = (this.basinMaxX - this.basinMinX) * du;
-        const cellZ = this.basinHalfZ * 2 * dv;
-        const displacementScale = 0.52;
-        const ambientCenter = ambientSurfaceHeight(u, v, this.elapsed) + sloshSurfaceHeight(u, v, this.slosh);
-        const ambientPrevious = ambientSurfaceHeight(u, v, this.elapsed - this.cpuLastDelta)
-            + sloshSurfaceHeight(u, v, this.previousSlosh);
-        const ambientLeft = ambientSurfaceHeight(u - du, v, this.elapsed) + sloshSurfaceHeight(u - du, v, this.slosh);
-        const ambientRight = ambientSurfaceHeight(u + du, v, this.elapsed) + sloshSurfaceHeight(u + du, v, this.slosh);
-        const ambientDown = ambientSurfaceHeight(u, v - dv, this.elapsed) + sloshSurfaceHeight(u, v - dv, this.slosh);
-        const ambientUp = ambientSurfaceHeight(u, v + dv, this.elapsed) + sloshSurfaceHeight(u, v + dv, this.slosh);
-        target.height = center * displacementScale + ambientCenter;
-        target.velocityY = ((center - previous) * displacementScale + ambientCenter - ambientPrevious)
-            / this.cpuLastDelta;
-        target.slopeX = ((right - left) * displacementScale + ambientRight - ambientLeft)
-            / Math.max(cellX * 2, 0.001);
-        target.slopeZ = ((up - down) * displacementScale + ambientUp - ambientDown)
-            / Math.max(cellZ * 2, 0.001);
-        target.flowX = -target.slopeX * 1.35;
-        target.flowZ = -target.slopeZ * 1.35;
-        if (this.cpuEmitting) {
-            const dx = worldX - this.cpuImpactX;
-            const dz = worldZ - this.cpuImpactZ;
-            const distanceSq = dx * dx + dz * dz;
-            const inverseDistance = 1 / Math.max(Math.sqrt(distanceSq), 0.06);
-            const sourceStrength = Math.min(this.cpuImpactEnergy * 0.075, 1.15) * Math.exp(-distanceSq / 0.48);
-            target.flowX += sourceStrength * (0.42 + dx * inverseDistance * 0.68);
-            target.flowZ += sourceStrength * dz * inverseDistance * 0.92;
-            target.impact = sourceStrength * Math.exp(-distanceSq / 0.095);
+
+        float surfaceHeight(vec2 sampleUv) {
+          float sloshHeight = dot((sampleUv - 0.5) * 2.0, uSlosh);
+          return texture(uHeightMap, sampleUv).r * 0.52 + ambientHeight(sampleUv) + sloshHeight;
         }
-        return target;
-    }
-    dispose() {
-        this.read.dispose();
-        this.write.dispose();
-        this.computeMaterial.dispose();
-        this.computeQuad.geometry.dispose();
-        this.material.dispose();
-        this.mesh.geometry.dispose();
-    }
-}
+
+        void main() {
+          vUv = uv;
+          float h = surfaceHeight(uv);
+          float hL = surfaceHeight(uv - vec2(uTexel.x, 0.0));
+          float hR = surfaceHeight(uv + vec2(uTexel.x, 0.0));
+          float hD = surfaceHeight(uv - vec2(0.0, uTexel.y));
+          float hU = surfaceHeight(uv + vec2(0.0, uTexel.y));
+          vec3 displaced = position;
+          displaced.z += h;
+          vec3 localNormal = normalize(vec3((hL - hR) * 46.0, (hD - hU) * 46.0, 1.0));
+          vec4 world = modelMatrix * vec4(displaced, 1.0);
+          vWorldPosition = world.xyz;
+          vWorldNormal = normalize(mat3(modelMatrix) * localNormal);
+          gl_Position = projectionMatrix * viewMatrix * world;
+        }
+      `,
+            fragmentShader: /* glsl */ `
+        precision highp float;
+        uniform sampler2D uHeightMap;
+        uniform vec2 uTexel;
+        uniform float uTime;
+        uniform vec3 uLightPosition;
+        in vec2 vUv;
+        in vec3 vWorldPosition;
+        in vec3 vWorldNormal;
+        out vec4 outColor;
+
+        void main() {
+          vec2 microRipple = vec2(
+            sin(vUv.x * 54.0 + vUv.y * 19.0 + uTime * 1.35)
+              + sin(vUv.y * 37.0 - uTime * 0.94),
+            cos(vUv.y * 49.0 - vUv.x * 17.0 + uTime * 1.12)
+              + cos(vUv.x * 31.0 + uTime * 0.78)
+          ) * 0.014;
+          vec3 normal = normalize(vWorldNormal + vec3(microRipple.x, 0.0, microRipple.y));
+          vec3 viewDir = normalize(cameraPosition - vWorldPosition);
+          vec3 lightDir = normalize(uLightPosition - vWorldPosition);
+          vec3 halfDir = normalize(viewDir + lightDir);
+          float fresnel = 0.02 + 0.98 * pow(1.0 - max(dot(viewDir, normal), 0.0), 5.0);
+          float specular = pow(max(dot(normal, halfDir), 0.0), 118.0);
+          float height = texture(uHeightMap, vUv).r;
+          float slope = abs(texture(uHeightMap, vUv + vec2(uTexel.x, 0.0)).r - texture(uHeightMap, vUv - vec2(uTexel.x, 0.0)).r)
+                      + abs(texture(uHeightMap, vUv + vec2(0.0, uTexel.y)).r - texture(uHeightMap, vUv - vec2(0.0, uTexel.y)).r);
+          float foam = smoothstep(0.018, 0.07, slope + abs(height) * 0.16);
+          vec3 deep = vec3(0.018, 0.16, 0.2);
+          vec3 reflection = mix(vec3(0.06, 0.2, 0.24), vec3(0.5, 0.86, 0.9), fresnel);
+          vec3 color = mix(deep, reflection, 0.32 + fresnel * 0.68);
+          color += vec3(0.75, 0.98, 1.0) * specular * 1.4;
+          color = mix(color, vec3(0.72, 0.94, 0.96), foam * 0.36);
+          outColor = vec4(color, 0.66 + fresnel * 0.22);
+        }
+      `,
+            transparent: true,
+            depthWrite: false,
+            side: THREE.DoubleSide,
+        });
+        const segmentsX = width >= 200 ? 128 : 64;
+        const segmentsY = width >= 200 ? 64 : 32;
+        this.mesh = new THREE.Mesh(new THREE.PlaneGeometry(basinMaxX - basinMinX - 0.12, basinHalfZ * 2 - 0.12, segmentsX, segmentsY), this.material);
+        this.mesh.rotation.x = -Math.PI / 2;
+        this.mesh.position.set((basinMinX + basinMaxX) * 0.5, waterY, basinCenterZ);
+        this.mesh.renderOrder = 2;
+        this.clear();
+    }
+    clear() {
+        this.cpuCurrent?.fill(0);
+        this.cpuPrevious?.fill(0);
+        this.cpuNext?.fill(0);
+        const previousTarget = this.renderer.getRenderTarget();
+        const previousColor = this.renderer.getClearColor(new THREE.Color());
+        const previousAlpha = this.renderer.getClearAlpha();
+        this.renderer.setClearColor(0x000000, 0);
+        this.renderer.setRenderTarget(this.read);
+        this.renderer.clear();
+        this.renderer.setRenderTarget(this.write);
+        this.renderer.clear();
+        this.renderer.setRenderTarget(previousTarget);
+        this.renderer.setClearColor(previousColor, previousAlpha);
+    }
+    setBounds({ basinMinX, basinMaxX, basinHalfZ, basinCenterZ = 0, waterY }) {
+        this.basinMinX = basinMinX;
+        this.basinMaxX = basinMaxX;
+        this.basinHalfZ = basinHalfZ;
+        this.basinCenterZ = basinCenterZ;
+        this.waterY = waterY;
+        this.mesh.position.set((basinMinX + basinMaxX) * 0.5, waterY, basinCenterZ);
+    }
+    setContainerMotion(sloshX = 0, sloshZ = 0, impulseX = 0, impulseZ = 0) {
+        this.previousSlosh.copy(this.slosh);
+        this.slosh.set(sloshX, sloshZ);
+        this.motionImpulse.set(impulseX, impulseZ);
+        this.computeMaterial.uniforms.uMotionImpulse.value.copy(this.motionImpulse);
+    }
+    update(delta, elapsed, impactWorldX, energy, emitting, impactWorldZ = 0) {
+        this.elapsed = elapsed;
+        const impactUvX = THREE.MathUtils.clamp((impactWorldX - this.basinMinX) / (this.basinMaxX - this.basinMinX), 0.03, 0.97);
+        const impactUvZ = THREE.MathUtils.clamp((impactWorldZ - (this.basinCenterZ - this.basinHalfZ)) / (this.basinHalfZ * 2), 0.03, 0.97);
+        const impulse = emitting ? Math.min(energy * delta * 0.00135, 0.0035) : 0;
+        this.computeMaterial.uniforms.uState.value = this.read.texture;
+        this.computeMaterial.uniforms.uImpactUv.value.set(impactUvX, impactUvZ);
+        this.computeMaterial.uniforms.uImpulse.value = impulse;
+        this.computeMaterial.uniforms.uTime.value = elapsed;
+        if (this.cpuSampling) {
+            this.stepCpuSampler(delta, elapsed, impactUvX, impactUvZ, impactWorldX, impactWorldZ, energy, emitting, impulse);
+        }
+        const previousTarget = this.renderer.getRenderTarget();
+        this.renderer.setRenderTarget(this.write);
+        this.renderer.render(this.computeScene, this.computeCamera);
+        this.renderer.setRenderTarget(previousTarget);
+        [this.read, this.write] = [this.write, this.read];
+        this.material.uniforms.uHeightMap.value = this.read.texture;
+        this.material.uniforms.uTime.value = elapsed;
+    }
+    stepCpuSampler(delta, elapsed, impactUvX, impactUvZ, impactWorldX, impactWorldZ, energy, emitting, impulse) {
+        const width = this.cpuWidth;
+        const height = this.cpuHeight;
+        const current = this.cpuCurrent;
+        const previous = this.cpuPrevious;
+        const next = this.cpuNext;
+        const microPulse = 0.72 + 0.28 * Math.sin(elapsed * 19);
+        const sourceAX = 0.22 + Math.sin(elapsed * 0.19) * 0.08;
+        const sourceAZ = 0.31 + Math.cos(elapsed * 0.16) * 0.09;
+        const sourceBX = 0.72 + Math.cos(elapsed * 0.13) * 0.09;
+        const sourceBZ = 0.68 + Math.sin(elapsed * 0.17) * 0.08;
+        for (let z = 0; z < height; z++) {
+            const uvZ = (z + 0.5) / height;
+            const zEdge = Math.min(1, uvZ / 0.055, (1 - uvZ) / 0.055);
+            for (let x = 0; x < width; x++) {
+                const index = z * width + x;
+                const uvX = (x + 0.5) / width;
+                const left = current[z * width + Math.max(0, x - 1)];
+                const right = current[z * width + Math.min(width - 1, x + 1)];
+                const down = current[Math.max(0, z - 1) * width + x];
+                const up = current[Math.min(height - 1, z + 1) * width + x];
+                const laplacian = left + right + down + up - 4 * current[index];
+                let nextHeight = (2 * current[index] - previous[index]) + laplacian * 0.235;
+                nextHeight *= 0.9925;
+                const dx = (uvX - impactUvX) * 2.2;
+                const dz = uvZ - impactUvZ;
+                nextHeight += Math.exp(-(dx * dx + dz * dz) * 420) * impulse * microPulse;
+                const ambientAX = (uvX - sourceAX) * 1.75;
+                const ambientAZ = uvZ - sourceAZ;
+                const ambientBX = (uvX - sourceBX) * 1.55;
+                const ambientBZ = uvZ - sourceBZ;
+                const distanceA = Math.hypot(ambientAX, ambientAZ);
+                const distanceB = Math.hypot(ambientBX, ambientBZ);
+                const ambientWaves = Math.sin(distanceA * 47 - elapsed * 2.15) * Math.exp(-distanceA * 3.8)
+                    + Math.sin(distanceB * 39 - elapsed * 1.72 + 1.4) * Math.exp(-distanceB * 3.5);
+                nextHeight += ambientWaves * 0.000028;
+                const centeredX = uvX - 0.5;
+                const centeredZ = uvZ - 0.5;
+                const wallResponse = 0.34 + 0.66 * Math.pow(Math.max(Math.abs(centeredX), Math.abs(centeredZ)) * 2, 2);
+                nextHeight += (centeredX * this.motionImpulse.x + centeredZ * this.motionImpulse.y) * wallResponse;
+                const xEdge = Math.min(1, uvX / 0.035, (1 - uvX) / 0.035);
+                nextHeight *= THREE.MathUtils.lerp(0.86, 1, Math.max(0, Math.min(xEdge, zEdge)));
+                next[index] = nextHeight;
+            }
+        }
+        this.cpuPrevious = current;
+        this.cpuCurrent = next;
+        this.cpuNext = previous;
+        this.cpuLastDelta = Math.max(delta, 1 / 120);
+        this.cpuImpactX = impactWorldX;
+        this.cpuImpactZ = impactWorldZ;
+        this.cpuImpactEnergy = energy;
+        this.cpuEmitting = emitting;
+    }
+    sampleSurface(worldX, worldZ, target = {}) {
+        target.height = 0;
+        target.velocityY = 0;
+        target.slopeX = 0;
+        target.slopeZ = 0;
+        target.flowX = 0;
+        target.flowZ = 0;
+        target.impact = 0;
+        if (!this.cpuSampling || !this.cpuCurrent)
+            return target;
+        const sample = (field, u, v) => {
+            const x = THREE.MathUtils.clamp(u, 0, 1) * (this.cpuWidth - 1);
+            const z = THREE.MathUtils.clamp(v, 0, 1) * (this.cpuHeight - 1);
+            const x0 = Math.floor(x);
+            const z0 = Math.floor(z);
+            const x1 = Math.min(this.cpuWidth - 1, x0 + 1);
+            const z1 = Math.min(this.cpuHeight - 1, z0 + 1);
+            const tx = x - x0;
+            const tz = z - z0;
+            const a = THREE.MathUtils.lerp(field[z0 * this.cpuWidth + x0], field[z0 * this.cpuWidth + x1], tx);
+            const b = THREE.MathUtils.lerp(field[z1 * this.cpuWidth + x0], field[z1 * this.cpuWidth + x1], tx);
+            return THREE.MathUtils.lerp(a, b, tz);
+        };
+        const u = (worldX - this.basinMinX) / Math.max(this.basinMaxX - this.basinMinX, 0.001);
+        const v = (worldZ - (this.basinCenterZ - this.basinHalfZ)) / Math.max(this.basinHalfZ * 2, 0.001);
+        const du = 1 / Math.max(this.cpuWidth - 1, 1);
+        const dv = 1 / Math.max(this.cpuHeight - 1, 1);
+        const center = sample(this.cpuCurrent, u, v);
+        const previous = sample(this.cpuPrevious, u, v);
+        const left = sample(this.cpuCurrent, u - du, v);
+        const right = sample(this.cpuCurrent, u + du, v);
+        const down = sample(this.cpuCurrent, u, v - dv);
+        const up = sample(this.cpuCurrent, u, v + dv);
+        const cellX = (this.basinMaxX - this.basinMinX) * du;
+        const cellZ = this.basinHalfZ * 2 * dv;
+        const displacementScale = 0.52;
+        const ambientCenter = ambientSurfaceHeight(u, v, this.elapsed) + sloshSurfaceHeight(u, v, this.slosh);
+        const ambientPrevious = ambientSurfaceHeight(u, v, this.elapsed - this.cpuLastDelta)
+            + sloshSurfaceHeight(u, v, this.previousSlosh);
+        const ambientLeft = ambientSurfaceHeight(u - du, v, this.elapsed) + sloshSurfaceHeight(u - du, v, this.slosh);
+        const ambientRight = ambientSurfaceHeight(u + du, v, this.elapsed) + sloshSurfaceHeight(u + du, v, this.slosh);
+        const ambientDown = ambientSurfaceHeight(u, v - dv, this.elapsed) + sloshSurfaceHeight(u, v - dv, this.slosh);
+        const ambientUp = ambientSurfaceHeight(u, v + dv, this.elapsed) + sloshSurfaceHeight(u, v + dv, this.slosh);
+        target.height = center * displacementScale + ambientCenter;
+        target.velocityY = ((center - previous) * displacementScale + ambientCenter - ambientPrevious)
+            / this.cpuLastDelta;
+        target.slopeX = ((right - left) * displacementScale + ambientRight - ambientLeft)
+            / Math.max(cellX * 2, 0.001);
+        target.slopeZ = ((up - down) * displacementScale + ambientUp - ambientDown)
+            / Math.max(cellZ * 2, 0.001);
+        target.flowX = -target.slopeX * 1.35;
+        target.flowZ = -target.slopeZ * 1.35;
+        if (this.cpuEmitting) {
+            const dx = worldX - this.cpuImpactX;
+            const dz = worldZ - this.cpuImpactZ;
+            const distanceSq = dx * dx + dz * dz;
+            const inverseDistance = 1 / Math.max(Math.sqrt(distanceSq), 0.06);
+            const sourceStrength = Math.min(this.cpuImpactEnergy * 0.075, 1.15) * Math.exp(-distanceSq / 0.48);
+            target.flowX += sourceStrength * (0.42 + dx * inverseDistance * 0.68);
+            target.flowZ += sourceStrength * dz * inverseDistance * 0.92;
+            target.impact = sourceStrength * Math.exp(-distanceSq / 0.095);
+        }
+        return target;
+    }
+    dispose() {
+        this.read.dispose();
+        this.write.dispose();
+        this.computeMaterial.dispose();
+        this.computeQuad.geometry.dispose();
+        this.material.dispose();
+        this.mesh.geometry.dispose();
+    }
+}