@zephyr3d/scene 0.3.0 → 0.4.0

package/dist/render/renderpass.js

@@ -1,17 +1,8 @@
 import { Vector4 } from '@zephyr3d/base';
 import { CullVisitor } from './cull_visitor.js';
-import { ShaderHelper } from '../material/shader/helper.js';
-import '../material/lambert.js';
-import '../material/blinn.js';
-import '../material/unlit.js';
-import { Material } from '../material/material.js';
-import '../material/meshmaterial.js';
-import '../material/grassmaterial.js';
-import '../material/terrainmaterial.js';
-import '../material/pbrmr.js';
-import '../material/pbrsg.js';
 import { Application } from '../app.js';
 import { RenderQueue } from './render_queue.js';
+import { ShaderHelper } from '../material/shader/helper.js';
 
 /**
  * Base class for any kind of render passes
@@ -55,8 +46,8 @@ import { RenderQueue } from './render_queue.js';
    */ get type() {
         return this._type;
     }
-    /** @internal */ isAutoFlip() {
-        return !!(Application.instance.device.getFramebuffer() && Application.instance.device.type === 'webgpu');
+    /** @internal */ isAutoFlip(ctx) {
+        return !!(ctx.device.getFramebuffer() && ctx.device.type === 'webgpu');
     }
     /**
    * Renders a scene
@@ -65,15 +56,11 @@ import { RenderQueue } from './render_queue.js';
         ctx.renderPass = this;
         this.drawScene(ctx, cullCamera ?? ctx.camera, renderQueue);
     }
-    /** @internal */ applyRenderStates(device, stateSet, ctx) {
-        device.setRenderStates(stateSet);
-    }
-    /** @internal */ getGlobalBindGroupInfo(ctx) {
+    /** @internal */ getGlobalBindGroup(ctx) {
         const hash = this.getGlobalBindGroupHash(ctx);
         let bindGroup = this._globalBindGroups[hash];
         if (!bindGroup) {
-            //const programBuilder = new ProgramBuilder(Application.instance.device);
-            const ret = Application.instance.device.programBuilder.buildRender({
+            const ret = ctx.device.programBuilder.buildRender({
                 vertex (pb) {
                     ShaderHelper.prepareVertexShader(pb, ctx);
                     pb.main(function() {});
@@ -83,37 +70,31 @@ import { RenderQueue } from './render_queue.js';
                     pb.main(function() {});
                 }
             });
-            bindGroup = {
-                bindGroup: Application.instance.device.createBindGroup(ret[2][0]),
-                layout: ret[2][0]
-            };
+            bindGroup = ctx.device.createBindGroup(ret[2][0]);
             this._globalBindGroups[hash] = bindGroup;
         }
-        if (bindGroup.bindGroup.disposed) {
-            bindGroup.bindGroup.reload();
-        }
         return bindGroup;
     }
     /**
    * Disposes the render pass
    */ dispose() {
-        for(const k in this._globalBindGroups){
-            Material.bindGroupGarbageCollect(this._globalBindGroups[k].bindGroup);
-        }
         this._globalBindGroups = {};
     }
     /** @internal */ getGlobalBindGroupHash(ctx) {
         return `${this.constructor.name}:${this._getGlobalBindGroupHash(ctx)}`;
     }
     /** @internal */ drawScene(ctx, cullCamera, renderQueue) {
-        const device = Application.instance.device;
+        const device = ctx.device;
         this.clearFramebuffer();
-        renderQueue = renderQueue ?? this.cullScene(ctx, cullCamera);
-        if (renderQueue) {
+        const rq = renderQueue ?? this.cullScene(ctx, cullCamera);
+        if (rq) {
             const windingReversed = device.isWindingOrderReversed();
-            device.reverseVertexWindingOrder(this.isAutoFlip() ? !windingReversed : windingReversed);
-            this.renderItems(ctx, renderQueue);
+            device.reverseVertexWindingOrder(this.isAutoFlip(ctx) ? !windingReversed : windingReversed);
+            this.renderItems(ctx, rq);
             device.reverseVertexWindingOrder(windingReversed);
+            if (rq !== renderQueue) {
+                rq.dispose();
+            }
         }
     }
     /**
@@ -130,7 +111,7 @@ import { RenderQueue } from './render_queue.js';
             } else {
                 ctx.scene.rootNode.traverse(cullVisitor);
             }
-            return renderQueue;
+            return renderQueue.end(cullCamera);
         }
         return null;
     }
@@ -144,6 +125,83 @@ import { RenderQueue } from './render_queue.js';
             device.reverseVertexWindingOrder(!device.isWindingOrderReversed());
         }
     }
+    /** @internal */ internalDrawItemList(ctx, items, renderBundle, reverseWinding, hash) {
+        if (renderBundle && ctx.primaryCamera.commandBufferReuse) {
+            const bundle = renderBundle.getRenderBundle(hash);
+            if (bundle) {
+                ctx.device.executeRenderBundle(bundle);
+                return;
+            }
+            renderBundle.beginRenderBundle();
+        }
+        for (const item of items){
+            ctx.instanceData = item.instanceData;
+            const reverse = reverseWinding !== item.drawable.getXForm().worldMatrixDet < 0;
+            if (reverse) {
+                ctx.device.reverseVertexWindingOrder(!ctx.device.isWindingOrderReversed());
+            }
+            item.drawable.draw(ctx);
+            if (reverse) {
+                ctx.device.reverseVertexWindingOrder(!ctx.device.isWindingOrderReversed());
+            }
+        }
+        if (renderBundle && ctx.primaryCamera.commandBufferReuse) {
+            renderBundle.endRenderBundle(hash);
+        }
+    }
+    /** @internal */ drawItemList(itemList, ctx, reverseWinding) {
+        ctx.renderQueue = itemList.renderQueue;
+        ctx.instanceData = null;
+        const windingHash = reverseWinding ? '1' : '0';
+        const bindGroupHash = ctx.device.getBindGroup(0)[0].getGPUId();
+        const framebufferHash = ctx.device.getFramebuffer()?.getHash() ?? '';
+        const hash = `${windingHash}-${bindGroupHash}-${framebufferHash}-${ctx.renderPassHash}`;
+        if (itemList) {
+            if (itemList.itemList.length > 0) {
+                ctx.skinAnimation = false;
+                ctx.instancing = false;
+                itemList.materialList.forEach((mat)=>mat.apply(ctx));
+                this.internalDrawItemList(ctx, itemList.itemList, itemList.renderBundle, reverseWinding, hash);
+            }
+            if (itemList.skinItemList.length > 0) {
+                ctx.skinAnimation = true;
+                ctx.instancing = false;
+                itemList.materialList.forEach((mat)=>mat.apply(ctx));
+                this.internalDrawItemList(ctx, itemList.skinItemList, itemList.skinRenderBundle, reverseWinding, hash);
+            /*
+        for (const item of itemList.skinItemList) {
+          ctx.instanceData = item.instanceData;
+          const reverse = reverseWinding !== item.drawable.getXForm().worldMatrixDet < 0;
+          if (reverse) {
+            device.reverseVertexWindingOrder(!device.isWindingOrderReversed());
+          }
+          item.drawable.draw(ctx);
+          if (reverse) {
+            device.reverseVertexWindingOrder(!device.isWindingOrderReversed());
+          }
+        }
+        */ }
+            if (itemList.instanceItemList.length > 0) {
+                ctx.skinAnimation = false;
+                ctx.instancing = true;
+                itemList.materialList.forEach((mat)=>mat.apply(ctx));
+                this.internalDrawItemList(ctx, itemList.instanceItemList, itemList.instanceRenderBundle, reverseWinding, hash);
+            /*
+        for (const item of itemList.instanceItemList) {
+          ctx.instanceData = item.instanceData;
+          const reverse = reverseWinding !== item.drawable.getXForm().worldMatrixDet < 0;
+          if (reverse) {
+            device.reverseVertexWindingOrder(!device.isWindingOrderReversed());
+          }
+          item.drawable.draw(ctx);
+          if (reverse) {
+            device.reverseVertexWindingOrder(!device.isWindingOrderReversed());
+          }
+        }
+        */ }
+        }
+        ctx.renderQueue = null;
+    }
     /** @internal */ clearFramebuffer() {
         Application.instance.device.clearFrameBuffer(this._clearColor, this._clearDepth, this._clearStencil);
     }

package/dist/render/renderpass.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderpass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"renderpass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/render/shadowmap_pass.js

@@ -1,6 +1,5 @@
 import { RenderPass } from './renderpass.js';
 import { RENDER_PASS_TYPE_SHADOWMAP } from '../values.js';
-import { Application } from '../app.js';
 import { ShaderHelper } from '../material/shader/helper.js';
 
 /**
@@ -9,13 +8,11 @@ import { ShaderHelper } from '../material/shader/helper.js';
  * @public
  */ class ShadowMapPass extends RenderPass {
     /** @internal */ _currentLight;
-    /** @internal */ _stateOverriden;
     /**
    * Creates an instance of ShadowMapPass
    */ constructor(){
         super(RENDER_PASS_TYPE_SHADOWMAP);
         this._currentLight = null;
-        this._stateOverriden = null;
     }
     /** The light that will be used to render shadow map */ get light() {
         return this._currentLight;
@@ -23,43 +20,27 @@ import { ShaderHelper } from '../material/shader/helper.js';
     set light(light) {
         this._currentLight = light;
     }
-    /** @internal */ get stateOverriden() {
-        if (!this._stateOverriden) {
-            this._stateOverriden = Application.instance.device.createRenderStateSet();
-            this._stateOverriden.useRasterizerState().setCullMode('none');
-        }
-        return this._stateOverriden;
-    }
-    /** @internal */ applyRenderStates(device, stateSet, ctx) {
-        const stateOverriden = this.stateOverriden;
-        const state = stateOverriden.rasterizerState;
-        stateOverriden.copyFrom(stateSet);
-        stateOverriden.useRasterizerState(state);
-        device.setRenderStates(stateOverriden);
-    }
     /** @internal */ _getGlobalBindGroupHash(ctx) {
-        return ctx.shadowMapInfo.get(this.light).shaderHash;
+        return `sm:${ctx.shadowMapInfo.get(this.light).shaderHash}`;
     }
     /** @internal */ renderItems(ctx, renderQueue) {
-        ctx.target = null;
         ctx.drawEnvLight = false;
         ctx.env = null;
-        ctx.applyFog = false;
-        ctx.renderPassHash = null;
-        ctx.flip = this.isAutoFlip();
-        const device = Application.instance.device;
-        const bindGroup = this.getGlobalBindGroupInfo(ctx).bindGroup;
-        device.setBindGroup(0, bindGroup);
-        ShaderHelper.setLightUniformsShadowMap(bindGroup, ctx, this._currentLight);
-        ShaderHelper.setCameraUniforms(bindGroup, ctx, true);
+        ctx.applyFog = null;
+        ctx.flip = this.isAutoFlip(ctx);
         ctx.renderPassHash = this.getGlobalBindGroupHash(ctx);
+        const bindGroup = ctx.globalBindGroupAllocator.getGlobalBindGroup(ctx);
+        ctx.device.setBindGroup(0, bindGroup);
+        ShaderHelper.setLightUniformsShadowMap(bindGroup, ctx, this._currentLight);
+        ShaderHelper.setCameraUniforms(bindGroup, ctx.camera, ctx.flip, true);
         const reverseWinding = ctx.camera.worldMatrixDet < 0;
         for (const order of Object.keys(renderQueue.items).map((val)=>Number(val)).sort((a, b)=>a - b)){
             const renderItems = renderQueue.items[order];
-            for (const item of renderItems.opaqueList){
-                ctx.instanceData = item.instanceData;
-                ctx.target = item.drawable;
-                this.drawItem(device, item, ctx, reverseWinding);
+            for (const lit of renderItems.opaque.lit){
+                this.drawItemList(lit, ctx, reverseWinding);
+            }
+            for (const unlit of renderItems.opaque.unlit){
+                this.drawItemList(unlit, ctx, reverseWinding);
             }
         }
     }

package/dist/render/shadowmap_pass.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadowmap_pass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"shadowmap_pass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/render/sky.js

@@ -96,7 +96,7 @@ const defaultSkyWorldMatrix = Matrix4x4.identity();
         this._lastSunDir = Vector3.zero();
     }
     /** @internal */ getHash(ctx) {
-        return ctx.applyFog ? this._fogType === 'none' ? '0' : this.drawScatteredFog(ctx) ? '1' : '2' : '';
+        return ctx.applyFog === 'scatter' ? '1' : ctx.applyFog ? '2' : '0';
     }
     /** Which type of the sky should be rendered */ get skyType() {
         return this._skyType;
@@ -339,7 +339,7 @@ const defaultSkyWorldMatrix = Matrix4x4.identity();
     /** @internal */ renderFog(ctx) {
         const camera = ctx.camera;
         const sceneDepthTexture = ctx.linearDepthTexture;
-        const device = Application.instance.device;
+        const device = ctx.device;
         const savedRenderStates = device.getRenderStates();
         this._prepareSkyBox(device);
         const sunLight = ctx.sunLight;

package/dist/render/watermesh.js

@@ -44,15 +44,21 @@ const RENDER_TWO_PASS = 2;
     _hkBindGroup2;
     _hkBindGroup4;
     _fft2hBindGroup;
-    _fft2hBindGroup2;
-    _fft2hBindGroup4;
     _fft2vBindGroup;
-    _fft2vBindGroup2;
-    _fft2vBindGroup4;
+    _fft2hBindGroup2Used;
+    _fft2hBindGroup2Free;
+    _fft2hBindGroup4Used;
+    _fft2hBindGroup4Free;
+    _fft2vBindGroup2Used;
+    _fft2vBindGroup2Free;
+    _fft2vBindGroup4Used;
+    _fft2vBindGroup4Free;
     _postfft2BindGroup;
     _postfft2BindGroup2;
     _postfft2BindGroup4;
     _waterBindGroup;
+    _usedClipmapBindGroups;
+    _freeClipmapBindGroups;
     _nearestRepeatSampler;
     _linearRepeatSampler;
     _updateRenderStates;
@@ -78,7 +84,7 @@ const RENDER_TWO_PASS = 2;
     _dataTextureFormat;
     _renderMode;
     _updateFrameStamp;
-    // private _impl: WaterShaderImpl;
+    _waterProgram;
     constructor(device, impl){
         const renderTargetFloat32 = device.getDeviceCaps().textureCaps.supportFloatColorBuffer;
         const linearFloat32 = renderTargetFloat32 && device.getDeviceCaps().textureCaps.supportLinearFloatTexture;
@@ -126,13 +132,13 @@ const RENDER_TWO_PASS = 2;
                     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)
+                    postfft2Program4: this._renderMode === RENDER_TWO_PASS ? createProgramPostFFT2(4) : null
                 },
                 quad: WaterMesh.createQuad(device),
                 noiseTextures: new Map(),
                 butterflyTextures: new Map()
             };
+            this._waterProgram = createProgramOcean(impl);
             this._params = defaultBuildParams;
             const programs = WaterMesh._globals.programs;
             this._h0BindGroup = device.createBindGroup(programs.h0Program.bindGroupLayouts[0]);
@@ -140,15 +146,43 @@ const RENDER_TWO_PASS = 2;
             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._fft2hBindGroup2Used = [
+                [],
+                []
+            ];
+            this._fft2hBindGroup2Free = [
+                [],
+                []
+            ];
+            this._fft2hBindGroup4Used = [
+                [],
+                []
+            ];
+            this._fft2hBindGroup4Free = [
+                [],
+                []
+            ];
+            this._fft2vBindGroup2Used = [
+                [],
+                []
+            ];
+            this._fft2vBindGroup2Free = [
+                [],
+                []
+            ];
+            this._fft2vBindGroup4Used = [
+                [],
+                []
+            ];
+            this._fft2vBindGroup4Free = [
+                [],
+                []
+            ];
             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._waterBindGroup = device.createBindGroup(this._waterProgram.bindGroupLayouts[0]);
             this._instanceData = null;
             this._ifftTextures = null;
             this._wireframe = false;
@@ -190,7 +224,8 @@ const RENDER_TWO_PASS = 2;
             this._paramsChanged = true;
             this._resolutionChanged = true;
             this._updateFrameStamp = -1;
-        // this._impl = impl;
+            this._usedClipmapBindGroups = [];
+            this._freeClipmapBindGroups = [];
         }
     }
     get params() {
@@ -308,6 +343,14 @@ const RENDER_TWO_PASS = 2;
     set regionMax(val) {
         this._regionMax.set(val);
     }
+    getClipmapBindGroup(device) {
+        let bindGroup = this._usedClipmapBindGroups.pop();
+        if (!bindGroup) {
+            bindGroup = device.createBindGroup(this._waterProgram.bindGroupLayouts[1]);
+        }
+        this._freeClipmapBindGroups.push(bindGroup);
+        return bindGroup;
+    }
     render(camera, flip) {
         if (this._renderMode === RENDER_NONE) {
             return;
@@ -321,7 +364,7 @@ const RENDER_TWO_PASS = 2;
         device.popDeviceStates();
         const cameraPos = camera.getWorldPosition();
         const instanceData = this.getInstanceData();
-        device.setProgram(WaterMesh._globals.programs.waterProgram);
+        device.setProgram(this._waterProgram);
         device.setBindGroup(0, this._waterBindGroup);
         device.setRenderStates(this._waterRenderStates);
         const sampler = this._linearRepeatSampler;
@@ -339,7 +382,6 @@ const RENDER_TWO_PASS = 2;
         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);
@@ -358,14 +400,18 @@ const RENDER_TWO_PASS = 2;
             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);
+                const clipmapBindGroup = that.getClipmapBindGroup(device);
+                clipmapBindGroup.setValue('modelMatrix', modelMatrix);
+                clipmapBindGroup.setValue('offset', offset);
+                clipmapBindGroup.setValue('scale', scale);
+                clipmapBindGroup.setValue('gridScale', gridScale);
+                device.setBindGroup(1, clipmapBindGroup);
                 prim.primitiveType = that._wireframe ? 'line-strip' : 'triangle-list';
                 prim.draw();
             }
         }, mipLevels);
+        this._usedClipmapBindGroups.push(...this._freeClipmapBindGroups);
+        this._freeClipmapBindGroups.length = 0;
     }
     update(device, time) {
         device.setRenderStates(this._updateRenderStates);
@@ -489,7 +535,7 @@ const RENDER_TWO_PASS = 2;
                 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;
+            pingPong = 1 - pingPong; //(pingPong + 1) % 2;
         }
         // vertical ifft
         device.setProgram(WaterMesh._globals.programs.fft2vProgram);
@@ -512,6 +558,38 @@ const RENDER_TWO_PASS = 2;
         }
         this._ifftTextures = pingPongTextures[pingPong];
     }
