Add depth testing

src/main.zig

@@ -1,4 +1,6 @@
 const std = @import("std");
+const GeneralPurposeAllocator = std.heap.GeneralPurposeAllocator(.{});
+
 const core = @import("mach-core");
 const gpu = core.gpu;
 
@@ -51,21 +53,52 @@ const PrimitiveData = struct {
 
 pub const App = @This();
 
+gpa: GeneralPurposeAllocator,
+allocator: std.mem.Allocator,
+random: std.rand.Random,
+
 app_timer: core.Timer,
 title_timer: core.Timer,
 
+depth_texture: *gpu.Texture,
+depth_texture_view: *gpu.TextureView,
 pipeline: *gpu.RenderPipeline,
 scene_uniform_buffer: *gpu.Buffer,
 scene_uniform_bind_group: *gpu.BindGroup,
-object_data: [3]ObjectData,
+primitives: []PrimitiveData,
-primitives: [2]PrimitiveData,
+object_data: []ObjectData,
 
 pub fn init(app: *App) !void {
     try core.init(.{});
 
+    // Set up a "general purpose allocator" that will handle allocations for
+    // the lifetime of the application, for which a more specific allocation
+    // strategy is not necessary.
+    //
+    // Here, `gpa` is an instance of this allocator, which handles the
+    // allocation logic, while `allocator` is the interface through which
+    // functions such as `alloc` and `free` are called.
+    app.gpa = GeneralPurposeAllocator{};
+    app.allocator = app.gpa.allocator();
+
+    // Create a pseudo-random number generator, but initialize it with
+    // a constant seed so we always get the same result when launching.
+    var prng = std.rand.DefaultPrng.init(0);
+    app.random = prng.random();
+
     app.app_timer = try core.Timer.start();
     app.title_timer = try core.Timer.start();
 
+    // Create a depth texture. This is used to ensure that when things are
+    // rendered, an object behind another won't draw over one in front, simply
+    // because it was rendered at a later point in time.
+    app.depth_texture = core.device.createTexture(&.{
+        .usage = .{ .render_attachment = true },
+        .size = .{ .width = core.descriptor.width, .height = core.descriptor.height },
+        .format = .depth24_plus,
+    });
+    app.depth_texture_view = app.depth_texture.createView(null);
+
     const shader_module = core.device.createShaderModuleWGSL("shader.wgsl", @embedFile("shader.wgsl"));
     defer shader_module.release();
 
@@ -84,16 +117,21 @@ pub fn init(app: *App) !void {
                 }),
             },
         }),
-        .fragment = &gpu.FragmentState.init(.{
-            .module = shader_module,
-            .entry_point = "frag_main",
-            .targets = &.{.{ .format = core.descriptor.format }},
-        }),
         .primitive = .{
             .topology = .triangle_list,
             .front_face = .ccw,
             .cull_mode = .back,
         },
+        .depth_stencil = &.{
+            .format = .depth24_plus,
+            .depth_write_enabled = .true,
+            .depth_compare = .less,
+        },
+        .fragment = &gpu.FragmentState.init(.{
+            .module = shader_module,
+            .entry_point = "frag_main",
+            .targets = &.{.{ .format = core.descriptor.format }},
+        }),
     });
 
     // Set up scene related uniform buffers and bind groups.
@@ -107,44 +145,8 @@ pub fn init(app: *App) !void {
         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);
-
-        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,
-            };
-        }
-    }
-
     // Set up the primitives we want to render.
