Use vertex buffer

src/main.zig

@@ -6,6 +6,11 @@ const zm = @import("zmath");
 const vec = zm.f32x4;
 const Mat = zm.Mat;
 
+const VertexData = struct {
+    position: [3]f32,
+    color: [3]f32,
+};
+
 pub const App = @This();
 
 app_timer: core.Timer,
@@ -14,37 +19,42 @@ title_timer: core.Timer,
 pipeline: *gpu.RenderPipeline,
 mvp_uniform_buffer: *gpu.Buffer,
 mvp_bind_group: *gpu.BindGroup,
+vertex_count: u32,
+vertex_buffer: *gpu.Buffer,
 
 pub fn init(app: *App) !void {
     try core.init(.{});
 
+    app.app_timer = try core.Timer.start();
+    app.title_timer = try core.Timer.start();
+
     const shader_module = core.device.createShaderModuleWGSL("shader.wgsl", @embedFile("shader.wgsl"));
     defer shader_module.release();
 
-    const blend = gpu.BlendState{};
+    // Set up rendering pipeline.
-    const color_target = gpu.ColorTargetState{
+    app.pipeline = core.device.createRenderPipeline(&.{
-        .format = core.descriptor.format,
+        .vertex = gpu.VertexState.init(.{
-        .blend = &blend,
-        .write_mask = gpu.ColorWriteMaskFlags.all,
-    };
-    const fragment = gpu.FragmentState.init(.{
-        .module = shader_module,
-        .entry_point = "frag_main",
-        .targets = &.{color_target},
-    });
-    const pipeline_descriptor = gpu.RenderPipeline.Descriptor{
-        .vertex = gpu.VertexState{
             .module = shader_module,
             .entry_point = "vertex_main",
-        },
+            .buffers = &.{
-        .fragment = &fragment,
+                gpu.VertexBufferLayout.init(.{
-    };
+                    .array_stride = @sizeOf(VertexData),
-
+                    .step_mode = .vertex,
-    app.app_timer = try core.Timer.start();
+                    .attributes = &.{
-    app.title_timer = try core.Timer.start();
+                        .{ .format = .float32x3, .shader_location = 0, .offset = @offsetOf(VertexData, "position") },
-
+                        .{ .format = .float32x3, .shader_location = 1, .offset = @offsetOf(VertexData, "color") },
-    app.pipeline = core.device.createRenderPipeline(&pipeline_descriptor);
+                    },
+                }),
+            },
+        }),
+        .fragment = &gpu.FragmentState.init(.{
+            .module = shader_module,
+            .entry_point = "frag_main",
+            .targets = &.{.{ .format = core.descriptor.format }},
+        }),
+    });
 
+    // Set up uniform buffer and bind group.
     app.mvp_uniform_buffer = core.device.createBuffer(&.{
         .usage = .{ .copy_dst = true, .uniform = true },
         .size = @sizeOf(zm.Mat),
@@ -59,13 +69,40 @@ pub fn init(app: *App) !void {
             },
         }),
     );
