Consolidate object rendering information

src/main.zig

@@ -6,11 +6,6 @@ const zm = @import("zmath");
 const vec = zm.f32x4;
 const Mat = zm.Mat;
 
-/// Describes the layout of each vertex that a primitive is made of.
-const VertexData = struct {
-    position: [3]f32,
-};
-
 /// Holds information about how a perticular scene should be rendered.
 const SceneUniformBuffer = struct {
     view_proj_matrix: zm.Mat,
@@ -22,6 +17,38 @@ const ObjectUniformBuffer = struct {
     color: [3]f32,
 };
 
+/// Holds data on what is needed to render an object in a rendering pass.
+const ObjectData = struct {
+    /// Reference to data stored on the GPU of type `ObjectUniformBuffer`.
+    uniform_buffer: *gpu.Buffer,
+    /// Bind group used to associate the buffer to the `object` shader parameter.
+    uniform_bind_group: *gpu.BindGroup,
+    /// Index into `primitives` to specify which primitive to render.
+    primitive_index: usize,
+};
+
+/// Describes the layout of each vertex that a primitive is made of.
+const VertexData = struct {
+    position: [3]f32,
+};
+
+/// Contains the data to render a primitive (3D shape or model).
+const PrimitiveData = struct {
+    /// Vertices describe the "points" that a primitive is made out of.
+    /// This buffer is of type `[]VertexData`.
+    vertex_buffer: *gpu.Buffer,
+    vertex_count: u32,
+
+    /// Indices describe what vertices make up the triangles in a primitive.
+    /// This buffer is of type `[]u32`.
+    index_buffer: *gpu.Buffer,
+    index_count: u32,
+
+    // For example, `vertex_buffer` may have 4 points defining a square, but
+    // since it needs to be rendered using 2 triangles, `index_buffer` will
+    // contain 6 entries, `0, 1, 2` and `3, 2, 1` making up one triangle each.
+};
+
 pub const App = @This();
 
 app_timer: core.Timer,
@@ -29,11 +56,9 @@ title_timer: core.Timer,
 
 pipeline: *gpu.RenderPipeline,
 scene_uniform_buffer: *gpu.Buffer,
-scene_bind_group: *gpu.BindGroup,
-object_uniform_buffers: [3]*gpu.Buffer,
-object_bind_groups: [3]*gpu.BindGroup,
-vertex_count: u32,
-vertex_buffer: *gpu.Buffer,
+scene_uniform_bind_group: *gpu.BindGroup,
+object_data: [3]ObjectData,
+primitives: [2]PrimitiveData,
 
 pub fn init(app: *App) !void {
     try core.init(.{});
@@ -64,69 +89,157 @@ pub fn init(app: *App) !void {
             .entry_point = "frag_main",
             .targets = &.{.{ .format = core.descriptor.format }},
         }),
+        .primitive = .{
+            .topology = .triangle_list,
+            .front_face = .ccw,
+            .cull_mode = .back,
+        },
     });
 
