reze-engine 0.1.13 → 0.1.14

package/dist/engine.d.ts

@@ -35,6 +35,7 @@ export declare class Engine {
     private worldMatrixBuffer?;
     private inverseBindMatrixBuffer?;
     private skinMatrixComputePipeline?;
+    private skinMatrixComputeBindGroup?;
     private boneCountBuffer?;
     private multisampleTexture;
     private readonly sampleCount;
@@ -52,6 +53,10 @@ export declare class Engine {
     private bloomIntensityBuffer;
     private bloomThresholdBuffer;
     private linearSampler;
+    private bloomExtractBindGroup?;
+    private bloomBlurHBindGroup?;
+    private bloomBlurVBindGroup?;
+    private bloomComposeBindGroup?;
     bloomThreshold: number;
     bloomIntensity: number;
     private rimLightIntensity;
@@ -78,6 +83,7 @@ export declare class Engine {
     private createSkinMatrixComputePipeline;
     private createFullscreenQuad;
     private createBloomPipelines;
+    private setupBloom;
     private setupResize;
     private handleResize;
     private setupCamera;

package/dist/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}

package/dist/engine.js

@@ -1072,6 +1072,65 @@ export class Engine {
         this.bloomThresholdBuffer = bloomThresholdBuffer;
         this.linearSampler = linearSampler;
     }
+    // Setup bloom textures and bind groups (called when canvas is resized)
+    setupBloom(width, height) {
+        // Create bloom textures (half resolution for performance)
+        const bloomWidth = Math.floor(width / 2);
+        const bloomHeight = Math.floor(height / 2);
+        this.bloomExtractTexture = this.device.createTexture({
+            label: "bloom extract",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.bloomBlurTexture1 = this.device.createTexture({
+            label: "bloom blur 1",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.bloomBlurTexture2 = this.device.createTexture({
+            label: "bloom blur 2",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        // Create bloom bind groups
+        this.bloomExtractBindGroup = this.device.createBindGroup({
+            layout: this.bloomExtractPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.sceneRenderTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.bloomThresholdBuffer } },
+            ],
+        });
+        this.bloomBlurHBindGroup = this.device.createBindGroup({
+            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.bloomExtractTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+            ],
+        });
+        this.bloomBlurVBindGroup = this.device.createBindGroup({
+            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.bloomBlurTexture1.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+            ],
+        });
+        this.bloomComposeBindGroup = this.device.createBindGroup({
+            layout: this.bloomComposePipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.sceneRenderTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: this.bloomBlurTexture2.createView() },
+                { binding: 3, resource: this.linearSampler },
+                { binding: 4, resource: { buffer: this.bloomIntensityBuffer } },
+            ],
+        });
+    }
     // Step 3: Setup canvas resize handling
     setupResize() {
         this.resizeObserver = new ResizeObserver(() => this.handleResize());
@@ -1109,27 +1168,8 @@ export class Engine {
                 usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
             });
             this.sceneRenderTextureView = this.sceneRenderTexture.createView();
-            // Create bloom textures (half resolution for performance)
-            const bloomWidth = Math.floor(width / 2);
-            const bloomHeight = Math.floor(height / 2);
-            this.bloomExtractTexture = this.device.createTexture({
-                label: "bloom extract",
-                size: [bloomWidth, bloomHeight],
-                format: this.presentationFormat,
-                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-            });
-            this.bloomBlurTexture1 = this.device.createTexture({
-                label: "bloom blur 1",
-                size: [bloomWidth, bloomHeight],
-                format: this.presentationFormat,
-                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-            });
-            this.bloomBlurTexture2 = this.device.createTexture({
-                label: "bloom blur 2",
-                size: [bloomWidth, bloomHeight],
-                format: this.presentationFormat,
-                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-            });
+            // Setup bloom textures and bind groups
+            this.setupBloom(width, height);
             const depthTextureView = this.depthTexture.createView();
             // Render scene to texture instead of directly to canvas
             const colorAttachment = this.sampleCount > 1
@@ -1302,6 +1342,16 @@ export class Engine {
         boneCountData[0] = boneCount;
         this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountData);
         this.createSkinMatrixComputePipeline();
+        // Create compute bind group once (reused every frame)
+        this.skinMatrixComputeBindGroup = this.device.createBindGroup({
+            layout: this.skinMatrixComputePipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.boneCountBuffer } },
+                { binding: 1, resource: { buffer: this.worldMatrixBuffer } },
+                { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer } },
+                { binding: 3, resource: { buffer: this.skinMatrixBuffer } },
+            ],
+        });
         const indices = model.getIndices();
         if (indices) {
             this.indexBuffer = this.device.createBuffer({
@@ -1751,16 +1801,8 @@ export class Engine {
                 },
             ],
         });
