Need help with macOS zgpu rendering problems #760

crystalball808 · 2025-07-19T09:51:38Z

crystalball808
Jul 19, 2025

I'm new to wgpu/graphics, and I wanted to render a simple square. But after I move a window, the contents just disappear, and there is just a black screen. Can someone explain me what am I doing wrong? I would appreciate any learning resources/forums suggestions.
main.zig

const std = @import("std");
const zglfw = @import("zglfw");
const zgpu = @import("zgpu");
const wgpu = zgpu.wgpu;

const WINDOW_WIDTH = 800;
const WINDOW_HEIGHT = 600;

// Vertex structure for our square
const Vertex = struct {
    position: [3]f32,
    color: [3]f32,
};

// Vertex shader
const wgsl_vs_source =
    \\  struct VertexOut {
    \\      @builtin(position) position_clip: vec4<f32>,
    \\      @location(0) color: vec3<f32>,
    \\  }
    \\  @vertex fn main(
    \\      @location(0) position: vec3<f32>,
    \\      @location(1) color: vec3<f32>,
    \\  ) -> VertexOut {
    \\      var output: VertexOut;
    \\      output.position_clip = vec4(position, 1.0);
    \\      output.color = color;
    \\      return output;
    \\  }
;

// Fragment shader
const wgsl_fs_source =
    \\  @fragment fn main(
    \\      @location(0) color: vec3<f32>,
    \\  ) -> @location(0) vec4<f32> {
    \\      return vec4(color, 1.0);
    \\  }
;

pub fn main() !void {
    var gpa = std.heap.DebugAllocator(.{}){};
    defer _ = gpa.deinit();
    const allocator = gpa.allocator();

    try zglfw.init();
    defer zglfw.terminate();

    const window = try zglfw.createWindow(WINDOW_WIDTH, WINDOW_HEIGHT, "project_m", null);
    defer zglfw.destroyWindow(window);

    // Initialize zgpu
    var gctx = try zgpu.GraphicsContext.create(allocator, .{
        .window = window,
        .fn_getTime = @ptrCast(&zglfw.getTime),
        .fn_getFramebufferSize = @ptrCast(&zglfw.Window.getFramebufferSize),
        .fn_getWin32Window = @ptrCast(&zglfw.getWin32Window),
        .fn_getX11Display = @ptrCast(&zglfw.getX11Display),
        .fn_getX11Window = @ptrCast(&zglfw.getX11Window),
        .fn_getWaylandDisplay = @ptrCast(&zglfw.getWaylandDisplay),
        .fn_getWaylandSurface = @ptrCast(&zglfw.getWaylandWindow),
        .fn_getCocoaWindow = @ptrCast(&zglfw.getCocoaWindow),
    }, .{});
    defer gctx.destroy(allocator);

    const pipeline_layout = gctx.createPipelineLayout(&.{});
    defer gctx.releaseResource(pipeline_layout);

    // create pipeline
    // can be reused for any kind of square
    const square_pipeline = square_pipeline: {
        // create modules for shaders
        const vs_module = zgpu.createWgslShaderModule(gctx.device, wgsl_vs_source, "vs");
        defer vs_module.release();

        const fs_module = zgpu.createWgslShaderModule(gctx.device, wgsl_fs_source, "fs");
        defer fs_module.release();

        // how to use final pixel output
        const color_targets = [_]wgpu.ColorTargetState{.{
            .format = zgpu.GraphicsContext.swapchain_format,
        }};

        // zig fmt: off
        const vertex_attributes = [_]wgpu.VertexAttribute{
            .{ .format = .float32x3, .offset = 0, .shader_location = 0 },
            .{ .format = .float32x3, .offset = @offsetOf(Vertex, "color"), .shader_location = 1 }
        };
        // zig fmt: on
        const vertex_buffers = [_]wgpu.VertexBufferLayout{.{
            .array_stride = @sizeOf(Vertex),
            .attribute_count = vertex_attributes.len,
            .attributes = &vertex_attributes,
        }};

        const pipeline_descriptor = wgpu.RenderPipelineDescriptor{ .vertex = wgpu.VertexState{
            .module = vs_module,
            .entry_point = "main",
            .buffer_count = vertex_buffers.len,
            .buffers = &vertex_buffers,
        }, .primitive = wgpu.PrimitiveState{ .front_face = .ccw, .cull_mode = .none, .topology = .triangle_list }, .fragment = &wgpu.FragmentState{
            .module = fs_module,
            .entry_point = "main",
            .target_count = color_targets.len,
            .targets = &color_targets,
        } };

        break :square_pipeline gctx.createRenderPipeline(pipeline_layout, pipeline_descriptor);
    };

    const vertices = [_]Vertex{
        // First triangle
        .{ .position = [3]f32{ -0.5, -0.5, 0.0 }, .color = [3]f32{ 1.0, 0.0, 0.0 } }, // Bottom left - Red
        .{ .position = [3]f32{ 0.5, -0.5, 0.0 }, .color = [3]f32{ 0.0, 1.0, 0.0 } }, // Bottom right - Green
        .{ .position = [3]f32{ 0.5, 0.5, 0.0 }, .color = [3]f32{ 0.0, 0.0, 1.0 } }, // Top right - Blue

        // Second triangle
        .{ .position = [3]f32{ -0.5, -0.5, 0.0 }, .color = [3]f32{ 1.0, 0.0, 0.0 } }, // Bottom left - Red
        .{ .position = [3]f32{ 0.5, 0.5, 0.0 }, .color = [3]f32{ 0.0, 0.0, 1.0 } }, // Top right - Blue
        .{ .position = [3]f32{ -0.5, 0.5, 0.0 }, .color = [3]f32{ 1.0, 1.0, 0.0 } }, // Top left - Yellow
    };

    // create a buffer for vertices
    const vertex_buffer = gctx.createBuffer(.{
        .usage = .{ .vertex = true, .copy_dst = true },
        .size = @sizeOf(Vertex) * vertices.len,
    });
    gctx.queue.writeBuffer(gctx.lookupResource(vertex_buffer).?, 0, Vertex, vertices[0..]);

    while (!window.shouldClose()) {
        zglfw.pollEvents();

        // what is this?
        const back_buffer_view = gctx.swapchain.getCurrentTextureView();
        defer back_buffer_view.release();

        const commands = commands: {
            const encoder = gctx.device.createCommandEncoder(null);
            defer encoder.release();

            const vb_info = gctx.lookupResourceInfo(vertex_buffer) orelse break :commands encoder.finish(null);
            const pipeline_obj = gctx.lookupResource(square_pipeline) orelse break :commands encoder.finish(null);

            const color_attachments = [_]wgpu.RenderPassColorAttachment{.{
                .view = back_buffer_view,
                .load_op = .clear,
                .store_op = .store,
            }};
            const render_pass_info = wgpu.RenderPassDescriptor{
                .color_attachments = &color_attachments,
                .color_attachment_count = color_attachments.len,
            };

            const pass = encoder.beginRenderPass(render_pass_info);
            // defer {
            //     pass.end();
            //     pass.release();
            // }

            pass.setVertexBuffer(0, vb_info.gpuobj.?, 0, vb_info.size);
            pass.setPipeline(pipeline_obj);

            pass.draw(vertices.len, 1, 0, 0);
            pass.end();
            pass.release();

            break :commands encoder.finish(null);
        };
        defer commands.release();

        gctx.submit(&.{commands});
        _ = gctx.present();

        // I don't know what does this do
        // window.swapBuffers();
    }
}

