add plane model by hand

src/002-webgpu-instead/main.ts

@@ -1,14 +1,9 @@
 import { WebGPUApp } from "../renderer/webgpu";
-import Torus from "../meshes/torus";
 import { MeshRenderer } from "../renderer/mesh-renderer";
+import plane from "../meshes/plane";
 
 const app = new WebGPUApp({ fov: 20 });
 
-// TODO:
-// - torus!
-// - white shader
-// - real shader with UVs and uniforms
-
-const torusRenderer = new MeshRenderer(app, Torus);
+const renderer = new MeshRenderer(app, plane);
 
 app.start();

src/002-webgpu-instead/rainbow-plane.wgsl

@@ -7,7 +7,8 @@ struct Uniforms {
 
 struct v2f {
   @builtin(position) position : vec4f,
-  @location(0) uv : vec2f,
+  @location(0) color : vec4f,
+  @location(1) uv : vec2f,
 }
 
 @vertex

src/meshes/plane.ts

@@ -0,0 +1,17 @@
+import { Mesh } from "../renderer/mesh";
+
+// prettier-ignore
+const mesh = new Float32Array([
+  // f4 position,   f4 color,     f2 uv
+  -1, -1, 0, 1,     1, 1, 1, 1,   0, 0,
+   1, -1, 0, 1,     1, 1, 1, 1,   1, 0,
+  -1,  1, 0, 1,     1, 1, 1, 1,   0, 1,
+   1,  1, 0, 1,     1, 1, 1, 1,   1, 1,
+]);
+
+export default new Mesh({
+  mesh,
+  positionSize: 4 * 4,
+  colorSize: 4 * 4,
+  uvSize: 2 * 4,
+});

src/renderer/mesh.ts

@@ -9,15 +9,8 @@ export type MeshConfig = {
 };
 
 export class Mesh {
-  private _shader: Shader = Oops;
-
   constructor(public config: MeshConfig) {}
 
-  shader(shader: Shader) {
-    this._shader = shader;
-    return this;
-  }
-
   buffer(app: WebGPUApp) {
     const buffer = app.device.createBuffer({
       size: this.config.mesh.byteLength,
@@ -30,8 +23,8 @@ export class Mesh {
     return buffer;
   }
 
-  pipeline(app: WebGPUApp, config: Record<string, any>) {
-    const module = this._shader.module(app);
+  pipeline(app: WebGPUApp, shader: Shader, config: Record<string, any>) {
+    const module = shader.module(app);
     return app.device.createRenderPipeline({
       layout: "auto",
       vertex: {