添加缓冲区工具函数和优化几何体处理

src/buffer-util.ts

@@ -0,0 +1,30 @@
+export class BufferUtil {
+
+    public static createVertexBuffer(device: GPUDevice, data: Float32Array ): GPUBuffer {
+        
+        const buffer = device.createBuffer({
+          size: data.byteLength,
+          usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.VERTEX,
+          mappedAtCreation: true,
+        });
+
+        new Float32Array(buffer.getMappedRange()).set(data);
+        buffer.unmap();
+
+        return buffer;
+    }
+
+    public static createIndexBuffer(device: GPUDevice, data: Uint16Array): GPUBuffer {
+        
+        const buffer = device.createBuffer({
+          size: data.byteLength,          
+          usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.INDEX,
+          mappedAtCreation: true,
+        });
+
+        new Uint16Array(buffer.getMappedRange()).set(data);
+        buffer.unmap();
+
+        return buffer;
+    }
+}

src/geometry.ts

@@ -2,24 +2,21 @@ export class QuadGeometry {
     public positions:  number[];
     public colors:     number[];
     public texCoords:  number[];
+    public indices:    number[];
 
     constructor() {
         this.positions = [
       -0.5, -0.5,
        0.5, -0.5,
        -0.5, 0.5,
-       -0.5, 0.5,
        0.5, 0.5,
-       0.5, -0.5
         ]
 
         this.colors = [
             1.0, 0.0, 0.0,
             0.0, 1.0, 0.0,
             0.0, 0.0, 1.0,
-            1.0, 0.0, 0.0,
+            1.0, 1.0, 1.0,
-      0.0, 1.0, 0.0,
-      0.0, 0.0, 1.0
         ]
 
 
@@ -27,9 +24,12 @@ export class QuadGeometry {
           0.0, 1.0,
           1.0, 1.0,
           0.0, 0.0,
-          0.0, 0.0,
           1.0, 0.0,
-          1.0, 1.0
+        ]
+
+        this.indices = [
+            0, 1, 2,
+            1, 2, 3,
         ]
     }
 }

src/main.ts

@@ -1,11 +1,13 @@
 import shaderSource from './shaders/shader.wgsl?raw';
 import { QuadGeometry } from './geometry';
 import { Texture } from './texture';
+import { BufferUtil } from './buffer-util';
 class Renderer{
   private device! : GPUDevice;
   private context! : GPUCanvasContext;
   private pipeline! : GPURenderPipeline;
   private postitionBuffer! : GPUBuffer;
+  private indexBuffer! : GPUBuffer;
   private colorBuffer! : GPUBuffer;
   private texCoordBuffer! : GPUBuffer;
   private textureBindGroup! : GPUBindGroup;
@@ -51,27 +53,12 @@ class Renderer{
 
     const geometry = new QuadGeometry();
     
-    this.postitionBuffer = this.CreateBuffer(new Float32Array(geometry.positions));
+    this.postitionBuffer = BufferUtil.createVertexBuffer(this.device,new Float32Array(geometry.positions));
-    this.colorBuffer = this.CreateBuffer(new Float32Array(geometry.colors));
+    this.colorBuffer = BufferUtil.createVertexBuffer(this.device, new Float32Array(geometry.colors));
-    this.texCoordBuffer = this.CreateBuffer(new Float32Array(geometry.texCoords));
+    this.texCoordBuffer = BufferUtil.createVertexBuffer(this.device,new Float32Array(geometry.texCoords));
+    this.indexBuffer = BufferUtil.createIndexBuffer(this.device, new Uint16Array(geometry.indices));
   }
     
-  private CreateBuffer(data: Float32Array)
-  {
-    const buffer = this.device.createBuffer({
-      size: data.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-      mappedAtCreation: true
-    });
-
-    new Float32Array(buffer.getMappedRange()).set(data);
-    buffer.unmap();
-
-
-    return  buffer;
-  }
-
-    
   private prepareModel() {
     const shaderModule = this.device.createShaderModule({code: shaderSource});
 
@@ -132,12 +119,12 @@ class Renderer{
           blend: {
             color: {
               srcFactor: 'one',
-              dstFactor: 'zero',
+              dstFactor: 'one-minus-src-alpha',
               operation: 'add'
             },
             alpha: {
               srcFactor: 'one',
-              dstFactor: 'zero',
+              dstFactor: 'one-minus-src-alpha',
               operation: 'add'
             }
           }
@@ -212,14 +199,16 @@ class Renderer{
 
     //Draw here
     passEncoder.setPipeline(this.pipeline );
+    passEncoder.setIndexBuffer(this.indexBuffer, 'uint16');
     passEncoder.setVertexBuffer(0, this.postitionBuffer);
     passEncoder.setVertexBuffer(1, this.colorBuffer);
     passEncoder.setVertexBuffer(2, this.texCoordBuffer);
     passEncoder.setBindGroup(0, this.textureBindGroup)
-    passEncoder.draw(6);
+    passEncoder.drawIndexed(6, 1, 0, 0, 0);
 
     passEncoder.end();
 
+
     this.device.queue.submit([commandEncoder.finish()]);
   }