From 14c01ea55aa954565aeaabecd4cf6ae72af3970e Mon Sep 17 00:00:00 2001
From: SpecialX <47072643+wangxiner55@users.noreply.github.com>
Date: Wed, 19 Nov 2025 11:35:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BC=93=E5=86=B2=E5=8C=BA?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E5=87=BD=E6=95=B0=E5=92=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=87=A0=E4=BD=95=E4=BD=93=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/buffer-util.ts | 30 ++++++++++++++++++++++++++++++
 src/geometry.ts    | 20 ++++++++++----------
 src/main.ts        | 33 +++++++++++----------------------
 3 files changed, 51 insertions(+), 32 deletions(-)
 create mode 100644 src/buffer-util.ts

diff --git a/src/buffer-util.ts b/src/buffer-util.ts
new file mode 100644
index 0000000..3a834f7
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/geometry.ts b/src/geometry.ts
index 4dff8bb..1697139 100644
--- a/src/geometry.ts
+++ b/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,
-       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,
-      0.0, 1.0, 0.0,
-      0.0, 0.0, 1.0
+            0.0, 1.0, 0.0,
+            0.0, 0.0, 1.0,
+            1.0, 1.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,
         ]
     }
 }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index cb2597b..505f536 100644
--- a/src/main.ts
+++ b/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,26 +53,11 @@ class Renderer{
 
     const geometry = new QuadGeometry();
     
-    this.postitionBuffer = this.CreateBuffer(new Float32Array(geometry.positions));
-    this.colorBuffer = this.CreateBuffer(new Float32Array(geometry.colors));
-    this.texCoordBuffer = this.CreateBuffer(new Float32Array(geometry.texCoords));
+    this.postitionBuffer = BufferUtil.createVertexBuffer(this.device,new Float32Array(geometry.positions));
+    this.colorBuffer = BufferUtil.createVertexBuffer(this.device, new Float32Array(geometry.colors));
+    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()]);
   }