实现顶点和颜色缓冲区，创建两个三角形

src/main.ts

@@ -4,7 +4,8 @@ class Renderer{
   private device! : GPUDevice;
   private context! : GPUCanvasContext;
   private pipeline! : GPURenderPipeline;
-
+  private postitionBuffer! : GPUBuffer;
+  private colorBuffer! : GPUBuffer;
 
   public async initialize()
   {
@@ -37,42 +38,76 @@ class Renderer{
     })
 
     this.prepareModel();
+
+    this.postitionBuffer = this.CreateBuffer(new Float32Array([
+      -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.colorBuffer = this.CreateBuffer(new Float32Array([
+      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
+    ]));
   }
 
-  public draw()
+  private CreateBuffer(data: Float32Array)
   {
-    const commandEncoder = this.device.createCommandEncoder();  
-    const textureView = this.context.getCurrentTexture().createView();  
+    const buffer = this.device.createBuffer({
+      size: data.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
 
-    const renderPassDescriptor:GPURenderPassDescriptor = {
-      colorAttachments:[{
-        view: textureView,
-        clearValue: {r: 0, g: 0, b: 0, a: 1},
-        loadOp: 'clear',
-        storeOp:'store'
-      }]
-      }  
-
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); 
+    new Float32Array(buffer.getMappedRange()).set(data);
+    buffer.unmap();
 
 
-    //Draw here
-    passEncoder.setPipeline(this.pipeline );
-    passEncoder.draw(3);
-
-    passEncoder.end();
-
-    this.device.queue.submit([commandEncoder.finish()]);
+    return  buffer;
   }
-  
-  
+
+    
   private prepareModel() {
     const shaderModule = this.device.createShaderModule({code: shaderSource});
 
+    const postitionBufferLayout : GPUVertexBufferLayout =
+    {
+      arrayStride: 2 * 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 vertexState: GPUVertexState = {
       module : shaderModule,
       entryPoint: "VertexMain",
-      buffers: []  
+      buffers:
+      [postitionBufferLayout, 
+        colorBufferLayout]  
     }
 
     const fragmentState: GPUFragmentState = {
@@ -98,6 +133,37 @@ class Renderer{
   }
 
 
+  public draw()
+  {
+    const commandEncoder = this.device.createCommandEncoder();  
+    const textureView = this.context.getCurrentTexture().createView();  
+
+    const renderPassDescriptor:GPURenderPassDescriptor = {
+      colorAttachments:[{
+        view: textureView,
+        clearValue: {r: 0, g: 0, b: 0, a: 1},
+        loadOp: 'clear',
+        storeOp:'store'
+      }]
+      }  
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); 
+
+
+    //Draw here
+    passEncoder.setPipeline(this.pipeline );
+    passEncoder.setVertexBuffer(0, this.postitionBuffer);
+    passEncoder.setVertexBuffer(1, this.colorBuffer);
+    passEncoder.draw(6);
+
+    passEncoder.end();
+
+    this.device.queue.submit([commandEncoder.finish()]);
+  }
+  
+
+
+
 }
   
 

src/shaders/shader.wgsl

@@ -1,35 +1,24 @@
-// 定义顶点着色器传递给片元着色器的数据结构
 struct VertexOut {
   @builtin(position) pos: vec4<f32>, 
   @location(0) color: vec4<f32>,      
 }
 
-// 顶点着色器主函数
 @vertex
 fn VertexMain(
+    @location(0) pos: vec2<f32>,
+    @location(1) color: vec3<f32>,
     @builtin(vertex_index) vertexIndex: u32,
 ) -> VertexOut
 {
-    // 定义一个三角形的三个顶点位置 (在 NDC 空间)
-    let pos = array(
-        vec2<f32>(-0.5, -0.5),
-        vec2<f32>( 0.5, -0.5),
-        vec2<f32>( 0.0,  0.5)
-    );
-
     var output : VertexOut;
-    // 根据顶点索引设置最终位置
-    output.pos = vec4<f32>(pos[vertexIndex], 0.0, 1.0); 
-    // 为所有顶点设置一个固定的红色
-    output.color = vec4<f32>(1.0, 0.0, 0.0, 1.0);     
+    output.pos = vec4<f32>(pos, 0.0, 1.0); 
+    output.color = vec4<f32>(color, 1.0);     
 
     return output;
 }
 
-// 片元着色器主函数
 @fragment
 fn FragmentMain(fragData: VertexOut) -> @location(0) vec4<f32> 
 {
-    // 直接返回从顶点着色器经过插值后的颜色
     return fragData.color;
 }