-        const extractBindGroup = this.device.createBindGroup({
-            layout: this.bloomExtractPipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: this.sceneRenderTexture.createView() },
-                { binding: 1, resource: this.linearSampler },
-                { binding: 2, resource: { buffer: this.bloomThresholdBuffer } },
-            ],
-        });
         extractPass.setPipeline(this.bloomExtractPipeline);
-        extractPass.setBindGroup(0, extractBindGroup);
+        extractPass.setBindGroup(0, this.bloomExtractBindGroup);
         extractPass.draw(6, 1, 0, 0);
         extractPass.end();
         // Pass 2: Horizontal blur
@@ -1779,16 +1821,8 @@ export class Engine {
                 },
             ],
         });
-        const blurHBindGroup = this.device.createBindGroup({
-            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: this.bloomExtractTexture.createView() },
-                { binding: 1, resource: this.linearSampler },
-                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
-            ],
-        });
         blurHPass.setPipeline(this.bloomBlurPipeline);
-        blurHPass.setBindGroup(0, blurHBindGroup);
+        blurHPass.setBindGroup(0, this.bloomBlurHBindGroup);
         blurHPass.draw(6, 1, 0, 0);
         blurHPass.end();
         // Pass 3: Vertical blur
@@ -1807,16 +1841,8 @@ export class Engine {
                 },
             ],
         });
-        const blurVBindGroup = this.device.createBindGroup({
-            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: this.bloomBlurTexture1.createView() },
-                { binding: 1, resource: this.linearSampler },
-                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
-            ],
-        });
         blurVPass.setPipeline(this.bloomBlurPipeline);
-        blurVPass.setBindGroup(0, blurVBindGroup);
+        blurVPass.setBindGroup(0, this.bloomBlurVBindGroup);
         blurVPass.draw(6, 1, 0, 0);
         blurVPass.end();
         // Pass 4: Compose scene + bloom to canvas
@@ -1831,18 +1857,8 @@ export class Engine {
                 },
             ],
         });
-        const composeBindGroup = this.device.createBindGroup({
-            layout: this.bloomComposePipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: this.sceneRenderTexture.createView() },
-                { binding: 1, resource: this.linearSampler },
-                { binding: 2, resource: this.bloomBlurTexture2.createView() },
-                { binding: 3, resource: this.linearSampler },
-                { binding: 4, resource: { buffer: this.bloomIntensityBuffer } },
-            ],
-        });
         composePass.setPipeline(this.bloomComposePipeline);
-        composePass.setBindGroup(0, composeBindGroup);
+        composePass.setBindGroup(0, this.bloomComposeBindGroup);
         composePass.draw(6, 1, 0, 0);
         composePass.end();
         this.device.queue.submit([encoder.finish()]);
@@ -1892,24 +1908,11 @@ export class Engine {
         const workgroupSize = 64;
         // Dispatch exactly enough threads for all bones (no bounds check needed)
         const workgroupCount = Math.ceil(boneCount / workgroupSize);
-        // Update bone count uniform
-        const boneCountData = new Uint32Array(8); // 32 bytes total
-        boneCountData[0] = boneCount;
-        this.device.queue.writeBuffer(this.boneCountBuffer, 0, boneCountData);
-        const bindGroup = this.device.createBindGroup({
-            label: "skin matrix compute bind group",
-            layout: this.skinMatrixComputePipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.boneCountBuffer } },
-                { binding: 1, resource: { buffer: this.worldMatrixBuffer } },
-                { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer } },
-                { binding: 3, resource: { buffer: this.skinMatrixBuffer } },
-            ],
-        });
+        // Bone count is written once in setupModelBuffers() and never changes
         const encoder = this.device.createCommandEncoder();
         const pass = encoder.beginComputePass();
         pass.setPipeline(this.skinMatrixComputePipeline);