crystalball808 · 2025-07-19T09:56:53Z

crystalball808
Jul 19, 2025
Author

Also here's my build.zig

const std = @import("std");

// Although this function looks imperative, note that its job is to
// declaratively construct a build graph that will be executed by an external
// runner.
pub fn build(b: *std.Build) void {
    // Standard target options allows the person running `zig build` to choose
    // what target to build for. Here we do not override the defaults, which
    // means any target is allowed, and the default is native. Other options
    // for restricting supported target set are available.
    const target = b.standardTargetOptions(.{});

    // Standard optimization options allow the person running `zig build` to select
    // between Debug, ReleaseSafe, ReleaseFast, and ReleaseSmall. Here we do not
    // set a preferred release mode, allowing the user to decide how to optimize.
    const optimize = b.standardOptimizeOption(.{});

    // We will also create a module for our other entry point, 'main.zig'.
    const exe_mod = b.createModule(.{
        // `root_source_file` is the Zig "entry point" of the module. If a module
        // only contains e.g. external object files, you can make this `null`.
        // In this case the main source file is merely a path, however, in more
        // complicated build scripts, this could be a generated file.
        .root_source_file = b.path("src/main.zig"),
        .target = target,
        .optimize = optimize,
    });

    // This creates another `std.Build.Step.Compile`, but this one builds an executable
    // rather than a static library.
    const exe = b.addExecutable(.{
        .name = "project_m",
        .root_module = exe_mod,
    });

    // zglfw
    const zglfw = b.dependency("zglfw", .{});
    exe.root_module.addImport("zglfw", zglfw.module("root"));
    if (target.result.os.tag != .emscripten) {
        exe.linkLibrary(zglfw.artifact("glfw"));
    }

    // zgpu
    @import("zgpu").addLibraryPathsTo(exe);
    const zgpu = b.dependency("zgpu", .{
        .target = target,
        .optimize = optimize,
    });
    exe.root_module.addImport("zgpu", zgpu.module("root"));
    if (target.result.os.tag != .emscripten) {
        exe.linkLibrary(zgpu.artifact("zdawn"));
    }

    // This declares intent for the executable to be installed into the
    // standard location when the user invokes the "install" step (the default
    // step when running `zig build`).
    b.installArtifact(exe);

    // This *creates* a Run step in the build graph, to be executed when another
    // step is evaluated that depends on it. The next line below will establish
    // such a dependency.
    const run_cmd = b.addRunArtifact(exe);

    // By making the run step depend on the install step, it will be run from the
    // installation directory rather than directly from within the cache directory.
    // This is not necessary, however, if the application depends on other installed
    // files, this ensures they will be present and in the expected location.
    run_cmd.step.dependOn(b.getInstallStep());

    // This allows the user to pass arguments to the application in the build
    // command itself, like this: `zig build run -- arg1 arg2 etc`
    if (b.args) |args| {
        run_cmd.addArgs(args);
    }

    // This creates a build step. It will be visible in the `zig build --help` menu,
    // and can be selected like this: `zig build run`
    // This will evaluate the `run` step rather than the default, which is "install".
    const run_step = b.step("run", "Run the app");
    run_step.dependOn(&run_cmd.step);

    const exe_unit_tests = b.addTest(.{
        .root_module = exe_mod,
    });

    const run_exe_unit_tests = b.addRunArtifact(exe_unit_tests);

    // Similar to creating the run step earlier, this exposes a `test` step to
    // the `zig build --help` menu, providing a way for the user to request
    // running the unit tests.
    const test_step = b.step("test", "Run unit tests");
    test_step.dependOn(&run_exe_unit_tests.step);
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Need help with macOS zgpu rendering problems #760

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Need help with macOS zgpu rendering problems #760

Uh oh!

crystalball808 Jul 19, 2025

Replies: 1 comment

Uh oh!

crystalball808 Jul 19, 2025 Author

crystalball808
Jul 19, 2025

crystalball808
Jul 19, 2025
Author