+    getFFT2hBindGroup2(device, pingpong) {
+        let bindGroup = this._fft2hBindGroup2Used[pingpong].pop();
+        if (!bindGroup) {
+            bindGroup = device.createBindGroup(WaterMesh._globals.programs.fft2hProgram2.bindGroupLayouts[0]);
+        }
+        this._fft2hBindGroup2Free[pingpong].push(bindGroup);
+        return bindGroup;
+    }
+    getFFT2hBindGroup4(device, pingpong) {
+        let bindGroup = this._fft2hBindGroup4Used[pingpong].pop();
+        if (!bindGroup) {
+            bindGroup = device.createBindGroup(WaterMesh._globals.programs.fft2hProgram4.bindGroupLayouts[0]);
+        }
+        this._fft2hBindGroup4Free[pingpong].push(bindGroup);
+        return bindGroup;
+    }
+    getFFT2vBindGroup2(device, pingpong) {
+        let bindGroup = this._fft2vBindGroup2Used[pingpong].pop();
+        if (!bindGroup) {
+            bindGroup = device.createBindGroup(WaterMesh._globals.programs.fft2vProgram2.bindGroupLayouts[0]);
+        }
+        this._fft2vBindGroup2Free[pingpong].push(bindGroup);
+        return bindGroup;
+    }
+    getFFT2vBindGroup4(device, pingpong) {
+        let bindGroup = this._fft2vBindGroup4Used[pingpong].pop();
+        if (!bindGroup) {
+            bindGroup = device.createBindGroup(WaterMesh._globals.programs.fft2vProgram4.bindGroupLayouts[0]);
+        }
+        this._fft2vBindGroup4Free[pingpong].push(bindGroup);
+        return bindGroup;
+    }
     ifft2TwoPass() {
         const device = Application.instance.device;
         const instanceData = this.getInstanceData();
@@ -534,26 +612,28 @@ const RENDER_TWO_PASS = 2;
         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);