-        pass.setBindGroup(0, bindGroup);
+        pass.setBindGroup(0, this.skinMatrixComputeBindGroup);
         pass.dispatchWorkgroups(workgroupCount);
         pass.end();
         this.device.queue.submit([encoder.finish()]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "reze-engine",
-    "version": "0.1.13",
+    "version": "0.1.14",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/engine.ts

@@ -40,6 +40,7 @@ export class Engine {
   private worldMatrixBuffer?: GPUBuffer
   private inverseBindMatrixBuffer?: GPUBuffer
   private skinMatrixComputePipeline?: GPUComputePipeline
+  private skinMatrixComputeBindGroup?: GPUBindGroup
   private boneCountBuffer?: GPUBuffer
   private multisampleTexture!: GPUTexture
   private readonly sampleCount = 4 // MSAA 4x
@@ -60,6 +61,11 @@ export class Engine {
   private bloomIntensityBuffer!: GPUBuffer
   private bloomThresholdBuffer!: GPUBuffer
   private linearSampler!: GPUSampler
+  // Bloom bind groups (created once, reused every frame)
+  private bloomExtractBindGroup?: GPUBindGroup
+  private bloomBlurHBindGroup?: GPUBindGroup
+  private bloomBlurVBindGroup?: GPUBindGroup
+  private bloomComposeBindGroup?: GPUBindGroup
   // Bloom settings
   public bloomThreshold: number = 0.3
   public bloomIntensity: number = 0.1
@@ -1156,6 +1162,70 @@ export class Engine {
     this.linearSampler = linearSampler
   }
 
+  // Setup bloom textures and bind groups (called when canvas is resized)
+  private setupBloom(width: number, height: number) {
+    // Create bloom textures (half resolution for performance)
+    const bloomWidth = Math.floor(width / 2)
+    const bloomHeight = Math.floor(height / 2)
+    this.bloomExtractTexture = this.device.createTexture({
+      label: "bloom extract",
+      size: [bloomWidth, bloomHeight],
+      format: this.presentationFormat,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    })
+    this.bloomBlurTexture1 = this.device.createTexture({
+      label: "bloom blur 1",
+      size: [bloomWidth, bloomHeight],
+      format: this.presentationFormat,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    })
+    this.bloomBlurTexture2 = this.device.createTexture({
+      label: "bloom blur 2",
+      size: [bloomWidth, bloomHeight],
+      format: this.presentationFormat,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    })
+
+    // Create bloom bind groups
+    this.bloomExtractBindGroup = this.device.createBindGroup({
+      layout: this.bloomExtractPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: this.sceneRenderTexture.createView() },
+        { binding: 1, resource: this.linearSampler },
+        { binding: 2, resource: { buffer: this.bloomThresholdBuffer } },
+      ],
+    })
+
+    this.bloomBlurHBindGroup = this.device.createBindGroup({
+      layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: this.bloomExtractTexture.createView() },
+        { binding: 1, resource: this.linearSampler },
+        { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+      ],
+    })
+
+    this.bloomBlurVBindGroup = this.device.createBindGroup({
+      layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: this.bloomBlurTexture1.createView() },
+        { binding: 1, resource: this.linearSampler },
+        { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+      ],
+    })
+
+    this.bloomComposeBindGroup = this.device.createBindGroup({
+      layout: this.bloomComposePipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: this.sceneRenderTexture.createView() },
+        { binding: 1, resource: this.linearSampler },
+        { binding: 2, resource: this.bloomBlurTexture2.createView() },
+        { binding: 3, resource: this.linearSampler },
+        { binding: 4, resource: { buffer: this.bloomIntensityBuffer } },
+      ],
+    })
+  }
+
   // Step 3: Setup canvas resize handling
   private setupResize() {
     this.resizeObserver = new ResizeObserver(() => this.handleResize())
@@ -1200,27 +1270,8 @@ export class Engine {
       })
       this.sceneRenderTextureView = this.sceneRenderTexture.createView()
 
-      // Create bloom textures (half resolution for performance)
-      const bloomWidth = Math.floor(width / 2)
-      const bloomHeight = Math.floor(height / 2)
-      this.bloomExtractTexture = this.device.createTexture({
-        label: "bloom extract",
-        size: [bloomWidth, bloomHeight],
-        format: this.presentationFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomBlurTexture1 = this.device.createTexture({
-        label: "bloom blur 1",
-        size: [bloomWidth, bloomHeight],
-        format: this.presentationFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
-      this.bloomBlurTexture2 = this.device.createTexture({
-        label: "bloom blur 2",
-        size: [bloomWidth, bloomHeight],
-        format: this.presentationFormat,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-      })
+      // Setup bloom textures and bind groups
+      this.setupBloom(width, height)
 
       const depthTextureView = this.depthTexture.createView()
 
@@ -1447,6 +1498,17 @@ export class Engine {
 
     this.createSkinMatrixComputePipeline()
 
+    // Create compute bind group once (reused every frame)
+    this.skinMatrixComputeBindGroup = this.device.createBindGroup({
+      layout: this.skinMatrixComputePipeline!.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.boneCountBuffer } },
+        { binding: 1, resource: { buffer: this.worldMatrixBuffer } },
+        { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer } },
+        { binding: 3, resource: { buffer: this.skinMatrixBuffer } },
+      ],
+    })
+
     const indices = model.getIndices()
     if (indices) {
       this.indexBuffer = this.device.createBuffer({
@@ -1987,17 +2049,8 @@ export class Engine {
       ],
     })
 
-    const extractBindGroup = this.device.createBindGroup({
-      layout: this.bloomExtractPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: this.sceneRenderTexture.createView() },
-        { binding: 1, resource: this.linearSampler },
-        { binding: 2, resource: { buffer: this.bloomThresholdBuffer } },
-      ],
-    })
-
     extractPass.setPipeline(this.bloomExtractPipeline)
