src/main.zig

@@ -6,136 +6,66 @@ const zm = @import("zmath");
 const vec = zm.f32x4;
 const Mat = zm.Mat;
 
-const VertexData = struct {
-    position: [3]f32,
-};
-
-const SceneUniformBuffer = struct {
-    view_proj_matrix: zm.Mat,
-};
-
-const ModelUniformBuffer = struct {
-    matrix: zm.Mat,
-    color: [3]f32,
-};
-
 pub const App = @This();
 
 app_timer: core.Timer,
 title_timer: core.Timer,
 
 pipeline: *gpu.RenderPipeline,
-scene_uniform_buffer: *gpu.Buffer,
+mvp_uniform_buffer: *gpu.Buffer,
-scene_bind_group: *gpu.BindGroup,
+mvp_bind_group: *gpu.BindGroup,
-model_uniform_buffers: [3]*gpu.Buffer,
-model_bind_groups: [3]*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();
 
-    // Set up rendering pipeline.
+    const blend = gpu.BlendState{};
-    app.pipeline = core.device.createRenderPipeline(&.{
+    const color_target = gpu.ColorTargetState{
-        .vertex = gpu.VertexState.init(.{
+        .format = core.descriptor.format,
-            .module = shader_module,
+        .blend = &blend,
-            .entry_point = "vertex_main",
+        .write_mask = gpu.ColorWriteMaskFlags.all,
-            .buffers = &.{
+    };
-                gpu.VertexBufferLayout.init(.{
+    const fragment = gpu.FragmentState.init(.{
-                    .array_stride = @sizeOf(VertexData),
-                    .step_mode = .vertex,
-                    .attributes = &.{
-                        .{ .format = .float32x3, .shader_location = 0, .offset = @offsetOf(VertexData, "position") },
-                    },
-                }),
-            },
-        }),
-        .fragment = &gpu.FragmentState.init(.{
         .module = shader_module,
         .entry_point = "frag_main",
-            .targets = &.{.{ .format = core.descriptor.format }},
+        .targets = &.{color_target},
-        }),
     });
+    const pipeline_descriptor = gpu.RenderPipeline.Descriptor{
+        .vertex = gpu.VertexState{
+            .module = shader_module,
+            .entry_point = "vertex_main",
+        },
+        .fragment = &fragment,
+    };
 
-    // Set up uniform buffers and bind groups.
+    app.app_timer = try core.Timer.start();
+    app.title_timer = try core.Timer.start();
 
-    // The "scene" uniform contains information for each rendered scene.
+    app.pipeline = core.device.createRenderPipeline(&pipeline_descriptor);
-    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)),
-            },
-        }),
-    );
 
-    // The "model" uniforms contain information about how to render each model.
+    app.mvp_uniform_buffer = core.device.createBuffer(&.{
-    for (0..3) |i| {
-        app.model_uniform_buffers[i] = core.device.createBuffer(&.{
         .usage = .{ .copy_dst = true, .uniform = true },
-            .size = @sizeOf(ModelUniformBuffer),
+        .size = @sizeOf(zm.Mat),
         .mapped_at_creation = .false,
     });
-        app.model_bind_groups[i] = core.device.createBindGroup(
+
+    app.mvp_bind_group = core.device.createBindGroup(
         &gpu.BindGroup.Descriptor.init(.{
-                .layout = app.pipeline.getBindGroupLayout(1),
+            .layout = app.pipeline.getBindGroupLayout(0),
             .entries = &.{
-                    gpu.BindGroup.Entry.buffer(0, app.model_uniform_buffers[i], 0, @sizeOf(ModelUniformBuffer)),
+                gpu.BindGroup.Entry.buffer(0, app.mvp_uniform_buffer, 0, @sizeOf(zm.Mat)),
             },
         }),
     );
 }
-    // Upload model render information (matrix + color) to the GPU.
-    core.queue.writeBuffer(app.model_uniform_buffers[0], 0, &[_]ModelUniformBuffer{.{
-        .matrix = zm.transpose(zm.translation(-1.0, 0.25, 0.0)),
-        .color = .{ 1.0, 0.0, 0.0 },
-    }});
-    core.queue.writeBuffer(app.model_uniform_buffers[1], 0, &[_]ModelUniformBuffer{.{
-        .matrix = zm.transpose(zm.translation(0.0, -0.25, 0.0)),
-        .color = .{ 0.0, 1.0, 0.0 },
-    }});
-    core.queue.writeBuffer(app.model_uniform_buffers[2], 0, &[_]ModelUniformBuffer{.{
-        .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 },
-        .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.scene_uniform_buffer.release();
+    defer app.mvp_uniform_buffer.release();
-    defer app.scene_bind_group.release();
+    defer app.mvp_bind_group.release();
-    defer for (app.model_uniform_buffers) |b| b.release();
-    defer for (app.model_bind_groups) |g| g.release();
-    defer app.vertex_buffer.release();
 }
 
 pub fn update(app: *App) !bool {
@@ -171,25 +101,21 @@ 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 render_pass_info = gpu.RenderPassDescriptor.init(.{
+    const color_attachment = gpu.RenderPassColorAttachment{
-        .color_attachments = &.{.{
         .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},
     });
 
     // 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(app.mvp_uniform_buffer, 0, &[_]zm.Mat{zm.transpose(view_proj_matrix)});
-    encoder.writeBuffer(app.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);
@@ -197,15 +123,10 @@ pub fn update(app: *App) !bool {
         defer pass.end();
 
         pass.setPipeline(app.pipeline);
-        pass.setBindGroup(0, app.scene_bind_group, &.{});
+        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.
-        for (app.model_bind_groups) |model_bind_group| {
+        pass.draw(9, 1, 0, 0);
-            // Set the model bind group for a specific model we want to render.
-            pass.setBindGroup(1, model_bind_group, &.{});
-            // Draw the vertices in `vertex_buffer`.
-            pass.draw(app.vertex_count, 1, 0, 0);
-        }
     }
 
     // Finish recording commands, creating a `WGPUCommandBuffer`.

src/shader.wgsl

@@ -1,18 +1,4 @@
-struct SceneUniformBuffer {
+@group(0) @binding(0) var<uniform> mvp_matrix: mat4x4<f32>;
-    view_proj_matrix: mat4x4<f32>,
-};
-
-struct ModelUniformBuffer {
-    matrix: mat4x4<f32>,
-    color: vec3<f32>,
-};
-
-@group(0) @binding(0) var<uniform> scene: SceneUniformBuffer;
-@group(1) @binding(0) var<uniform> model: ModelUniformBuffer;
-
-struct VertexInput {
-    @location(0) position: vec3<f32>,
-};
 
 struct VertexOutput {
     @builtin(position) position: vec4<f32>,
@@ -23,11 +9,31 @@ struct FragmentOutput {
     @location(0) pixel_color: vec4<f32>
 };
 
-@vertex fn vertex_main(in: VertexInput) -> VertexOutput {
+@vertex fn vertex_main(
+    @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;
-    let mvp = model.matrix * scene.view_proj_matrix;
+    out.position = vec4<f32>(pos[index], 0.0, 1.0) * mvp_matrix;
-    out.position = vec4<f32>(in.position, 1.0) * mvp;
+    out.color    = vec4<f32>(color[index / 3], 1.0);
-    out.color    = vec4<f32>(model.color, 1.0);
     return out;
 }