+    app.primitives = try app.allocator.alloc(PrimitiveData, 2);
     // Triangle
     app.primitives[0] = createPrimitive(
         &.{
@@ -186,6 +188,57 @@ pub fn init(app: *App) !void {
             3, 2, 1,
         },
     );
+
+    // 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 grid_size = 8;
+
+        // Allocate a slice to store as many ObjectData as we want to create.
+        //
+        // Using a slice instead of an array means that we could change how
+        // many object we want to render at compile time, however it requires
+        // allocating, and later freeing, memory to store the slice.
+        app.object_data = try app.allocator.alloc(ObjectData, grid_size * grid_size);
+
+        // Note that for loops in Zig are a little different than you might
+        // know from other languages. They only look over arrays, slices,
+        // tuples and ranges, potentially multiple at once.
+        for (app.object_data, 0..) |*object, i| {
+            const grid_max: f32 = @floatFromInt(grid_size - 1);
+            const x = @as(f32, @floatFromInt(i % grid_size)) / grid_max;
+            const z = @as(f32, @floatFromInt(i / grid_size)) / grid_max;
+
+            const rotation = zm.rotationY(std.math.tau * (x + z) / 2.0);
+            const translation = zm.translation((x - 0.5) * grid_size, 0, (z - 0.5) * grid_size);
+            const model_matrix = zm.mul(rotation, translation);
+
+            // Make the object have a color depending on its location in the grid.
+            // These values are layed out so each corner is red, green, blue and black.
+            const color = .{
+                std.math.clamp(1.0 - x - z, 0.0, 1.0),
+                std.math.clamp(x - z, 0.0, 1.0),
+                std.math.clamp(z - x, 0.0, 1.0),
+            };
+
+            const result = createAndWriteUniformBuffer(
+                app.pipeline.getBindGroupLayout(1),
+                ObjectUniformBuffer{
+                    .model_matrix = zm.transpose(model_matrix),
+                    .color = color,
+                },
+            );
+
+            // The `*object` syntax gets us a pointer to each element in the
+            // `object_data` slice, allowing us to override it within the loop.
+            object.* = .{
+                .uniform_buffer = result.buffer,
+                .uniform_bind_group = result.bind_group,
+                .primitive_index = app.random.int(usize) % app.primitives.len,
+            };
+        }
+    }
 }
 
 /// Creates a buffer on the GPU to store uniform parameter information as
@@ -246,17 +299,22 @@ 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.gpa.deinit(); // TODO: Check for memory leaks?
+    defer app.depth_texture.release();
+    defer app.depth_texture_view.release();
     defer app.pipeline.release();
     defer app.scene_uniform_buffer.release();
     defer app.scene_uniform_bind_group.release();
-    defer for (app.object_data) |o| {
+    defer app.allocator.free(app.primitives);
-        o.uniform_buffer.release();
-        o.uniform_bind_group.release();
-    };
     defer for (app.primitives) |p| {
         p.vertex_buffer.release();
         p.index_buffer.release();
     };
+    defer app.allocator.free(app.object_data);
+    defer for (app.object_data) |o| {
+        o.uniform_buffer.release();
+        o.uniform_bind_group.release();
+    };
 }
 
 pub fn update(app: *App) !bool {
@@ -273,16 +331,18 @@ pub fn update(app: *App) !bool {
     // TODO: Actually implement camera transform instead of hardcoding a look-at matrix.
     // const view_matrix = zm.inverse(app.camera_transform);
     const time = app.app_timer.read();
-    const x = @cos(time * std.math.tau / 10);
+    const camera_distance = 8.0;
-    const y = @sin(time * std.math.tau / 10);
+    const x = @cos(time * std.math.tau / 20) * camera_distance;
-    const view_matrix = zm.lookAtLh(vec(x, y, -2, 1), vec(0, 0, 0, 1), vec(0, 1, 0, 1));
+    const z = @sin(time * std.math.tau / 20) * camera_distance;
+    const camera_pos = vec(x, 2.0, z, 1.0);
+    const view_matrix = zm.lookAtLh(camera_pos, vec(0, 0, 0, 1), vec(0, 1, 0, 1));
 
     // Set up a projection matrix using the size of the window.
     // The perspective projection will make things further away appear smaller.
     const width: f32 = @floatFromInt(core.descriptor.width);
     const height: f32 = @floatFromInt(core.descriptor.height);
     const field_of_view = std.math.degreesToRadians(f32, 45.0);
-    const proj_matrix = zm.perspectiveFovLh(field_of_view, width / height, 0.1, 10);
+    const proj_matrix = zm.perspectiveFovLh(field_of_view, width / height, 0.05, 80.0);
 
     const view_proj_matrix = zm.mul(view_matrix, proj_matrix);
 
@@ -299,6 +359,12 @@ pub fn update(app: *App) !bool {
             .load_op = .clear,
             .store_op = .store,
         }},
+        .depth_stencil_attachment = &.{
+            .view = app.depth_texture_view,
+            .depth_load_op = .clear,
+            .depth_store_op = .store,
+            .depth_clear_value = 1.0,
+        },
     });
 
     // Create a `WGPUCommandEncoder` which provides an interface for recording GPU commands.