-    // Set up uniform buffers and bind groups.
+    // Set up scene related uniform buffers and bind groups.
+    {
+        const result = createAndWriteUniformBuffer(
+            app.pipeline.getBindGroupLayout(0),
+            SceneUniformBuffer{ .view_proj_matrix = zm.identity() },
+        );
 
-    // The "scene" uniform contains information for each rendered scene.
-    app.scene_uniform_buffer = core.device.createBuffer(&.{
-        .usage = .{ .copy_dst = true, .uniform = true },
-        .size = @sizeOf(SceneUniformBuffer),
-        .mapped_at_creation = .false,
-    });
-    app.scene_bind_group = core.device.createBindGroup(
-        &gpu.BindGroup.Descriptor.init(.{
-            .layout = app.pipeline.getBindGroupLayout(0),
-            .entries = &.{
-                gpu.BindGroup.Entry.buffer(0, app.scene_uniform_buffer, 0, @sizeOf(SceneUniformBuffer)),
-            },
-        }),
-    );
+        app.scene_uniform_buffer = result.buffer;
+        app.scene_uniform_bind_group = result.bind_group;
+    }
+
+    // Set up object related uniform buffers and bind groups.
+    // This uploads data to the GPU about all the object we
+    // want to render, such as their location and color.
+    {
+        const ObjectDescription = struct { pos: [3]f32, color: [3]f32, prim: usize };
+        const object_desc = [_]ObjectDescription{
+            // zig fmt: off
+            .{ .pos = .{ -1.25,  0.25, 0.0 }, .color = .{ 1.0, 0.0, 0.0 }, .prim = 0 },
+            .{ .pos = .{  0.0 , -0.25, 0.0 }, .color = .{ 0.0, 1.0, 0.0 }, .prim = 1 },
+            .{ .pos = .{  1.25,  0.0 , 0.0 }, .color = .{ 0.0, 0.0, 1.0 }, .prim = 0 },
+            // zig fmt: on
+        };
+
+        // The objects are rotated 180° to face the camera, or else we
+        // would see the back side of the triangles, which are culled.
+        const rotation = zm.rotationY(std.math.tau / 2.0);
 
-    // The "object" uniforms contain information about how to render each object in a scene.
-    for (0..3) |i| {
-        app.object_uniform_buffers[i] = core.device.createBuffer(&.{
-            .usage = .{ .copy_dst = true, .uniform = true },
-            .size = @sizeOf(ObjectUniformBuffer),
-            .mapped_at_creation = .false,
-        });
-        app.object_bind_groups[i] = core.device.createBindGroup(
-            &gpu.BindGroup.Descriptor.init(.{
-                .layout = app.pipeline.getBindGroupLayout(1),
-                .entries = &.{
-                    gpu.BindGroup.Entry.buffer(0, app.object_uniform_buffers[i], 0, @sizeOf(ObjectUniformBuffer)),
+        for (object_desc, &app.object_data) |desc, *object| {
+            const translation = zm.translation(desc.pos[0], desc.pos[1], desc.pos[2]);
+            const model_matrix = zm.mul(rotation, translation);
+
+            const result = createAndWriteUniformBuffer(
+                app.pipeline.getBindGroupLayout(1),
+                ObjectUniformBuffer{
+                    .model_matrix = zm.transpose(model_matrix),
+                    .color = desc.color,
                 },
-            }),
-        );
+            );
+
+            object.* = .{
+                .uniform_buffer = result.buffer,
+                .uniform_bind_group = result.bind_group,
+                .primitive_index = desc.prim,
+            };
+        }
     }
-    // Upload object information (model matrix + color) to the GPU.
-    core.queue.writeBuffer(app.object_uniform_buffers[0], 0, &[_]ObjectUniformBuffer{.{
-        .model_matrix = zm.transpose(zm.translation(-1.0, 0.25, 0.0)),
-        .color = .{ 1.0, 0.0, 0.0 },
-    }});
-    core.queue.writeBuffer(app.object_uniform_buffers[1], 0, &[_]ObjectUniformBuffer{.{
-        .model_matrix = zm.transpose(zm.translation(0.0, -0.25, 0.0)),
-        .color = .{ 0.0, 1.0, 0.0 },
-    }});
-    core.queue.writeBuffer(app.object_uniform_buffers[2], 0, &[_]ObjectUniformBuffer{.{
-        .model_matrix = zm.transpose(zm.translation(1.0, 0.0, 0.0)),
-        .color = .{ 0.0, 0.0, 1.0 },
-    }});
 
-    // Set up vertex buffer, containing the vertex data we want to draw.
-    const vertices = [_]VertexData{
-        .{ .position = .{ 0.0, 0.5, 0.0 } },
-        .{ .position = .{ -0.5, -0.5, 0.0 } },
-        .{ .position = .{ 0.5, -0.5, 0.0 } },
-    };
-    app.vertex_count = vertices.len;
-    app.vertex_buffer = core.device.createBuffer(&.{
-        .size = app.vertex_count * @sizeOf(VertexData),
-        .usage = .{ .vertex = true, .copy_dst = true },
+    // Set up the primitives we want to render.
+    // Triangle
+    app.primitives[0] = createPrimitive(
+        &.{
+            // zig fmt: off
+            .{ .position = .{  0.0,  0.5, 0.0 } },
+            .{ .position = .{  0.5, -0.5, 0.0 } },
+            .{ .position = .{ -0.5, -0.5, 0.0 } },
+            // zig fmt: on
+        },
+        // Note that the back faces of triangles are "culled", and thus not visible.
+        // We need to take care to specify the vertices in counter-clock orientation.
+        &.{
+            0, 1, 2,
+        },
+    );
+    // Square
+    app.primitives[1] = createPrimitive(
+        // A square is made up of 4 vertices.
+        //   0--2
+        //   |  |
+        //   |  |
+        //   1--3
+        &.{
+            // zig fmt: off
+            .{ .position = .{ -0.5, -0.5, 0.0 } },
+            .{ .position = .{ -0.5,  0.5, 0.0 } },
+            .{ .position = .{  0.5, -0.5, 0.0 } },
+            .{ .position = .{  0.5,  0.5, 0.0 } },
+            // zig fmt: on
+        },
+        // But it has to be split up into 2 triangles,
+        // specified in a counter-clockwise orientation.
+        //   0--2  4
+        //   | /  /|
+        //   |/  / |
+        //   1  5--3
+        &.{
+            0, 1, 2,
+            3, 2, 1,
+        },
+    );
+}
+
+/// Creates a buffer on the GPU to store uniform parameter information as
+/// well as a bind group with the specified layout pointing to that buffer.
+/// Additionally, immediately fills the buffer with the provided data.
+fn createAndWriteUniformBuffer(
+    layout: *gpu.BindGroupLayout,
+    data: anytype,
+) struct {
+    buffer: *gpu.Buffer,
+    bind_group: *gpu.BindGroup,
+} {
+    const T = @TypeOf(data);
+    const usage = gpu.Buffer.UsageFlags{ .copy_dst = true, .uniform = true };
+    const buffer = createAndWriteBuffer(T, &.{data}, usage);
+
+    // "Bind groups" are used to associate data from buffers with shader parameters.
+    // So for example the `scene_uniform_bind_group` is accessible via `scene` in our shader.
+    // Essentially, buffer = data, and bind group = binding parameter to that data.
+    const bind_group_entry = gpu.BindGroup.Entry.buffer(0, buffer, 0, @sizeOf(T));
+    const bind_group_desc = gpu.BindGroup.Descriptor.init(.{ .layout = layout, .entries = &.{bind_group_entry} });
+    const bind_group = core.device.createBindGroup(&bind_group_desc);
+
+    return .{ .buffer = buffer, .bind_group = bind_group };
+}
+
+/// Creates a buffer on the GPU with the specified usage
+/// flags and immediately fills it with the provided data.
+fn createAndWriteBuffer(
+    comptime T: type,
+    data: []const T,
+    usage: gpu.Buffer.UsageFlags,
+) *gpu.Buffer {
+    const buffer = core.device.createBuffer(&.{
+        .size = data.len * @sizeOf(T),
+        .usage = usage,
         .mapped_at_creation = .false,
     });
-    // Upload vertex buffer to the GPU.
-    core.queue.writeBuffer(app.vertex_buffer, 0, &vertices);
+    core.queue.writeBuffer(buffer, 0, data);
+    return buffer;
+}
+
+/// Creates a primitive from the provided vertices and indices,
+/// and uploads the buffers necessary to render it to the GPU.
+fn createPrimitive(
+    vertices: []const VertexData,
+    indices: []const u32,
+) PrimitiveData {
+    return .{
+        .vertex_buffer = createAndWriteBuffer(VertexData, vertices, .{ .vertex = true, .copy_dst = true }),
+        .vertex_count = @intCast(vertices.len),
+        .index_buffer = createAndWriteBuffer(u32, indices, .{ .index = true, .copy_dst = true }),
+        .index_count = @intCast(indices.len),
+    };
 }
 
 pub fn deinit(app: *App) void {
@@ -135,10 +248,15 @@ pub fn deinit(app: *App) void {
     defer core.deinit();
     defer app.pipeline.release();
     defer app.scene_uniform_buffer.release();
-    defer app.scene_bind_group.release();
-    defer for (app.object_uniform_buffers) |b| b.release();
-    defer for (app.object_bind_groups) |g| g.release();
-    defer app.vertex_buffer.release();
+    defer app.scene_uniform_bind_group.release();
+    defer for (app.object_data) |o| {
+        o.uniform_buffer.release();
+        o.uniform_bind_group.release();
+    };
+    defer for (app.primitives) |p| {
+        p.vertex_buffer.release();
+        p.index_buffer.release();
+    };
 }
 
 pub fn update(app: *App) !bool {
@@ -200,14 +318,21 @@ pub fn update(app: *App) !bool {
         defer pass.end();
 
         pass.setPipeline(app.pipeline);
-        pass.setBindGroup(0, app.scene_bind_group, &.{});
-        pass.setVertexBuffer(0, app.vertex_buffer, 0, app.vertex_count * @sizeOf(VertexData));
+        pass.setBindGroup(0, app.scene_uniform_bind_group, &.{});
+
+        for (app.object_data) |object| {
+            // Set the vertex and index buffer used to render this object
+            // to the primitive it wants to use (either triangle or square).
+            const primitive_index = object.primitive_index;
+            const primitive = app.primitives[primitive_index];
+            pass.setVertexBuffer(0, primitive.vertex_buffer, 0, primitive.vertex_count * @sizeOf(VertexData));
+            pass.setIndexBuffer(primitive.index_buffer, .uint32, 0, primitive.index_count * @sizeOf(u32));
 
-        for (app.object_bind_groups) |object_bind_group| {
             // Set the bind group for an object we want to render.
-            pass.setBindGroup(1, object_bind_group, &.{});
-            // Draw the vertices in `vertex_buffer`.
-            pass.draw(app.vertex_count, 1, 0, 0);
+            pass.setBindGroup(1, object.uniform_bind_group, &.{});
+
+            // Draw a number of triangles as specified in the index buffer.
+            pass.drawIndexed(primitive.index_count, 1, 0, 0, 0);
         }
     }