From bd6e0f47714ae69c7b910a0596ed41eceb253646 Mon Sep 17 00:00:00 2001
From: SpecialX <47072643+wangxiner55@users.noreply.github.com>
Date: Wed, 19 Nov 2025 11:49:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B6=E7=82=B9=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=B8=83=E5=B1=80=EF=BC=9A=E4=BB=8E=E5=A4=9A=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=E6=94=B9=E4=B8=BA=E5=8D=95=E6=95=B0=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/geometry.ts         | 29 +++++-----------------
 src/main.ts             | 54 ++++++++++++-----------------------------
 src/shaders/shader.wgsl |  9 +++----
 3 files changed, 26 insertions(+), 66 deletions(-)

diff --git a/src/geometry.ts b/src/geometry.ts
index 1697139..35d1c63 100644
--- a/src/geometry.ts
+++ b/src/geometry.ts
@@ -1,30 +1,13 @@
 export class QuadGeometry {
-    public positions:  number[];
-    public colors:     number[];
-    public texCoords:  number[];
+    public vertices:  number[];
     public indices:    number[];
 
     constructor() {
-        this.positions = [
-      -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, 1.0, 1.0,
-        ]
-
-
-        this.texCoords = [
-          0.0, 1.0,
-          1.0, 1.0,
-          0.0, 0.0,
-          1.0, 0.0,
+        this.vertices = [
+      -0.5, -0.5,  0.0, 1.0,  1.0, 0.0, 0.0,
+       0.5, -0.5,  1.0, 1.0,  0.0, 1.0, 0.0,
+       -0.5, 0.5,  0.0, 0.0,  0.0, 0.0, 1.0,
+        0.5, 0.5,  1.0, 0.0,  1.0, 1.0, 1.0
         ]
 
         this.indices = [
diff --git a/src/main.ts b/src/main.ts
index 505f536..127f4b1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,10 +6,8 @@ class Renderer{
   private device! : GPUDevice;
   private context! : GPUCanvasContext;
   private pipeline! : GPURenderPipeline;
-  private postitionBuffer! : GPUBuffer;
+  private verticesBuffer! : GPUBuffer;
   private indexBuffer! : GPUBuffer;
-  private colorBuffer! : GPUBuffer;
-  private texCoordBuffer! : GPUBuffer;
   private textureBindGroup! : GPUBindGroup;
 
   private testTexture! : Texture;
@@ -53,50 +51,34 @@ class Renderer{
 
     const geometry = new QuadGeometry();
     
-    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.verticesBuffer = BufferUtil.createVertexBuffer(this.device,new Float32Array(geometry.vertices));
     this.indexBuffer = BufferUtil.createIndexBuffer(this.device, new Uint16Array(geometry.indices));
   }
     
   private prepareModel() {
     const shaderModule = this.device.createShaderModule({code: shaderSource});
 
-    const postitionBufferLayout : GPUVertexBufferLayout =
+    const BufferLayout : GPUVertexBufferLayout =
     {
-      arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
+      arrayStride: 7 * Float32Array.BYTES_PER_ELEMENT,
       attributes: [
         {
           shaderLocation: 0,
           offset: 0,
           format: 'float32x2'
-        }  
-      ],
-      stepMode: 'vertex'
-    }
-
-
-    const colorBufferLayout : GPUVertexBufferLayout =
-    {
-      arrayStride: 3 * Float32Array.BYTES_PER_ELEMENT,
-      attributes: [
+        } ,
         {
           shaderLocation: 1,
-          offset: 0,
-          format: 'float32x3'
-        }]
-    }
-
-    const textureCoordBufferLayout : GPUVertexBufferLayout =
-    {
-      arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
-      attributes: [
-        {
-          shaderLocation: 2,
-          offset: 0,
+          offset: 2 * Float32Array.BYTES_PER_ELEMENT,
           format: 'float32x2'
-        }],
-        stepMode: 'vertex'
+        },
+        {
+          shaderLocation: 2,   
+          offset: 4 * Float32Array.BYTES_PER_ELEMENT,
+          format: 'float32x3'
+        }
+      ],
+      stepMode: 'vertex'
     }
 
     const vertexState: GPUVertexState = {
@@ -104,9 +86,7 @@ class Renderer{
       entryPoint: "VertexMain",
       buffers:
       [
-        postitionBufferLayout, 
-        colorBufferLayout,
-        textureCoordBufferLayout
+        BufferLayout
       ]  
     }
 
@@ -200,9 +180,7 @@ 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.setVertexBuffer(0, this.verticesBuffer);
     passEncoder.setBindGroup(0, this.textureBindGroup)
     passEncoder.drawIndexed(6, 1, 0, 0, 0);
 
diff --git a/src/shaders/shader.wgsl b/src/shaders/shader.wgsl
index 6846118..6155b59 100644
--- a/src/shaders/shader.wgsl
+++ b/src/shaders/shader.wgsl
@@ -1,15 +1,14 @@
 struct VertexOut {
   @builtin(position) pos: vec4<f32>, 
-  @location(0) color: vec4<f32>,      
-  @location(1) texcoord: vec2<f32>,
+  @location(0) texcoord: vec2<f32>,
+  @location(1) color: vec4<f32>,      
 }
 
 @vertex
 fn VertexMain(
     @location(0) pos: vec2<f32>,
-    @location(1) color: vec3<f32>,
-    @location(2) texcoord: vec2<f32>,
-    @builtin(vertex_index) vertexIndex: u32,
+    @location(1) texcoord: vec2<f32>,
+    @location(2) color: vec3<f32>,
 ) -> VertexOut
 {
     var output : VertexOut;