src/main.zig

@@ -16,10 +16,7 @@ app_timer: core.Timer,
 title_timer: core.Timer,
 
 pub fn init(app: *App) !void {
-    try core.init(.{
+    try core.init(.{});
-        // Request high performance = prefer dedicated GPU when available.
-        .power_preference = .high_performance,
-    });
 
     // Set up a "general purpose allocator" that will handle allocations for
     // the lifetime of the application, for which a more specific allocation

src/renderer.zig

@@ -13,11 +13,23 @@ const primitives = @import("./primitives.zig");
 const VertexData = primitives.VertexData;
 const PrimitiveData = primitives.PrimitiveData;
 
+/// Holds information about how a perticular scene should be rendered.
+const SceneUniformBuffer = struct {
+    view_proj_matrix: Mat,
+};
+
+/// Holds information about where and how an object should be rendered.
+const ObjectUniformBuffer = struct {
+    model_matrix: Mat,
+    color: [3]f32,
+};
+
 /// Holds data needed to render an object in a rendering pass.
 const ObjectData = struct {
-    /// Bind group which associates model-related buffers with parameters
+    /// Reference to data stored on the GPU of type `ObjectUniformBuffer`.
-    /// in our shader. This one is accessible via `@group(1)` in our shader.
+    uniform_buffer: *gpu.Buffer,
-    model_bind_group: *gpu.BindGroup,
+    /// Bind group used to associate the buffer to the `object` shader parameter.
+    uniform_bind_group: *gpu.BindGroup,
     /// Reference to the primitive (shape or model) to render for this object.
     primitive: *PrimitiveData,
 };
@@ -27,8 +39,8 @@ const Renderer = @This();
 app: *App,
 
 pipeline: *gpu.RenderPipeline,
-view_proj_buffer: *gpu.Buffer,
+scene_uniform_buffer: *gpu.Buffer,
-camera_bind_group: *gpu.BindGroup,
+scene_uniform_bind_group: *gpu.BindGroup,
 
 depth_texture: ?*gpu.Texture = null,
 depth_texture_view: ?*gpu.TextureView = null,
@@ -37,42 +49,11 @@ primitive_data: []PrimitiveData,
 object_data: []ObjectData,
 
 pub fn init(app: *App) !*Renderer {
-    // A string buffer used to format objects' labels.
-    var label_buffer: [256]u8 = undefined;
-
     const shader_module = core.device.createShaderModuleWGSL("shader.wgsl", @embedFile("shader.wgsl"));
     defer shader_module.release();
 
-    // Define layouts for our bind groups and pipeline.
-    // This helps find errors with missing or mismatching shader properties.
-    var camera_bind_group_layout = core.device.createBindGroupLayout(&gpu.BindGroupLayout.Descriptor.init(.{
-        .label = "Camera Bind Group Layout",
-        .entries = &.{
-            gpu.BindGroupLayout.Entry.buffer(0, .{ .vertex = true }, .uniform, false, 0),
-        },
-    }));
-    defer camera_bind_group_layout.release();
-
-    var model_bind_group_layout = core.device.createBindGroupLayout(&gpu.BindGroupLayout.Descriptor.init(.{
-        .label = "Model Bind Group Layout",
-        .entries = &.{
-            gpu.BindGroupLayout.Entry.buffer(0, .{ .vertex = true }, .uniform, false, 0),
-            gpu.BindGroupLayout.Entry.buffer(1, .{ .vertex = true }, .uniform, false, 0),
-        },
-    }));
-    defer model_bind_group_layout.release();
-
-    const pipeline_layout = core.device.createPipelineLayout(&gpu.PipelineLayout.Descriptor.init(.{
-        .bind_group_layouts = &.{
-            camera_bind_group_layout,
-            model_bind_group_layout,
-        },
-    }));
-    defer pipeline_layout.release();
-
     // Set up rendering pipeline.
     const pipeline = core.device.createRenderPipeline(&.{
-        .layout = pipeline_layout,
         .vertex = gpu.VertexState.init(.{
             .module = shader_module,
             .entry_point = "vertex_main",
@@ -104,17 +85,10 @@ pub fn init(app: *App) !*Renderer {
     });
 
     // Set up scene related uniform buffers and bind groups.
-    const view_proj_buffer = createAndWriteBuffer(zm.Mat, &.{zm.identity()}, .{ .copy_dst = true, .uniform = true });
+    const scene_uniform = createAndWriteUniformBuffer(
-
+        pipeline.getBindGroupLayout(0),
-    // "Bind groups" are used to associate data from buffers with shader parameters.
+        SceneUniformBuffer{ .view_proj_matrix = zm.identity() },
-    // So for example the `camera_bind_group` is accessible via `@group(0)` in our shader.
+    );
-    const camera_bind_group = core.device.createBindGroup(&gpu.BindGroup.Descriptor.init(.{
-        .label = "Camera Bind Group",
-        .layout = camera_bind_group_layout,
-        .entries = &.{
-            gpu.BindGroup.Entry.buffer(0, view_proj_buffer, 0, @sizeOf(zm.Mat)),
-        },
-    }));
 
     // Set up the primitives we want to render.
     //
@@ -154,27 +128,19 @@ pub fn init(app: *App) !*Renderer {
 
         // 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 model_color = .{
+        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 model_matrix_buffer = createAndWriteBuffer(zm.Mat, &.{zm.transpose(model_matrix)}, .{ .copy_dst = true, .uniform = true });
+        const object_uniform = createAndWriteUniformBuffer(
-        defer model_matrix_buffer.release();
+            pipeline.getBindGroupLayout(1),
-
+            ObjectUniformBuffer{
-        const model_color_buffer = createAndWriteBuffer([3]f32, &.{model_color}, .{ .copy_dst = true, .uniform = true });
+                .model_matrix = zm.transpose(model_matrix),
-        defer model_color_buffer.release();
+                .color = color,
-
-        const model_bind_group_label = try std.fmt.bufPrintZ(&label_buffer, "Model Bind Group {d}", .{i});
-        const model_bind_group = core.device.createBindGroup(&gpu.BindGroup.Descriptor.init(.{
-            .label = model_bind_group_label,
-            .layout = model_bind_group_layout,
-            .entries = &.{
-                gpu.BindGroup.Entry.buffer(0, model_matrix_buffer, 0, @sizeOf(zm.Mat)),
-                gpu.BindGroup.Entry.buffer(1, model_color_buffer, 0, @sizeOf([3]f32)),
             },
-        }));
+        );
 
         // Pick a "random" primitive to use for this object.
         const primitive_index = app.random.int(usize) % primitive_data.len;
@@ -183,7 +149,8 @@ pub fn init(app: *App) !*Renderer {
         // The `*object` syntax gets us a pointer to each element in the
         // `object_data` slice, allowing us to override it within the loop.
         object.* = .{
-            .model_bind_group = model_bind_group,
+            .uniform_buffer = object_uniform.buffer,
+            .uniform_bind_group = object_uniform.bind_group,
             .primitive = primitive,
         };
     }
@@ -192,8 +159,8 @@ pub fn init(app: *App) !*Renderer {
     result.* = .{
         .app = app,
         .pipeline = pipeline,
-        .view_proj_buffer = view_proj_buffer,
+        .scene_uniform_buffer = scene_uniform.buffer,
-        .camera_bind_group = camera_bind_group,
+        .scene_uniform_bind_group = scene_uniform.bind_group,
         .primitive_data = primitive_data,
         .object_data = object_data,
     };
@@ -211,8 +178,8 @@ pub fn deinit(self: *Renderer) void {
     defer self.app.allocator.destroy(self);
 
     defer self.pipeline.release();
-    defer self.view_proj_buffer.release();
+    defer self.scene_uniform_buffer.release();
-    defer self.camera_bind_group.release();
+    defer self.scene_uniform_bind_group.release();
 
     defer self.app.allocator.free(self.primitive_data);
     defer for (self.primitive_data) |p| {
@@ -221,7 +188,8 @@ pub fn deinit(self: *Renderer) void {
     };
     defer self.app.allocator.free(self.object_data);
     defer for (self.object_data) |o| {
-        o.model_bind_group.release();
+        o.uniform_buffer.release();
+        o.uniform_bind_group.release();
     };
 
     defer if (self.depth_texture) |t| t.release();
@@ -281,11 +249,11 @@ pub fn update(self: *Renderer) void {
     defer encoder.release();
 
     // Write to the scene uniform buffer for this set of commands.
-    encoder.writeBuffer(self.view_proj_buffer, 0, &[_]zm.Mat{
+    encoder.writeBuffer(self.scene_uniform_buffer, 0, &[_]SceneUniformBuffer{.{
         // All matrices the GPU has to work with need to be transposed,
         // because WebGPU uses column-major matrices while zmath is row-major.
-        zm.transpose(view_proj_matrix),
+        .view_proj_matrix = zm.transpose(view_proj_matrix),
-    });
+    }});
 
     {
         const pass = encoder.beginRenderPass(&render_pass_info);
@@ -293,17 +261,17 @@ pub fn update(self: *Renderer) void {
         defer pass.end();
 
         pass.setPipeline(self.pipeline);
-        pass.setBindGroup(0, self.camera_bind_group, &.{});
+        pass.setBindGroup(0, self.scene_uniform_bind_group, &.{});
 
         for (self.object_data) |object| {
-            // Set the vertex and index buffer used to render this
+            // Set the vertex and index buffer used to render this object
-            // object to the ones from the primitive it wants to use.
+            // to the primitive it wants to use (either triangle or square).
             const prim = object.primitive;
             pass.setVertexBuffer(0, prim.vertex_buffer, 0, prim.vertex_count * @sizeOf(VertexData));
             pass.setIndexBuffer(prim.index_buffer, .uint32, 0, prim.index_count * @sizeOf(u32));
 
-            // Set the bind group for the object we want to render.
+            // Set the bind group for an object we want to render.
-            pass.setBindGroup(1, object.model_bind_group, &.{});
+            pass.setBindGroup(1, object.uniform_bind_group, &.{});
 
             // Draw a number of triangles as specified in the index buffer.
             pass.drawIndexed(prim.index_count, 1, 0, 0, 0);
@@ -327,7 +295,6 @@ pub fn recreateDepthTexture(self: *Renderer) void {
     if (self.depth_texture_view) |v| v.release();
 
     self.depth_texture = core.device.createTexture(&.{
-        .label = "Depth Texture",
         .usage = .{ .render_attachment = true },
         .size = .{ .width = core.descriptor.width, .height = core.descriptor.height },
         .format = .depth24_plus,
@@ -335,6 +302,30 @@ pub fn recreateDepthTexture(self: *Renderer) void {
     self.depth_texture_view = self.depth_texture.?.createView(null);
 }
 
+/// 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.
+pub 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.
 pub fn createAndWriteBuffer(

src/shader.wgsl

@@ -1,7 +1,14 @@
-@group(0) @binding(0) var<uniform> view_proj_matrix: mat4x4<f32>;
+struct SceneUniformBuffer {
+    view_proj_matrix: mat4x4<f32>,
+};
+
+struct ObjectUniformBuffer {
+    model_matrix: mat4x4<f32>,
+    color: vec3<f32>,
+};
 
-@group(1) @binding(0) var<uniform> model_matrix: mat4x4<f32>;
+@group(0) @binding(0) var<uniform> scene: SceneUniformBuffer;
-@group(1) @binding(1) var<uniform> model_color: vec3<f32>;
+@group(1) @binding(0) var<uniform> object: ObjectUniformBuffer;
 
 struct VertexInput {
     @location(0) position: vec3<f32>,
@@ -18,9 +25,9 @@ struct FragmentOutput {
 
 @vertex fn vertex_main(in: VertexInput) -> VertexOutput {
     var out: VertexOutput;
-    let mvp = model_matrix * view_proj_matrix;
+    let mvp = object.model_matrix * scene.view_proj_matrix;
     out.position = vec4<f32>(in.position, 1.0) * mvp;
-    out.color    = vec4<f32>(model_color, 1.0);
+    out.color    = vec4<f32>(object.color, 1.0);
     return out;
 }