优化顶点数据布局：从多数组改为单数组

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 = [

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);
 

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;