+            const fft2hBindGroup4 = this.getFFT2hBindGroup4(device, pingPong);
+            device.setBindGroup(0, fft2hBindGroup4);
+            fft2hBindGroup4.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            fft2hBindGroup4.setValue('phase', phase);
+            fft2hBindGroup4.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            fft2hBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            fft2hBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            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));
+                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);
+            const fft2hBindGroup2 = this.getFFT2hBindGroup2(device, pingPong);
+            device.setBindGroup(0, fft2hBindGroup2);
+            fft2hBindGroup2.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            fft2hBindGroup2.setValue('phase', phase);
+            fft2hBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            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));
+                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;
@@ -562,31 +642,43 @@ const RENDER_TWO_PASS = 2;
         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);
+            const fft2vBindGroup4 = this.getFFT2vBindGroup4(device, pingPong);
+            device.setBindGroup(0, fft2vBindGroup4);
+            fft2vBindGroup4.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            fft2vBindGroup4.setValue('phase', phase);
+            fft2vBindGroup4.setTexture('spectrum0', pingPongTextures[pingPong][0], this._nearestRepeatSampler);
+            fft2vBindGroup4.setTexture('spectrum1', pingPongTextures[pingPong][1], this._nearestRepeatSampler);
+            fft2vBindGroup4.setTexture('spectrum2', pingPongTextures[pingPong][2], this._nearestRepeatSampler);
+            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));
+                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);
+            const fft2vBindGroup2 = this.getFFT2vBindGroup2(device, pingPong);
+            device.setBindGroup(0, fft2vBindGroup2);
+            fft2vBindGroup2.setTexture('butterfly', butterflyTex, this._nearestRepeatSampler);
+            fft2vBindGroup2.setValue('phase', phase);
+            fft2vBindGroup2.setTexture('spectrum4', pingPongTextures[pingPong][4], this._nearestRepeatSampler);
+            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));
+                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];
+        for(let i = 0; i < 2; i++){
+            this._fft2hBindGroup2Used[i].push(...this._fft2hBindGroup2Free[i]);
+            this._fft2hBindGroup2Free[i].length = 0;
+            this._fft2hBindGroup4Used[i].push(...this._fft2hBindGroup4Free[i]);
+            this._fft2hBindGroup4Free[i].length = 0;
+            this._fft2vBindGroup2Used[i].push(...this._fft2vBindGroup2Free[i]);
+            this._fft2vBindGroup2Free[i].length = 0;
+            this._fft2vBindGroup4Used[i].push(...this._fft2vBindGroup4Free[i]);
+            this._fft2vBindGroup4Free[i].length = 0;
+        }
     }
     postIfft2() {
         const device = Application.instance.device;

package/dist/render/watermesh.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermesh.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"watermesh.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}