-    extractPass.setBindGroup(0, extractBindGroup)
+    extractPass.setBindGroup(0, this.bloomExtractBindGroup!)
     extractPass.draw(6, 1, 0, 0)
     extractPass.end()
 
@@ -2018,17 +2071,8 @@ export class Engine {
       ],
     })
 
-    const blurHBindGroup = this.device.createBindGroup({
-      layout: this.bloomBlurPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: this.bloomExtractTexture.createView() },
-        { binding: 1, resource: this.linearSampler },
-        { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
-      ],
-    })
-
     blurHPass.setPipeline(this.bloomBlurPipeline)
-    blurHPass.setBindGroup(0, blurHBindGroup)
+    blurHPass.setBindGroup(0, this.bloomBlurHBindGroup!)
     blurHPass.draw(6, 1, 0, 0)
     blurHPass.end()
 
@@ -2049,17 +2093,8 @@ export class Engine {
       ],
     })
 
-    const blurVBindGroup = this.device.createBindGroup({
-      layout: this.bloomBlurPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: this.bloomBlurTexture1.createView() },
-        { binding: 1, resource: this.linearSampler },
-        { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
-      ],
-    })
-
     blurVPass.setPipeline(this.bloomBlurPipeline)
-    blurVPass.setBindGroup(0, blurVBindGroup)
+    blurVPass.setBindGroup(0, this.bloomBlurVBindGroup!)
     blurVPass.draw(6, 1, 0, 0)
     blurVPass.end()
 
@@ -2076,19 +2111,8 @@ export class Engine {
       ],
     })
 
-    const composeBindGroup = this.device.createBindGroup({
-      layout: this.bloomComposePipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: this.sceneRenderTexture.createView() },
-        { binding: 1, resource: this.linearSampler },
-        { binding: 2, resource: this.bloomBlurTexture2.createView() },
-        { binding: 3, resource: this.linearSampler },
-        { binding: 4, resource: { buffer: this.bloomIntensityBuffer } },
-      ],
-    })
-
     composePass.setPipeline(this.bloomComposePipeline)
-    composePass.setBindGroup(0, composeBindGroup)
+    composePass.setBindGroup(0, this.bloomComposeBindGroup!)
     composePass.draw(6, 1, 0, 0)
     composePass.end()
 
@@ -2153,26 +2177,12 @@ export class Engine {
     // Dispatch exactly enough threads for all bones (no bounds check needed)
     const workgroupCount = Math.ceil(boneCount / workgroupSize)
 
-    // Update bone count uniform
-    const boneCountData = new Uint32Array(8) // 32 bytes total
-    boneCountData[0] = boneCount
-    this.device.queue.writeBuffer(this.boneCountBuffer!, 0, boneCountData)
-
-    const bindGroup = this.device.createBindGroup({
-      label: "skin matrix compute bind group",
-      layout: this.skinMatrixComputePipeline!.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.boneCountBuffer! } },
-        { binding: 1, resource: { buffer: this.worldMatrixBuffer! } },
-        { binding: 2, resource: { buffer: this.inverseBindMatrixBuffer! } },
-        { binding: 3, resource: { buffer: this.skinMatrixBuffer! } },
-      ],
-    })
+    // Bone count is written once in setupModelBuffers() and never changes
 
     const encoder = this.device.createCommandEncoder()
     const pass = encoder.beginComputePass()
     pass.setPipeline(this.skinMatrixComputePipeline!)
-    pass.setBindGroup(0, bindGroup)
+    pass.setBindGroup(0, this.skinMatrixComputeBindGroup!)
     pass.dispatchWorkgroups(workgroupCount)
     pass.end()
     this.device.queue.submit([encoder.finish()])