const std = @import("std"); const core = @import("mach-core"); const gpu = core.gpu; const zm = @import("zmath"); const vec = zm.f32x4; const Mat = zm.Mat; const App = @import("./main.zig"); 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 { /// 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, /// Reference to the primitive (shape or model) to render for this object. primitive: *PrimitiveData, }; const Renderer = @This(); app: *App, pipeline: *gpu.RenderPipeline, scene_uniform_buffer: *gpu.Buffer, scene_uniform_bind_group: *gpu.BindGroup, depth_texture: ?*gpu.Texture = null, depth_texture_view: ?*gpu.TextureView = null, primitive_data: []PrimitiveData, object_data: []ObjectData, pub fn init(app: *App) !*Renderer { const shader_module = core.device.createShaderModuleWGSL("shader.wgsl", @embedFile("shader.wgsl")); defer shader_module.release(); // Set up rendering pipeline. const pipeline = core.device.createRenderPipeline(&.{ .vertex = gpu.VertexState.init(.{ .module = shader_module, .entry_point = "vertex_main", .buffers = &.{ gpu.VertexBufferLayout.init(.{ .array_stride = @sizeOf(VertexData), .step_mode = .vertex, .attributes = &.{ .{ .format = .float32x3, .shader_location = 0, .offset = @offsetOf(VertexData, "position") }, }, }), }, }), .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. const scene_uniform = createAndWriteUniformBuffer( pipeline.getBindGroupLayout(0), SceneUniformBuffer{ .view_proj_matrix = zm.identity() }, ); // Set up the primitives we want to render. // // Using `dupe` to allocate a slice here allows easily adjusting the // primitives to use, without changing the type of `primitive_data`. const primitive_data = try app.allocator.dupe(PrimitiveData, &.{ // primitives.createTrianglePrimitive(1.0), // primitives.createSquarePrimitive(0.8), // primitives.createCirclePrimitive(0.5, 24), primitives.createCubePrimitive(0.65), primitives.createPyramidPrimitive(0.75), }); // 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. const 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 (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 object_uniform = createAndWriteUniformBuffer( pipeline.getBindGroupLayout(1), ObjectUniformBuffer{ .model_matrix = zm.transpose(model_matrix), .color = color, }, ); // Pick a "random" primitive to use for this object. const primitive_index = app.random.int(usize) % primitive_data.len; const primitive = &primitive_data[primitive_index]; // 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 = object_uniform.buffer, .uniform_bind_group = object_uniform.bind_group, .primitive = primitive, }; } const result = try app.allocator.create(Renderer); result.* = .{ .app = app, .pipeline = pipeline, .scene_uniform_buffer = scene_uniform.buffer, .scene_uniform_bind_group = scene_uniform.bind_group, .primitive_data = primitive_data, .object_data = object_data, }; // Initialize the depth texture. // This is called also whenever the window is resized. result.recreateDepthTexture(); return result; } pub fn deinit(self: *Renderer) void { // Using `defer` here, so we can specify them // in the order they were created in `init`. defer self.app.allocator.destroy(self); defer self.pipeline.release(); defer self.scene_uniform_buffer.release(); defer self.scene_uniform_bind_group.release(); defer self.app.allocator.free(self.primitive_data); defer for (self.primitive_data) |p| { p.vertex_buffer.release(); p.index_buffer.release(); }; defer self.app.allocator.free(self.object_data); defer for (self.object_data) |o| { o.uniform_buffer.release(); o.uniform_bind_group.release(); }; defer if (self.depth_texture) |t| t.release(); defer if (self.depth_texture_view) |v| v.release(); } pub fn resize(self: *Renderer) void { // Recreate depth texture with the proper size, otherwise // the application may crash when the window is resized. self.recreateDepthTexture(); } pub fn update(self: *Renderer) void { // Set up a view matrix from the camera transform. // This moves everything to be relative to the camera. // TODO: Actually implement camera transform instead of hardcoding a look-at matrix. // const view_matrix = zm.inverse(app.camera_transform); const time = self.app.app_timer.read(); const camera_distance = 8.0; const x = @cos(time * std.math.tau / 20) * camera_distance; 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.05, 80.0); const view_proj_matrix = zm.mul(view_matrix, proj_matrix); // Get back buffer texture to render to. const back_buffer_view = core.swap_chain.getCurrentTextureView().?; defer back_buffer_view.release(); // Once rendering is done (hence `defer`), swap back buffer to the front to display. defer core.swap_chain.present(); const render_pass_info = gpu.RenderPassDescriptor.init(.{ .color_attachments = &.{.{ .view = back_buffer_view, .clear_value = std.mem.zeroes(gpu.Color), .load_op = .clear, .store_op = .store, }}, .depth_stencil_attachment = &.{ .view = self.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. const encoder = core.device.createCommandEncoder(null); defer encoder.release(); // Write to the scene uniform buffer for this set of commands. 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. .view_proj_matrix = zm.transpose(view_proj_matrix), }}); { const pass = encoder.beginRenderPass(&render_pass_info); defer pass.release(); defer pass.end(); pass.setPipeline(self.pipeline); pass.setBindGroup(0, self.scene_uniform_bind_group, &.{}); for (self.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 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 an object we want to render. 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); } } // Finish recording commands, creating a `WGPUCommandBuffer`. var command = encoder.finish(null); defer command.release(); // Submit the command(s) to the GPU. core.queue.submit(&.{command}); } /// Creates 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. pub fn recreateDepthTexture(self: *Renderer) void { // Release previous depth butter and view, if any. if (self.depth_texture) |t| t.release(); if (self.depth_texture_view) |v| v.release(); self.depth_texture = core.device.createTexture(&.{ .usage = .{ .render_attachment = true }, .size = .{ .width = core.descriptor.width, .height = core.descriptor.height }, .format = .depth24_plus, }); 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( 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, }); core.queue.writeBuffer(buffer, 0, data); return buffer; }