@zephyr3d/scene 0.1.0

package/dist/render/watermesh.js

@@ -0,0 +1,835 @@
+import { Vector2, Vector4, Vector3, PRNG } from '@zephyr3d/base';
+import { Application } from '../app.js';
+import { Clipmap } from './clipmap.js';
+import { Primitive } from './primitive.js';
+import { createProgramH0, createProgramHk, createProgramFFT2H, createProgramFFT2V, createProgramPostFFT2, createProgramOcean } from '../shaders/water.js';
+
+/** @internal */ const defaultBuildParams = {
+    cascades: [
+        {
+            size: 450.0,
+            strength: 0.8,
+            croppiness: -1.2,
+            minWave: 0,
+            maxWave: 100
+        },
+        {
+            size: 103.0,
+            strength: 0.8,
+            croppiness: -1.5,
+            minWave: 0,
+            maxWave: 100
+        },
+        {
+            size: 13,
+            strength: 0.9,
+            croppiness: -1.5,
+            minWave: 0,
+            maxWave: 7
+        }
+    ],
+    resolution: 256,
+    wind: new Vector2(2, 2),
+    alignment: 0.01,
+    foamParams: new Vector2(1, 2),
+    randomSeed: 0
+};
+const RENDER_NONE = 0;
+const RENDER_NORMAL = 1;
+const RENDER_TWO_PASS = 2;
+/** @internal */ class WaterMesh {
+    static _globals = null;
+    _h0BindGroup;
+    _hkBindGroup;
+    _hkBindGroup2;
+    _hkBindGroup4;
+    _fft2hBindGroup;
+    _fft2hBindGroup2;
+    _fft2hBindGroup4;
+    _fft2vBindGroup;
+    _fft2vBindGroup2;
+    _fft2vBindGroup4;
+    _postfft2BindGroup;
+    _postfft2BindGroup2;
+    _postfft2BindGroup4;
+    _waterBindGroup;
+    _nearestRepeatSampler;
+    _linearRepeatSampler;
+    _updateRenderStates;
+    _waterRenderStates;
+    _wireframe;
+    _gridScale;
+    _level;
+    _tileSize;
+    _regionMin;
+    _regionMax;
+    _sizes;
+    _croppinesses;
+    _params;
+    _instanceData;
+    _ifftTextures;
+    _clipmap;
+    _aabbExtents;
+    _cascades;
+    _paramsChanged;
+    _resolutionChanged;
+    _textureFormat;
+    _h0TextureFormat;
+    _dataTextureFormat;
+    _renderMode;
+    _updateFrameStamp;
+    // private _impl: WaterShaderImpl;
+    constructor(device, impl){
+        const renderTargetFloat32 = device.getDeviceCaps().textureCaps.supportFloatColorBuffer;
+        const linearFloat32 = renderTargetFloat32 && device.getDeviceCaps().textureCaps.supportLinearFloatTexture;
+        const renderTargetFloat16 = device.getDeviceCaps().textureCaps.supportHalfFloatColorBuffer;
+        const maxDrawBuffers = /*device.type !== 'webgl' && */ renderTargetFloat16 ? device.getDeviceCaps().framebufferCaps.maxDrawBuffers : 0;
+        const maxSampleBytes = device.getDeviceCaps().framebufferCaps.maxColorAttachmentBytesPerSample;
+        if (maxDrawBuffers >= 6 && maxSampleBytes >= 96) {
+            this._renderMode = RENDER_NORMAL;
+            this._textureFormat = renderTargetFloat32 ? 'rgba32f' : 'rgba16f';
+            this._h0TextureFormat = renderTargetFloat32 ? 'rgba32f' : 'rgba16f';
+            this._dataTextureFormat = linearFloat32 ? 'rgba32f' : 'rgba16f';
+        } else if (maxDrawBuffers >= 6 && maxSampleBytes >= 48) {
+            this._renderMode = RENDER_NORMAL;
+            this._textureFormat = 'rgba16f';
+            this._h0TextureFormat = renderTargetFloat32 ? 'rgba32f' : 'rgba16f';
+            this._dataTextureFormat = 'rgba16f';
+        } else if (maxDrawBuffers >= 4 && maxSampleBytes >= 64) {
+            this._renderMode = RENDER_TWO_PASS;
+            this._textureFormat = renderTargetFloat32 ? 'rgba32f' : 'rgba16f';
+            this._h0TextureFormat = renderTargetFloat32 ? 'rgba32f' : 'rgba16f';
+            this._dataTextureFormat = renderTargetFloat32 && linearFloat32 ? 'rgba32f' : 'rgba16f';
+        } else if (maxDrawBuffers >= 4 && maxSampleBytes >= 32) {
+            this._renderMode = RENDER_TWO_PASS;
+            this._textureFormat = 'rgba16f';
+            this._h0TextureFormat = 'rgba16f';
+            this._dataTextureFormat = 'rgba16f';
+        } else {
+            this._renderMode = RENDER_NONE;
+            this._textureFormat = null;
+            this._h0TextureFormat = null;
+            this._dataTextureFormat = null;
+        }
+        if (this._renderMode !== RENDER_NONE) {
+            WaterMesh._globals = WaterMesh._globals ?? {
+                programs: {
+                    h0Program: createProgramH0(),
+                    hkProgram: this._renderMode === RENDER_NORMAL ? createProgramHk() : null,
+                    hkProgram2: this._renderMode === RENDER_TWO_PASS ? createProgramHk(2) : null,
+                    hkProgram4: this._renderMode === RENDER_TWO_PASS ? createProgramHk(4) : null,
+                    fft2hProgram: this._renderMode === RENDER_NORMAL ? createProgramFFT2H() : null,
+                    fft2hProgram2: this._renderMode === RENDER_TWO_PASS ? createProgramFFT2H(2) : null,
+                    fft2hProgram4: this._renderMode === RENDER_TWO_PASS ? createProgramFFT2H(4) : null,
+                    fft2vProgram: this._renderMode === RENDER_NORMAL ? createProgramFFT2V() : null,
+                    fft2vProgram2: this._renderMode === RENDER_TWO_PASS ? createProgramFFT2V(2) : null,
+                    fft2vProgram4: this._renderMode === RENDER_TWO_PASS ? createProgramFFT2V(4) : null,
+                    postfft2Program: this._renderMode === RENDER_NORMAL ? createProgramPostFFT2() : null,
+                    postfft2Program2: this._renderMode === RENDER_TWO_PASS ? createProgramPostFFT2(2) : null,
+                    postfft2Program4: this._renderMode === RENDER_TWO_PASS ? createProgramPostFFT2(4) : null,
+                    waterProgram: createProgramOcean(impl)
+                },
+                quad: WaterMesh.createQuad(device),
+                noiseTextures: new Map(),
+                butterflyTextures: new Map()
+            };
+            this._params = defaultBuildParams;
+            const programs = WaterMesh._globals.programs;
+            this._h0BindGroup = device.createBindGroup(programs.h0Program.bindGroupLayouts[0]);
+            this._hkBindGroup = programs.hkProgram ? device.createBindGroup(WaterMesh._globals.programs.hkProgram.bindGroupLayouts[0]) : null;
+            this._hkBindGroup2 = programs.hkProgram2 ? device.createBindGroup(WaterMesh._globals.programs.hkProgram2.bindGroupLayouts[0]) : null;
+            this._hkBindGroup4 = programs.hkProgram4 ? device.createBindGroup(WaterMesh._globals.programs.hkProgram4.bindGroupLayouts[0]) : null;
+            this._fft2hBindGroup = programs.fft2hProgram ? device.createBindGroup(WaterMesh._globals.programs.fft2hProgram.bindGroupLayouts[0]) : null;
+            this._fft2hBindGroup2 = programs.fft2hProgram2 ? device.createBindGroup(WaterMesh._globals.programs.fft2hProgram2.bindGroupLayouts[0]) : null;
+            this._fft2hBindGroup4 = programs.fft2hProgram4 ? device.createBindGroup(WaterMesh._globals.programs.fft2hProgram4.bindGroupLayouts[0]) : null;
+            this._fft2vBindGroup = programs.fft2vProgram ? device.createBindGroup(WaterMesh._globals.programs.fft2vProgram.bindGroupLayouts[0]) : null;
+            this._fft2vBindGroup2 = programs.fft2vProgram2 ? device.createBindGroup(WaterMesh._globals.programs.fft2vProgram2.bindGroupLayouts[0]) : null;
+            this._fft2vBindGroup4 = programs.fft2vProgram4 ? device.createBindGroup(WaterMesh._globals.programs.fft2vProgram4.bindGroupLayouts[0]) : null;
+            this._postfft2BindGroup = programs.postfft2Program ? device.createBindGroup(WaterMesh._globals.programs.postfft2Program.bindGroupLayouts[0]) : null;
+            this._postfft2BindGroup2 = programs.postfft2Program2 ? device.createBindGroup(WaterMesh._globals.programs.postfft2Program2.bindGroupLayouts[0]) : null;
+            this._postfft2BindGroup4 = programs.postfft2Program4 ? device.createBindGroup(WaterMesh._globals.programs.postfft2Program4.bindGroupLayouts[0]) : null;
+            this._waterBindGroup = device.createBindGroup(WaterMesh._globals.programs.waterProgram.bindGroupLayouts[0]);
+            this._instanceData = null;
+            this._ifftTextures = null;
+            this._wireframe = false;
+            this._gridScale = 1;
+            this._level = 0;
+            this._regionMin = new Vector2(-99999, -99999);
+            this._regionMax = new Vector2(99999, 99999);
+            this._sizes = new Vector4();
+            this._tileSize = 32;
+            this._croppinesses = new Vector4();
+            this._cascades = [
+                new Vector4(),
+                new Vector4(),
+                new Vector4(),
+                new Vector4()
+            ];
+            this._nearestRepeatSampler = Application.instance.device.createSampler({
+                minFilter: 'nearest',
+                magFilter: 'nearest',
+                mipFilter: 'none',
+                addressU: 'repeat',
+                addressV: 'repeat'
+            });
+            this._linearRepeatSampler = Application.instance.device.createSampler({
+                minFilter: 'linear',
+                magFilter: 'linear',
+                mipFilter: 'none',
+                addressU: 'repeat',
+                addressV: 'repeat'
+            });
+            this._updateRenderStates = Application.instance.device.createRenderStateSet();
+            this._updateRenderStates.useRasterizerState().setCullMode('none');
+            this._updateRenderStates.useDepthState().enableTest(false).enableWrite(false);
+            this._waterRenderStates = Application.instance.device.createRenderStateSet();
+            this._waterRenderStates.useRasterizerState().setCullMode('none');
+            this._waterRenderStates.useDepthState().enableTest(true).enableWrite(true).setCompareFunc('le');
+            this._clipmap = new Clipmap(this._tileSize);
+            this._aabbExtents = new Vector2();
+            this._paramsChanged = true;
+            this._resolutionChanged = true;
+            this._updateFrameStamp = -1;
+        // this._impl = impl;
+        }
+    }
+    get params() {
+        return this._params;
+    }
+    paramsChanged() {
+        this._paramsChanged = true;
+    }
+    /*
+  private resolutionChanged() {
+    this._resolutionChanged = true;
+    this._paramsChanged = true;
+  }
+  */ get alignment() {
+        return this._params.alignment;
+    }
+    set alignment(val) {
+        if (this._params.alignment !== val) {
+            this._params.alignment = val;
+            this.paramsChanged();
+        }
+    }
+    get wind() {
+        return this._params.wind;
+    }
+    set wind(val) {
+        if (val !== this._params.wind && (val.x !== this._params.wind.x || val.y !== this._params.wind.y)) {
+            this._params.wind.x = val.x;
+            this._params.wind.y = val.y;
+            this.paramsChanged();
+        }
+    }
+    get foamWidth() {
+        return this._params.foamParams.x;
+    }
+    set foamWidth(val) {
+        this._params.foamParams.x = val;
+    }
+    get foamContrast() {
+        return this._params.foamParams.y;
+    }
+    set foamContrast(val) {
+        this._params.foamParams.y = val;
+    }
+    getWaveLength(cascade) {
+        return this._params.cascades[cascade].size;
+    }
+    setWaveLength(cascade, size) {
+        if (this._params.cascades[cascade].size !== size) {
+            this._params.cascades[cascade].size = size;
+            this.paramsChanged();
+        }
+    }
+    getWaveStrength(cascade) {
+        return this._params.cascades[cascade].strength;
+    }
+    setWaveStrength(cascade, strength) {
+        if (this._params.cascades[cascade].strength !== strength) {
+            this._params.cascades[cascade].strength = strength;
+            this.paramsChanged();
+        }
+    }
+    getWaveCroppiness(cascade) {
+        return this._params.cascades[cascade].croppiness;
+    }
+    setWaveCroppiness(cascade, croppiness) {
+        if (this._params.cascades[cascade].croppiness !== croppiness) {
+            this._params.cascades[cascade].croppiness = croppiness;
+            this.paramsChanged();
+        }
+    }
+    get bindGroup() {
+        return this._waterBindGroup;
+    }
+    get level() {
+        return this._level;
+    }
+    set level(val) {
+        this._level = val;
+    }
+    get wireframe() {
+        return this._wireframe;
+    }
+    set wireframe(val) {
+        this._wireframe = val;
+    }
+    get gridScale() {
+        return this._gridScale;
+    }
+    set gridScale(val) {
+        this._gridScale = val;
+    }
+    get tileSize() {
+        return this._tileSize;
+    }
+    set tileSize(val) {
+        if (val !== this._tileSize) {
+            this._tileSize = val;
+            if (!this._clipmap) {
+                this._clipmap = new Clipmap(this._tileSize);
+            } else {
+                this._clipmap.tileResolution = this._tileSize;
+            }
+        }
+    }
+    get regionMin() {
+        return this._regionMin;
+    }
+    set regionMin(val) {
+        this._regionMin.set(val);
+    }
+    get regionMax() {
+        return this._regionMax;
+    }
+    set regionMax(val) {
+        this._regionMax.set(val);
+    }
+    render(camera, flip) {
+        if (this._renderMode === RENDER_NONE) {
+            return;
+        }
+        const device = Application.instance.device;
+        device.pushDeviceStates();
+        {
+            this._updateFrameStamp = device.frameInfo.frameCounter;
+            this.update(device, device.frameInfo.elapsedOverall * 0.001);
+        }
+        device.popDeviceStates();
+        const cameraPos = camera.getWorldPosition();
+        const instanceData = this.getInstanceData();
+        device.setProgram(WaterMesh._globals.programs.waterProgram);
+        device.setBindGroup(0, this._waterBindGroup);
+        device.setRenderStates(this._waterRenderStates);
+        const sampler = this._linearRepeatSampler;
+        this._waterBindGroup.setTexture('dx_hy_dz_dxdz0', instanceData.dataTextures[0], sampler);
+        this._waterBindGroup.setTexture('sx_sz_dxdx_dzdz0', instanceData.dataTextures[1], sampler);
+        this._waterBindGroup.setTexture('dx_hy_dz_dxdz1', instanceData.dataTextures[2], sampler);
+        this._waterBindGroup.setTexture('sx_sz_dxdx_dzdz1', instanceData.dataTextures[3], this._linearRepeatSampler);
+        this._waterBindGroup.setTexture('dx_hy_dz_dxdz2', instanceData.dataTextures[4], this._linearRepeatSampler);
+        this._waterBindGroup.setTexture('sx_sz_dxdx_dzdz2', instanceData.dataTextures[5], this._linearRepeatSampler);
+        this._waterBindGroup.setValue('foamParams', this._params.foamParams);
+        this._waterBindGroup.setValue('sizes', this._sizes);
+        this._waterBindGroup.setValue('regionMin', this._regionMin);
+        this._waterBindGroup.setValue('regionMax', this._regionMax);
+        this._waterBindGroup.setValue('croppinesses', this._croppinesses);
+        this._waterBindGroup.setValue('viewProjMatrix', camera.viewProjectionMatrix);
+        this._waterBindGroup.setValue('level', this._level);
+        this._waterBindGroup.setValue('pos', cameraPos);
+        this._waterBindGroup.setValue('scale', 1);
+        this._waterBindGroup.setValue('flip', flip ? 1 : 0);
+        const that = this;
+        const position = new Vector3(cameraPos.x, cameraPos.z, 0);
+        const distX = Math.max(Math.abs(position.x - this._regionMin.x), Math.abs(position.x - this._regionMax.x));
+        const distY = Math.max(Math.abs(position.y - this._regionMin.y), Math.abs(position.y - this._regionMax.y));
+        const maxDist = Math.min(Math.max(distX, distY), camera.getFarPlane());
+        const gridScale = Math.max(0.01, this._gridScale);
+        const mipLevels = Math.ceil(Math.log2(maxDist / (this._tileSize * gridScale))) + 1;
+        const disturb = Math.max(this.wind.x, this.wind.y, 2);
+        this._aabbExtents.setXY(disturb * 2, disturb * 8 + this._level);
+        this._clipmap.draw({
+            camera,
+            position,
+            minWorldPos: this._regionMin,
+            maxWorldPos: this._regionMax,
+            gridScale: gridScale,
+            AABBExtents: this._aabbExtents,
+            drawPrimitive (prim, modelMatrix, offset, scale, gridScale) {
+                that._waterBindGroup.setValue('modelMatrix', modelMatrix);
+                that._waterBindGroup.setValue('offset', offset);
+                that._waterBindGroup.setValue('scale', scale);
+                that._waterBindGroup.setValue('gridScale', gridScale);
+                prim.primitiveType = that._wireframe ? 'line-strip' : 'triangle-list';
+                prim.draw();
+            }
+        }, mipLevels);
+    }
+    update(device, time) {
+        device.setRenderStates(this._updateRenderStates);
+        if (this._resolutionChanged) {
+            this.disposeInstanceData();
+        }
+        if (this._paramsChanged) {
+            this.generateInitialSpectrum();
+        }
+        this._resolutionChanged = false;
+        this._paramsChanged = false;
+        for(let i = 0; i < 3; i++){
+            this._sizes[i] = this._params.cascades[i].size;
+            this._croppinesses[i] = this._params.cascades[i].croppiness;
+        }
+        if (this._renderMode === RENDER_NORMAL) {
+            this.generateSpectrum(time);
+            this.ifft2();
+            this.postIfft2();
+        } else {
+            this.generateSpectrumTwoPass(time);
+            this.ifft2TwoPass();
+            this.postIfft2TwoPass();
+        }
+    }
+    disposeInstanceData() {
+        if (this._instanceData) {
+            this._instanceData.dataTextures.forEach((tex)=>tex.dispose());
+            this._instanceData.dataTextures = null;
+            this._instanceData.h0Textures.forEach((tex)=>tex.dispose());
+            this._instanceData.h0Textures = null;
+            this._instanceData.pingpongTextures.forEach((tex)=>tex.dispose());
+            this._instanceData.pingpongTextures = null;
+            this._instanceData.spectrumTextures.forEach((tex)=>tex.dispose());
+            this._instanceData.spectrumTextures = null;
+            this._instanceData.h0Framebuffer.dispose();
+            this._instanceData.pingpongFramebuffer?.dispose();
+            this._instanceData.pingpongFramebuffer2?.dispose();
+            this._instanceData.pingpongFramebuffer4?.dispose();
+            this._instanceData.spectrumFramebuffer?.dispose();
+            this._instanceData.spectrumFramebuffer2?.dispose();
+            this._instanceData.spectrumFramebuffer4?.dispose();
+            this._instanceData.postIfft2Framebuffer?.dispose();
+            this._instanceData.postIfft2Framebuffer2?.dispose();
+            this._instanceData.postIfft2Framebuffer4?.dispose();
+            this._instanceData = null;
+        }
+    }
+    generateSpectrum(time) {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        device.setProgram(WaterMesh._globals.programs.hkProgram);
+        device.setBindGroup(0, this._hkBindGroup);
+        this._hkBindGroup.setValue('resolution', this._params.resolution);
+        this._hkBindGroup.setValue('sizes', this._sizes);
+        this._hkBindGroup.setTexture('h0Texture0', instanceData.h0Textures[0], this._nearestRepeatSampler);
+        this._hkBindGroup.setTexture('h0Texture1', instanceData.h0Textures[1], this._nearestRepeatSampler);
+        this._hkBindGroup.setTexture('h0Texture2', instanceData.h0Textures[2], this._nearestRepeatSampler);
+        this._hkBindGroup.setValue('t', time);
+        if (device.type === 'webgl') {
+            this._hkBindGroup.setValue('h0TexSize', new Vector2(instanceData.h0Textures[0].width, instanceData.h0Textures[0].height));
+        }
+        device.setFramebuffer(instanceData.spectrumFramebuffer);
+        WaterMesh._globals.quad.draw();
+    }
+    generateSpectrumTwoPass(time) {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        device.setProgram(WaterMesh._globals.programs.hkProgram4);
+        device.setBindGroup(0, this._hkBindGroup4);
+        this._hkBindGroup4.setValue('resolution', this._params.resolution);
+        this._hkBindGroup4.setValue('sizes', this._sizes);
+        this._hkBindGroup4.setTexture('h0Texture0', instanceData.h0Textures[0], this._nearestRepeatSampler);
+        this._hkBindGroup4.setTexture('h0Texture1', instanceData.h0Textures[1], this._nearestRepeatSampler);
+        this._hkBindGroup4.setValue('t', time);
+        if (device.type === 'webgl') {
+            this._hkBindGroup4.setValue('h0TexSize', new Vector2(instanceData.h0Textures[0].width, instanceData.h0Textures[0].height));
+        }
+        device.setFramebuffer(instanceData.spectrumFramebuffer4);
+        WaterMesh._globals.quad.draw();
+        device.setProgram(WaterMesh._globals.programs.hkProgram2);
+        device.setBindGroup(0, this._hkBindGroup2);
+        this._hkBindGroup2.setValue('resolution', this._params.resolution);
+        this._hkBindGroup2.setValue('sizes', this._sizes);
+        this._hkBindGroup2.setTexture('h0Texture2', instanceData.h0Textures[2], this._nearestRepeatSampler);
+        this._hkBindGroup2.setValue('t', time);
+        if (device.type === 'webgl') {
+            this._hkBindGroup2.setValue('h0TexSize', new Vector2(instanceData.h0Textures[0].width, instanceData.h0Textures[0].height));
+        }
+        device.setFramebuffer(instanceData.spectrumFramebuffer2);
+        WaterMesh._globals.quad.draw();
+    }
+    ifft2() {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        const phases = Math.log2(this._params.resolution);
+        const pingPongTextures = [
+            instanceData.spectrumTextures,
+            instanceData.pingpongTextures
+        ];
+        const pingPongFramebuffers = [
+            instanceData.pingpongFramebuffer,
+            instanceData.spectrumFramebuffer
+        ];
+        const butterflyTex = this.getButterflyTexture(this._params.resolution);
+        // horizontal ifft
+        let pingPong = 0;
+        device.setProgram(WaterMesh._globals.programs.fft2hProgram);
+        device.setBindGroup(0, this._fft2hBindGroup);
+        this._fft2hBindGroup.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+        for(let phase = 0; phase < phases; phase++){
+            device.setFramebuffer(pingPongFramebuffers[pingPong]);
+            this._fft2hBindGroup.setValue('phase', phase);
+            this._fft2hBindGroup.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            this._fft2hBindGroup.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            this._fft2hBindGroup.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            this._fft2hBindGroup.setTexture('spectrum3', pingPongTextures[pingPong][3], this._nearestRepeatSampler);
+            this._fft2hBindGroup.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            this._fft2hBindGroup.setTexture('spectrum5', pingPongTextures[pingPong][5], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2hBindGroup.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            pingPong = (pingPong + 1) % 2;
+        }
+        // vertical ifft
+        device.setProgram(WaterMesh._globals.programs.fft2vProgram);
+        device.setBindGroup(0, this._fft2vBindGroup);
+        this._fft2vBindGroup.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+        for(let phase = 0; phase < phases; phase++){
+            device.setFramebuffer(pingPongFramebuffers[pingPong]);
+            this._fft2vBindGroup.setValue('phase', phase);
+            this._fft2vBindGroup.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            this._fft2vBindGroup.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            this._fft2vBindGroup.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            this._fft2vBindGroup.setTexture('spectrum3', pingPongTextures[pingPong][3], this._nearestRepeatSampler);
+            this._fft2vBindGroup.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            this._fft2vBindGroup.setTexture('spectrum5', pingPongTextures[pingPong][5], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2vBindGroup.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            pingPong = (pingPong + 1) % 2;
+        }
+        this._ifftTextures = pingPongTextures[pingPong];
+    }
+    ifft2TwoPass() {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        const phases = Math.log2(this._params.resolution);
+        const pingPongTextures = [
+            instanceData.spectrumTextures,
+            instanceData.pingpongTextures
+        ];
+        const pingPongFramebuffers4 = [
+            instanceData.pingpongFramebuffer4,
+            instanceData.spectrumFramebuffer4
+        ];
+        const pingPongFramebuffers2 = [
+            instanceData.pingpongFramebuffer2,
+            instanceData.spectrumFramebuffer2
+        ];
+        const butterflyTex = this.getButterflyTexture(this._params.resolution);
+        // horizontal ifft
+        let pingPong = 0;
+        for(let phase = 0; phase < phases; phase++){
+            device.setFramebuffer(pingPongFramebuffers4[pingPong]);
+            device.setProgram(WaterMesh._globals.programs.fft2hProgram4);
+            device.setBindGroup(0, this._fft2hBindGroup4);
+            this._fft2hBindGroup4.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            this._fft2hBindGroup4.setValue('phase', phase);
+            this._fft2hBindGroup4.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            this._fft2hBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            this._fft2hBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            this._fft2hBindGroup4.setTexture('spectrum3', pingPongTextures[pingPong][3], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2hBindGroup4.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            device.setFramebuffer(pingPongFramebuffers2[pingPong]);
+            device.setProgram(WaterMesh._globals.programs.fft2hProgram2);
+            device.setBindGroup(0, this._fft2hBindGroup2);
+            this._fft2hBindGroup2.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            this._fft2hBindGroup2.setValue('phase', phase);
+            this._fft2hBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            this._fft2hBindGroup2.setTexture('spectrum5', pingPongTextures[pingPong][5], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2hBindGroup2.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            pingPong = (pingPong + 1) % 2;
+        }
+        // vertical ifft
+        for(let phase = 0; phase < phases; phase++){
+            device.setFramebuffer(pingPongFramebuffers4[pingPong]);
+            device.setProgram(WaterMesh._globals.programs.fft2vProgram4);
+            device.setBindGroup(0, this._fft2vBindGroup4);
+            this._fft2vBindGroup4.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            this._fft2vBindGroup4.setValue('phase', phase);
+            this._fft2vBindGroup4.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            this._fft2vBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            this._fft2vBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            this._fft2vBindGroup4.setTexture('spectrum3', pingPongTextures[pingPong][3], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2vBindGroup4.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            device.setFramebuffer(pingPongFramebuffers2[pingPong]);
+            device.setProgram(WaterMesh._globals.programs.fft2vProgram2);
+            device.setBindGroup(0, this._fft2vBindGroup2);
+            this._fft2vBindGroup2.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            this._fft2vBindGroup2.setValue('phase', phase);
+            this._fft2vBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            this._fft2vBindGroup2.setTexture('spectrum5', pingPongTextures[pingPong][5], this._nearestRepeatSampler);
+            if (device.type === 'webgl') {
+                this._fft2vBindGroup2.setValue('texSize', new Vector4(pingPongTextures[pingPong][0].width, pingPongTextures[pingPong][0].height, butterflyTex.width, butterflyTex.height));
+            }
+            WaterMesh._globals.quad.draw();
+            pingPong = (pingPong + 1) % 2;
+        }
+        this._ifftTextures = pingPongTextures[pingPong];
+    }
+    postIfft2() {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        device.setFramebuffer(instanceData.postIfft2Framebuffer);
+        device.setProgram(WaterMesh._globals.programs.postfft2Program);
+        device.setBindGroup(0, this._postfft2BindGroup);
+        this._postfft2BindGroup.setValue('N2', this._params.resolution * this._params.resolution);
+        this._postfft2BindGroup.setTexture('ifft0', this._ifftTextures[0], this._nearestRepeatSampler);
+        this._postfft2BindGroup.setTexture('ifft1', this._ifftTextures[1], this._nearestRepeatSampler);
+        this._postfft2BindGroup.setTexture('ifft2', this._ifftTextures[2], this._nearestRepeatSampler);
+        this._postfft2BindGroup.setTexture('ifft3', this._ifftTextures[3], this._nearestRepeatSampler);
+        this._postfft2BindGroup.setTexture('ifft4', this._ifftTextures[4], this._nearestRepeatSampler);
+        this._postfft2BindGroup.setTexture('ifft5', this._ifftTextures[5], this._nearestRepeatSampler);
+        if (device.type === 'webgl') {
+            this._postfft2BindGroup.setValue('ifftTexSize', new Vector2(this._ifftTextures[0].width, this._ifftTextures[0].height));
+        }
+        WaterMesh._globals.quad.draw();
+    }
+    postIfft2TwoPass() {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        device.setFramebuffer(instanceData.postIfft2Framebuffer4);
+        device.setProgram(WaterMesh._globals.programs.postfft2Program4);
+        device.setBindGroup(0, this._postfft2BindGroup4);
+        this._postfft2BindGroup4.setValue('N2', this._params.resolution * this._params.resolution);
+        this._postfft2BindGroup4.setTexture('ifft0', this._ifftTextures[0], this._nearestRepeatSampler);
+        this._postfft2BindGroup4.setTexture('ifft1', this._ifftTextures[1], this._nearestRepeatSampler);
+        this._postfft2BindGroup4.setTexture('ifft2', this._ifftTextures[2], this._nearestRepeatSampler);
+        this._postfft2BindGroup4.setTexture('ifft3', this._ifftTextures[3], this._nearestRepeatSampler);
+        if (device.type === 'webgl') {
+            this._postfft2BindGroup4.setValue('ifftTexSize', new Vector2(this._ifftTextures[0].width, this._ifftTextures[0].height));
+        }
+        WaterMesh._globals.quad.draw();
+        device.setFramebuffer(instanceData.postIfft2Framebuffer2);
+        device.setProgram(WaterMesh._globals.programs.postfft2Program2);
+        device.setBindGroup(0, this._postfft2BindGroup2);
+        this._postfft2BindGroup2.setValue('N2', this._params.resolution * this._params.resolution);
+        this._postfft2BindGroup2.setTexture('ifft4', this._ifftTextures[4], this._nearestRepeatSampler);
+        this._postfft2BindGroup2.setTexture('ifft5', this._ifftTextures[5], this._nearestRepeatSampler);
+        if (device.type === 'webgl') {
+            this._postfft2BindGroup2.setValue('ifftTexSize', new Vector2(this._ifftTextures[0].width, this._ifftTextures[0].height));
+        }
+        WaterMesh._globals.quad.draw();
+    }
+    createNTextures(device, format, size, num, name, linear) {
+        return Array.from({
+            length: num
+        }).map((val, index)=>{
+            const tex = device.createTexture2D(format, size, size, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            tex.name = `${name}-${index}`;
+            tex.samplerOptions = {
+                minFilter: linear ? 'linear' : 'nearest',
+                magFilter: linear ? 'linear' : 'nearest',
+                mipFilter: 'none',
+                addressU: 'repeat',
+                addressV: 'repeat'
+            };
+            return tex;
+        });
+    }
+    getInstanceData() {
+        if (!this._instanceData) {
+            const device = Application.instance.device;
+            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 spectrumTextures = this.createNTextures(device, this._textureFormat, this._params.resolution, 6, 'Water-spectrum', false);
+            const pingpongTextures = this.createNTextures(device, this._textureFormat, this._params.resolution, 6, 'Water-pingpong', false);
+            this._instanceData = {
+                dataTextures,
+                h0Textures: h0Textures,
+                pingpongTextures: pingpongTextures,
+                spectrumTextures: spectrumTextures,
+                h0Framebuffer: device.createFrameBuffer(h0Textures, null),
+                spectrumFramebuffer: this._renderMode === RENDER_NORMAL ? device.createFrameBuffer(spectrumTextures, null) : null,
+                spectrumFramebuffer2: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(spectrumTextures.slice(4, 6), null) : null,
+                spectrumFramebuffer4: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(spectrumTextures.slice(0, 4), null) : null,
+                pingpongFramebuffer: device.createFrameBuffer(pingpongTextures, null),
+                pingpongFramebuffer2: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(pingpongTextures.slice(4, 6), null) : null,
+                pingpongFramebuffer4: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(pingpongTextures.slice(0, 4), null) : null,
+                postIfft2Framebuffer: device.createFrameBuffer(dataTextures, null),
+                postIfft2Framebuffer2: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(dataTextures.slice(4, 6), null) : null,
+                postIfft2Framebuffer4: this._renderMode === RENDER_TWO_PASS ? device.createFrameBuffer(dataTextures.slice(0, 4), null) : null
+            };
+        }
+        return this._instanceData;
+    }
+    static createQuad(device) {
+        const vertexData = new Float32Array([
+            -1,
+            -1,
+            0,
+            0.0,
+            0.0,
+            1,
+            -1,
+            0,
+            1.0,
+            0.0,
+            1,
+            1,
+            0,
+            1.0,
+            1.0,
+            -1,
+            1,
+            0,
+            0.0,
+            1.0
+        ]);
+        const indexData = new Uint32Array([
+            0,
+            1,
+            2,
+            0,
+            2,
+            3
+        ]);
+        const prim = new Primitive();
+        const vb = device.createInterleavedVertexBuffer([
+            'position_f32x3',
+            'tex0_f32x2'
+        ], vertexData);
+        const ib = device.createIndexBuffer(indexData);
+        prim.setVertexBuffer(vb);
+        prim.setIndexBuffer(ib);
+        prim.primitiveType = 'triangle-list';
+        prim.indexStart = 0;
+        prim.indexCount = ib.length;
+        return prim;
+    }
+    getButterflyTexture(size) {
+        const device = Application.instance.device;
+        let tex = WaterMesh._globals.butterflyTextures.get(size);
+        if (!tex) {
+            tex = device.createTexture2D('rgba32f', Math.log2(size), size, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            tex.name = `butterfly${size}`;
+            tex.update(this.createButterflyTexture(size), 0, 0, tex.width, tex.height);
+            WaterMesh._globals.butterflyTextures.set(size, tex);
+        }
+        return tex;
+    }
+    generateInitialSpectrum() {
+        const device = Application.instance.device;
+        const instanceData = this.getInstanceData();
+        device.setFramebuffer(instanceData.h0Framebuffer);
+        device.clearFrameBuffer(Vector4.zero(), null, null);
+        device.setProgram(WaterMesh._globals.programs.h0Program);
+        device.setBindGroup(0, this._h0BindGroup);
+        this._h0BindGroup.setTexture('noise', this.getNoiseTexture(this._params.resolution, this._params.randomSeed), this._nearestRepeatSampler);
+        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;
+        }
+        this._h0BindGroup.setValue('cascade0', this._cascades[0]);
+        this._h0BindGroup.setValue('cascade1', this._cascades[1]);
+        this._h0BindGroup.setValue('cascade2', this._cascades[2]);
+        WaterMesh._globals.quad.draw();
+    }
+    getNoiseTexture(size, randomSeed) {
+        const device = Application.instance.device;
+        let tex = WaterMesh._globals.noiseTextures.get(size);
+        if (!tex) {
+            tex = device.createTexture2D(device.type === 'webgl' ? 'rgba32f' : 'rg32f', size, size, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            tex.name = `noiseTex${size}`;
+            tex.update(this.getNoise2d(size, randomSeed, device.type === 'webgl'), 0, 0, size, size);
+            WaterMesh._globals.noiseTextures.set(size, tex);
+        }
+        return tex;
+    }
+    getNoise2d(size, randomSeed, rgba) {
+        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()));
+        }
+    }
+    reverseBits(v, width) {
+        return parseInt(v.toString(2).padStart(width, '0').split('').reverse().join(''), 2);
+    }
+    createButterflyTexture(size) {
+        const width = Math.log2(size);
+        const height = size;
+        const texture = new Float32Array(width * height * 4);
+        const w = 2.0 * Math.PI / size;
+        const bitReversed = [
+            ...Array(size).keys()
+        ].map((v)=>this.reverseBits(v, width));
+        for(let j = 0; j < width; j++){
+            for(let i = 0; i < height; i++){
+                const k = i * (size >> j + 1);
+                const c = Math.cos(k * w);
+                const s = Math.sin(k * w);
+                const span = 2 ** j;
+                const wing = i % 2 ** (j + 1) < span ? 0 : 1; // 0 - top wing, 1 - bottom wing
+                const texel = new Vector4();
+                if (j === 0) {
+                    if (wing === 0) {
+                        texel.setXYZW(c, s, bitReversed[i], bitReversed[i + 1]);
+                    } else {
+                        texel.setXYZW(c, s, bitReversed[i - 1], bitReversed[i]);
+                    }
+                } else {
+                    if (wing === 0) {
+                        texel.setXYZW(c, s, i, i + span);
+                    } else {
+                        texel.setXYZW(c, s, i - span, i);
+                    }
+                }
+                texture[(width * i + j) * 4] = texel[0];
+                texture[(width * i + j) * 4 + 1] = texel[1];
+                texture[(width * i + j) * 4 + 2] = texel[2];
+                texture[(width * i + j) * 4 + 3] = texel[3];
+            }
+        }
+        return texture;
+    }
+}
+
+export { WaterMesh, defaultBuildParams };
+//# sourceMappingURL=watermesh.js.map