+
+    // Set up vertex buffer, containing the vertex data we want to draw.
+    // `vertices` contains three separate triangles, each with a different color.
+    const vertices = [_]VertexData{
+        .{ .position = .{ -1.0, 0.5 + 0.25, 0.0 }, .color = .{ 1.0, 0.0, 0.0 } },
+        .{ .position = .{ -1.5, -0.5 + 0.25, 0.0 }, .color = .{ 1.0, 0.0, 0.0 } },
+        .{ .position = .{ -0.5, -0.5 + 0.25, 0.0 }, .color = .{ 1.0, 0.0, 0.0 } },
+
+        .{ .position = .{ 0.0, 0.5 - 0.25, 0.0 }, .color = .{ 0.0, 1.0, 0.0 } },
+        .{ .position = .{ -0.5, -0.5 - 0.25, 0.0 }, .color = .{ 0.0, 1.0, 0.0 } },
+        .{ .position = .{ 0.5, -0.5 - 0.25, 0.0 }, .color = .{ 0.0, 1.0, 0.0 } },
+
+        .{ .position = .{ 1.0, 0.5, 0.0 }, .color = .{ 0.0, 0.0, 1.0 } },
+        .{ .position = .{ 0.5, -0.5, 0.0 }, .color = .{ 0.0, 0.0, 1.0 } },
+        .{ .position = .{ 1.5, -0.5, 0.0 }, .color = .{ 0.0, 0.0, 1.0 } },
+    };
+    app.vertex_count = vertices.len;
+    app.vertex_buffer = core.device.createBuffer(&.{
+        .size = app.vertex_count * @sizeOf(VertexData),
+        .usage = .{ .vertex = true, .copy_dst = true },
+        .mapped_at_creation = .false,
+    });
+    // Upload vertex buffer to the GPU.
+    core.queue.writeBuffer(app.vertex_buffer, 0, &vertices);
 }
 
 pub fn deinit(app: *App) void {
+    // Using `defer` here, so we can specify them
+    // in the order they were created in `init`.
     defer core.deinit();
     defer app.pipeline.release();
     defer app.mvp_uniform_buffer.release();
     defer app.mvp_bind_group.release();
+    defer app.vertex_buffer.release();
 }
 
 pub fn update(app: *App) !bool {
@@ -101,14 +138,13 @@ pub fn update(app: *App) !bool {
     // Once rendering is done (hence `defer`), swap back buffer to the front to display.
     defer core.swap_chain.present();
 
-    const color_attachment = gpu.RenderPassColorAttachment{
-        .view = back_buffer_view,
-        .clear_value = std.mem.zeroes(gpu.Color),
-        .load_op = .clear,
-        .store_op = .store,
-    };
     const render_pass_info = gpu.RenderPassDescriptor.init(.{
-        .color_attachments = &.{color_attachment},
+        .color_attachments = &.{.{
+            .view = back_buffer_view,
+            .clear_value = std.mem.zeroes(gpu.Color),
+            .load_op = .clear,
+            .store_op = .store,
+        }},
     });
 
     // Create a `WGPUCommandEncoder` which provides an interface for recording GPU commands.
@@ -124,9 +160,10 @@ pub fn update(app: *App) !bool {
 
         pass.setPipeline(app.pipeline);
         pass.setBindGroup(0, app.mvp_bind_group, &.{});
+        pass.setVertexBuffer(0, app.vertex_buffer, 0, app.vertex_count * @sizeOf(VertexData));
 
-        // Draw three triangles with the help of a specialized shader.
+        // Draw the vertices in `vertex_buffer`.
-        pass.draw(9, 1, 0, 0);
+        pass.draw(app.vertex_count, 1, 0, 0);
     }
 
     // Finish recording commands, creating a `WGPUCommandBuffer`.

src/shader.wgsl

@@ -1,5 +1,10 @@
 @group(0) @binding(0) var<uniform> mvp_matrix: mat4x4<f32>;
 
+struct VertexInput {
+    @location(0) position: vec3<f32>,
+    @location(1) color: vec3<f32>,
+};
+
 struct VertexOutput {
     @builtin(position) position: vec4<f32>,
     @location(0) color: vec4<f32>,
@@ -9,31 +14,10 @@ struct FragmentOutput {
     @location(0) pixel_color: vec4<f32>
 };
 
-@vertex fn vertex_main(
+@vertex fn vertex_main(in: VertexInput) -> VertexOutput {
-    @builtin(vertex_index) index: u32
-) -> VertexOutput {
-    let color = array<vec3<f32>, 3>(
-        vec3<f32>(1.0, 0.0, 0.0),
-        vec3<f32>(0.0, 1.0, 0.0),
-        vec3<f32>(0.0, 0.0, 1.0),
-    );
-    let pos = array<vec2<f32>, 9>(
-        vec2<f32>(-1.0,  0.5 + 0.25),
-        vec2<f32>(-1.5, -0.5 + 0.25),
-        vec2<f32>(-0.5, -0.5 + 0.25),
-
-        vec2<f32>( 0.0,  0.5 - 0.25),
-        vec2<f32>(-0.5, -0.5 - 0.25),
-        vec2<f32>( 0.5, -0.5 - 0.25),
-
-        vec2<f32>( 1.0,  0.5),
-        vec2<f32>( 0.5, -0.5),
-        vec2<f32>( 1.5, -0.5),
-    );
-
     var out: VertexOutput;
-    out.position = vec4<f32>(pos[index], 0.0, 1.0) * mvp_matrix;
+    out.position = vec4<f32>(in.position, 1.0) * mvp_matrix;
-    out.color    = vec4<f32>(color[index / 3], 1.0);
+    out.color    = vec4<f32>(in.color, 1.0);
     return out;
 }