添加WebGPU渲染器和着色器

src/main.ts

@@ -1,6 +1,10 @@
+import shaderSource from './shaders/shader.wgsl?raw';
+
 class Renderer{
   private device! : GPUDevice;
   private context! : GPUCanvasContext;
+  private pipeline! : GPURenderPipeline;
+
 
   public async initialize()
   {
@@ -32,6 +36,7 @@ class Renderer{
       format: navigator.gpu.getPreferredCanvasFormat()
     })
 
+    this.prepareModel();
   }
 
   public draw()
@@ -42,7 +47,7 @@ class Renderer{
     const renderPassDescriptor:GPURenderPassDescriptor = {
       colorAttachments:[{
         view: textureView,
-        clearValue: {r: 1, g: 0, b: 0, a: 1},
+        clearValue: {r: 0, g: 0, b: 0, a: 1},
         loadOp: 'clear',
         storeOp:'store'
       }]
@@ -50,12 +55,51 @@ class Renderer{
 
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); 
 
+
+    //Draw here
+    passEncoder.setPipeline(this.pipeline );
+    passEncoder.draw(3);
+
     passEncoder.end();
 
     this.device.queue.submit([commandEncoder.finish()]);
   }
   
+  
+  private prepareModel() {
+    const shaderModule = this.device.createShaderModule({code: shaderSource});
+
+    const vertexState: GPUVertexState = {
+      module : shaderModule,
+      entryPoint: "VertexMain",
+      buffers: []  
+    }
+
+    const fragmentState: GPUFragmentState = {
+      module : shaderModule,
+      entryPoint: "FragmentMain",
+      targets: [
+        {
+          format: navigator.gpu.getPreferredCanvasFormat()
+        }
+      ]
+    }
+
+    this.pipeline = this.device.createRenderPipeline({
+      vertex: vertexState,
+      fragment: fragmentState,
+      primitive:{
+        topology: 'triangle-list',
+      },
+      layout: "auto"
+    });
+
+
+  }
+
+
 }
+  
 
 const renderer = new Renderer();
 renderer.initialize()