diff --git a/build.zig b/build.zig index e772b80b..baa72813 100644 --- a/build.zig +++ b/build.zig @@ -75,7 +75,7 @@ pub fn build(b: *std.Build) !void { .{ .name = "core-triangle", .deps = &.{} }, .{ .name = "core-transparent-window", .deps = &.{} }, .{ .name = "custom-renderer", .deps = &.{} }, - // .{ .name = "glyphs", .deps = &.{ .assets, .freetype } }, + .{ .name = "glyphs", .deps = &.{ .assets, .freetype } }, // .{ .name = "hardware-check", .deps = &.{ .assets, .zigimg } }, .{ .name = "piano", .deps = &.{} }, .{ .name = "play-opus", .deps = &.{.assets} }, diff --git a/examples/glyphs/App.zig b/examples/glyphs/App.zig index f7c50b3b..43ac2f53 100644 --- a/examples/glyphs/App.zig +++ b/examples/glyphs/App.zig @@ -1,8 +1,12 @@ const std = @import("std"); const mach = @import("mach"); +const freetype = @import("freetype"); +const assets = @import("assets"); + const gpu = mach.gpu; const gfx = mach.gfx; const math = mach.math; + const vec2 = math.vec2; const vec3 = math.vec3; const Vec2 = math.Vec2; @@ -10,50 +14,41 @@ const Vec3 = math.Vec3; const Mat3x3 = math.Mat3x3; const Mat4x4 = math.Mat4x4; -const Glyphs = @import("Glyphs.zig"); - const App = @This(); pub const mach_module = .app; -pub const mach_systems = .{ .start, .init, .deinit, .tick, .end_frame }; +pub const mach_systems = .{ .main, .init, .deinit, .tick }; +const RegionMap = std.AutoArrayHashMapUnmanaged(u21, mach.gfx.Atlas.Region); + +allocator: std.mem.Allocator, +window: mach.ObjectID, timer: mach.time.Timer, -player: mach.EntityID, -direction: Vec2 = vec2(0, 0), -spawning: bool = false, spawn_timer: mach.time.Timer, fps_timer: mach.time.Timer, -frame_count: usize, -sprites: usize, rand: std.Random.DefaultPrng, -time: f32, -pipeline: mach.EntityID, -frame_encoder: *gpu.CommandEncoder = undefined, -frame_render_pass: *gpu.RenderPassEncoder = undefined, -fn deinit(sprite_pipeline: *gfx.SpritePipeline.Mod, glyphs: *Glyphs.Mod) !void { - sprite_pipeline.schedule(.deinit); - glyphs.schedule(.deinit); -} +frame_count: usize = 0, +sprites: usize = 0, +time: f32 = 0, +direction: Vec2 = vec2(0, 0), +spawning: bool = true, +player_id: mach.ObjectID = undefined, +pipeline_id: mach.ObjectID = undefined, +texture_atlas: mach.gfx.Atlas = undefined, +texture: *gpu.Texture = undefined, +ft: freetype.Library = undefined, +face: freetype.Face = undefined, +regions: RegionMap = .{}, -fn start(core: *mach.Core, sprite_pipeline: *gfx.SpritePipeline.Mod, glyphs: *Glyphs.Mod, app: *App) !void { - core.schedule(.init); - sprite_pipeline.schedule(.init); - glyphs.schedule(.init); +pub const main = mach.schedule(.{ + .{ mach.Core, .init }, + .{ App, .init }, + .{ mach.Core, .main }, +}); - // Prepare which glyphs we will render - glyphs.schedule(.prepare); - - // Run our init code after glyphs module is initialized. - app.schedule(.init); -} - -fn init( - entities: *mach.Entities.Mod, - sprite: *gfx.Sprite.Mod, - sprite_pipeline: *gfx.SpritePipeline.Mod, - glyphs: *Glyphs.Mod, +pub fn init( app: *App, core: *mach.Core, app_mod: mach.Mod(App), @@ -61,46 +56,141 @@ fn init( core.on_tick = app_mod.id.tick; core.on_exit = app_mod.id.deinit; - // Create a sprite rendering pipeline - const texture = glyphs.state().texture; - const pipeline = try entities.new(); - texture.reference(); - try sprite_pipeline.set(pipeline, .texture, texture); - sprite_pipeline.schedule(.update); + const window = try core.windows.new(.{ + .title = "glyphs", + }); - // We can create entities, and set components on them. Note that components live in a module - // namespace, e.g. the `Sprite` module could have a 3D `.location` component with a different - // type than the `.physics2d` module's `.location` component if you desire. + // TODO(allocator): find a better way to get an allocator here + const allocator = std.heap.c_allocator; - const r = glyphs.state().regions.get('?').?; - const player = try entities.new(); - try sprite.set(player, .transform, Mat4x4.translate(vec3(-0.02, 0, 0))); - try sprite.set(player, .pipeline, pipeline); - try sprite.set(player, .size, vec2(@floatFromInt(r.width), @floatFromInt(r.height))); - try sprite.set(player, .uv_transform, Mat3x3.translate(vec2(@floatFromInt(r.x), @floatFromInt(r.y)))); - sprite.schedule(.update); - - app.init(.{ + app.* = .{ + .allocator = allocator, + .window = window, .timer = try mach.time.Timer.start(), .spawn_timer = try mach.time.Timer.start(), - .player = player, .fps_timer = try mach.time.Timer.start(), - .frame_count = 0, - .sprites = 0, .rand = std.Random.DefaultPrng.init(1337), - .time = 0, - .pipeline = pipeline, - }); + }; } -fn tick( - entities: *mach.Entities.Mod, +pub fn deinit(app: *App) void { + app.texture_atlas.deinit(app.allocator); + app.texture.release(); + app.face.deinit(); + app.ft.deinit(); + app.regions.deinit(app.allocator); +} + +fn setupPipeline( core: *mach.Core, - sprite: *gfx.Sprite.Mod, - sprite_pipeline: *gfx.SpritePipeline.Mod, - glyphs: *Glyphs.Mod, app: *App, + sprite: *gfx.Sprite, + window_id: mach.ObjectID, ) !void { + const window = core.windows.getValue(app.window); + + // rgba32_pixels + const img_size = gpu.Extent3D{ .width = 1024, .height = 1024 }; + + // Create a GPU texture + const label = @tagName(mach_module) ++ ".createPipeline"; + app.texture = window.device.createTexture(&.{ + .label = label, + .size = img_size, + .format = .rgba8_unorm, + .usage = .{ + .texture_binding = true, + .copy_dst = true, + .render_attachment = true, + }, + }); + + app.texture_atlas = try mach.gfx.Atlas.init( + app.allocator, + img_size.width, + .rgba, + ); + + app.ft = try freetype.Library.init(); + app.face = try app.ft.createFaceMemory(assets.roboto_medium_ttf, 0); + try prepareGlyphs(window.queue, app); + + // Create a sprite rendering pipeline + app.pipeline_id = try sprite.pipelines.new(.{ + .window = window_id, + .render_pass = undefined, + .texture = app.texture, + }); + + // Create our player sprite + const r = app.regions.get('?').?; + app.player_id = try sprite.sprites.new(.{ + .transform = Mat4x4.translate(vec3(-0.02, 0, 0)), + .size = vec2(@floatFromInt(r.width), @floatFromInt(r.height)), + .uv_transform = Mat3x3.translate(vec2(@floatFromInt(r.x), @floatFromInt(r.y))), + }); + // Attach the sprite to our sprite rendering pipeline. + try sprite.pipelines.setParent(app.player_id, app.pipeline_id); +} + +fn prepareGlyphs(queue: *gpu.Queue, app: *App) !void { + // Prepare which glyphs we will render + const codepoints: []const u21 = &[_]u21{ '?', '!', 'a', 'b', '#', '@', '%', '$', '&', '^', '*', '+', '=', '<', '>', '/', ':', ';', 'Q', '~' }; + for (codepoints) |codepoint| { + const font_size = 48 * 1; + try app.face.setCharSize(font_size * 64, 0, 50, 0); + try app.face.loadChar(codepoint, .{ .render = true }); + const glyph = app.face.glyph(); + const metrics = glyph.metrics(); + + const glyph_bitmap = glyph.bitmap(); + const glyph_width = glyph_bitmap.width(); + const glyph_height = glyph_bitmap.rows(); + + // Add 1 pixel padding to texture to avoid bleeding over other textures + const margin = 1; + const glyph_data = try app.allocator.alloc([4]u8, (glyph_width + (margin * 2)) * (glyph_height + (margin * 2))); + defer app.allocator.free(glyph_data); + const glyph_buffer = glyph_bitmap.buffer().?; + for (glyph_data, 0..) |*data, i| { + const x = i % (glyph_width + (margin * 2)); + const y = i / (glyph_width + (margin * 2)); + if (x < margin or x > (glyph_width + margin) or y < margin or y > (glyph_height + margin)) { + data.* = [4]u8{ 0, 0, 0, 0 }; + } else { + const alpha = glyph_buffer[((y - margin) * glyph_width + (x - margin)) % glyph_buffer.len]; + data.* = [4]u8{ 0, 0, 0, alpha }; + } + } + var glyph_atlas_region = try app.texture_atlas.reserve(app.allocator, glyph_width + (margin * 2), glyph_height + (margin * 2)); + app.texture_atlas.set(glyph_atlas_region, @as([*]const u8, @ptrCast(glyph_data.ptr))[0 .. glyph_data.len * 4]); + + glyph_atlas_region.x += margin; + glyph_atlas_region.y += margin; + glyph_atlas_region.width -= margin * 2; + glyph_atlas_region.height -= margin * 2; + + try app.regions.put(app.allocator, codepoint, glyph_atlas_region); + _ = metrics; + } + + // rgba32_pixels + const img_size = gpu.Extent3D{ .width = 1024, .height = 1024 }; + const data_layout = gpu.Texture.DataLayout{ + .bytes_per_row = @as(u32, @intCast(img_size.width * 4)), + .rows_per_image = @as(u32, @intCast(img_size.height)), + }; + queue.writeTexture(&.{ .texture = app.texture }, &data_layout, &img_size, app.texture_atlas.data); +} + +pub fn tick( + core: *mach.Core, + app: *App, + sprite: *gfx.Sprite, + sprite_mod: mach.Mod(gfx.Sprite), +) !void { + const label = @tagName(mach_module) ++ ".tick"; + var direction = app.direction; var spawning = app.spawning; while (core.nextEvent()) |event| { @@ -125,6 +215,7 @@ fn tick( else => {}, } }, + .window_open => |ev| try setupPipeline(core, app, sprite, ev.window_id), .close => core.exit(), else => {}, } @@ -132,9 +223,10 @@ fn tick( app.direction = direction; app.spawning = spawning; - var player_transform = sprite.get(app.player, .transform).?; - var player_pos = player_transform.translation(); - if (!spawning and app.spawn_timer.read() > 1.0 / 60.0) { + var player = sprite.sprites.getValue(app.player_id); + defer sprite.sprites.setValue(app.player_id, player); + var player_pos = player.transform.translation(); + if (spawning and app.spawn_timer.read() > 1.0 / 60.0) { // Spawn new entities _ = app.spawn_timer.lap(); for (0..50) |_| { @@ -142,14 +234,15 @@ fn tick( new_pos.v[0] += app.rand.random().floatNorm(f32) * 25; new_pos.v[1] += app.rand.random().floatNorm(f32) * 25; - const rand_index = app.rand.random().intRangeAtMost(usize, 0, glyphs.state().regions.count() - 1); - const r = glyphs.state().regions.entries.get(rand_index).value; + const rand_index = app.rand.random().intRangeAtMost(usize, 0, app.regions.count() - 1); + const r = app.regions.entries.get(rand_index).value; - const new_entity = try entities.new(); - try sprite.set(new_entity, .transform, Mat4x4.translate(new_pos).mul(&Mat4x4.scaleScalar(0.3))); - try sprite.set(new_entity, .size, vec2(@floatFromInt(r.width), @floatFromInt(r.height))); - try sprite.set(new_entity, .uv_transform, Mat3x3.translate(vec2(@floatFromInt(r.x), @floatFromInt(r.y)))); - try sprite.set(new_entity, .pipeline, app.pipeline); + const new_sprite_id = try sprite.sprites.new(.{ + .transform = Mat4x4.translate(new_pos).mul(&Mat4x4.scaleScalar(0.3)), + .size = vec2(@floatFromInt(r.width), @floatFromInt(r.height)), + .uv_transform = Mat3x3.translate(vec2(@floatFromInt(r.x), @floatFromInt(r.y))), + }); + try sprite.pipelines.setParent(new_sprite_id, app.pipeline_id); app.sprites += 1; } } @@ -157,29 +250,31 @@ fn tick( // Multiply by delta_time to ensure that movement is the same speed regardless of the frame rate. const delta_time = app.timer.lap(); - // Animate entities - var q = try entities.query(.{ - .ids = mach.Entities.Mod.read(.id), - .transforms = gfx.Sprite.Mod.write(.transform), - }); - while (q.next()) |v| { - for (v.ids, v.transforms) |id, *entity_transform| { - var location = entity_transform.translation(); - // TODO: formatting - // TODO(Core) - if (location.x() < -@as(f32, @floatFromInt(core.size().width)) / 1.5 or location.x() > @as(f32, @floatFromInt(core.size().width)) / 1.5 or location.y() < -@as(f32, @floatFromInt(core.size().height)) / 1.5 or location.y() > @as(f32, @floatFromInt(core.size().height)) / 1.5) { - try entities.remove(id); - app.sprites -= 1; - continue; - } + const window = core.windows.getValue(app.window); - var transform = Mat4x4.ident; - transform = transform.mul(&Mat4x4.scale(Vec3.splat(1.0 + (0.2 * delta_time)))); - transform = transform.mul(&Mat4x4.translate(location)); - transform = transform.mul(&Mat4x4.rotateZ(2 * math.pi * app.time)); - transform = transform.mul(&Mat4x4.scale(Vec3.splat(@max(math.cos(app.time / 2.0), 0.2)))); - entity_transform.* = transform; + // Rotate all sprites in the pipeline. + var pipeline_children = try sprite.pipelines.getChildren(app.pipeline_id); + defer pipeline_children.deinit(); + for (pipeline_children.items) |sprite_id| { + if (!sprite.sprites.is(sprite_id)) continue; + if (sprite_id == app.player_id) continue; // don't rotate the player + var s = sprite.sprites.getValue(sprite_id); + const location = s.transform.translation(); + + if (location.x() < -@as(f32, @floatFromInt(window.width)) / 1.5 or location.x() > @as(f32, @floatFromInt(window.width)) / 1.5 or location.y() < -@as(f32, @floatFromInt(window.height)) / 1.5 or location.y() > @as(f32, @floatFromInt(window.height)) / 1.5) { + try sprite.sprites.setParent(sprite_id, null); + sprite.sprites.delete(sprite_id); + app.sprites -= 1; + continue; } + + var transform = Mat4x4.ident; + transform = transform.mul(&Mat4x4.scale(Vec3.splat(1.0 + (0.2 * delta_time)))); + transform = transform.mul(&Mat4x4.translate(location)); + transform = transform.mul(&Mat4x4.rotateZ(2 * math.pi * app.time)); + transform = transform.mul(&Mat4x4.scale(Vec3.splat(@max(math.cos(app.time / 2.0), 0.2)))); + s.transform = transform; + sprite.sprites.setValue(sprite_id, s); } // Calculate the player position, by moving in the direction the player wants to go @@ -187,24 +282,17 @@ fn tick( const speed = 200.0; player_pos.v[0] += direction.x() * speed * delta_time; player_pos.v[1] += direction.y() * speed * delta_time; - player_transform = Mat4x4.translate(player_pos).mul( - &Mat4x4.scale(Vec3.splat(1.0)), - ); - try sprite.set(app.player, .transform, player_transform); - sprite.schedule(.update); - - // Perform pre-render work - sprite_pipeline.schedule(.pre_render); - - // Create a command encoder for this frame - const label = @tagName(mach_module) ++ ".tick"; - app.frame_encoder = core.device.createCommandEncoder(&.{ .label = label }); + player.transform = Mat4x4.translate(player_pos); // Grab the back buffer of the swapchain // TODO(Core) - const back_buffer_view = core.swap_chain.getCurrentTextureView().?; + const back_buffer_view = window.swap_chain.getCurrentTextureView().?; defer back_buffer_view.release(); + // Create a command encoder + const encoder = window.device.createCommandEncoder(&.{ .label = label }); + defer encoder.release(); + // Begin render pass const sky_blue = gpu.Color{ .r = 0.776, .g = 0.988, .b = 1, .a = 1 }; const color_attachments = [_]gpu.RenderPassColorAttachment{.{ @@ -213,41 +301,34 @@ fn tick( .load_op = .clear, .store_op = .store, }}; - app.frame_render_pass = app.frame_encoder.beginRenderPass(&gpu.RenderPassDescriptor.init(.{ + const render_pass = encoder.beginRenderPass(&gpu.RenderPassDescriptor.init(.{ .label = label, .color_attachments = &color_attachments, })); - // Render our sprite batch - sprite_pipeline.state().render_pass = app.frame_render_pass; - sprite_pipeline.schedule(.render); + // Render sprites + sprite.pipelines.set(app.pipeline_id, .render_pass, render_pass); + sprite_mod.call(.tick); - // Finish the frame once rendering is done. - app.schedule(.end_frame); + // Finish render pass + render_pass.end(); + var command = encoder.finish(&.{ .label = label }); + window.queue.submit(&[_]*gpu.CommandBuffer{command}); + command.release(); + render_pass.release(); + // TODO(object): window-title + // // Every second, update the window title with the FPS + // if (app.fps_timer.read() >= 1.0) { + // try core.printTitle( + // core.main_window, + // "glyphs [ FPS: {d} ] [ Sprites: {d} ]", + // .{ app.frame_count, app.sprites }, + // ); + // core.schedule(.update); + // app.fps_timer.reset(); + // app.frame_count = 0; + // } + app.frame_count += 1; app.time += delta_time; } - -fn endFrame(app: *App, core: *mach.Core) !void { - // Finish render pass - app.frame_render_pass.end(); - const label = @tagName(mach_module) ++ ".endFrame"; - var command = app.frame_encoder.finish(&.{ .label = label }); - core.queue.submit(&[_]*gpu.CommandBuffer{command}); - command.release(); - app.frame_encoder.release(); - app.frame_render_pass.release(); - - // Every second, update the window title with the FPS - if (app.fps_timer.read() >= 1.0) { - try core.printTitle( - core.main_window, - "glyphs [ FPS: {d} ] [ Sprites: {d} ]", - .{ app.frame_count, app.sprites }, - ); - core.schedule(.update); - app.fps_timer.reset(); - app.frame_count = 0; - } - app.frame_count += 1; -} diff --git a/examples/glyphs/Glyphs.zig b/examples/glyphs/Glyphs.zig deleted file mode 100644 index 43dbd605..00000000 --- a/examples/glyphs/Glyphs.zig +++ /dev/null @@ -1,123 +0,0 @@ -const mach = @import("mach"); -const gpu = mach.gpu; -const freetype = @import("freetype"); -const std = @import("std"); -const assets = @import("assets"); - -pub const mach_module = .glyphs; - -pub const mach_systems = .{ .init, .deinit, .prepare }; - -const RegionMap = std.AutoArrayHashMapUnmanaged(u21, mach.gfx.Atlas.Region); - -// TODO: banish global allocator -var gpa = std.heap.GeneralPurposeAllocator(.{}){}; - -texture_atlas: mach.gfx.Atlas, -texture: *gpu.Texture, -ft: freetype.Library, -face: freetype.Face, -regions: RegionMap = .{}, -allocator: std.mem.Allocator, - -fn deinit(glyphs: *Mod) !void { - const state = glyphs.state(); - state.texture_atlas.deinit(glyphs.state().allocator); - state.texture.release(); - state.face.deinit(); - state.ft.deinit(); - state.regions.deinit(state.allocator); -} - -fn init( - core: *mach.Core, - glyphs: *Mod, -) !void { - const device = core.device; - const allocator = gpa.allocator(); - - // rgba32_pixels - const img_size = gpu.Extent3D{ .width = 1024, .height = 1024 }; - - // Create a GPU texture - const label = @tagName(mach_module) ++ ".init"; - const texture = device.createTexture(&.{ - .label = label, - .size = img_size, - .format = .rgba8_unorm, - .usage = .{ - .texture_binding = true, - .copy_dst = true, - .render_attachment = true, - }, - }); - - const texture_atlas = try mach.gfx.Atlas.init( - allocator, - img_size.width, - .rgba, - ); - - const ft_lib = try freetype.Library.init(); - const face = try ft_lib.createFaceMemory(assets.roboto_medium_ttf, 0); - - glyphs.init(.{ - .texture_atlas = texture_atlas, - .texture = texture, - .ft = ft_lib, - .face = face, - .allocator = allocator, - }); -} - -fn prepare(core: *mach.Core, glyphs: *Mod) !void { - var s = glyphs.state(); - - // Prepare which glyphs we will render - const codepoints: []const u21 = &[_]u21{ '?', '!', 'a', 'b', '#', '@', '%', '$', '&', '^', '*', '+', '=', '<', '>', '/', ':', ';', 'Q', '~' }; - for (codepoints) |codepoint| { - const font_size = 48 * 1; - try s.face.setCharSize(font_size * 64, 0, 50, 0); - try s.face.loadChar(codepoint, .{ .render = true }); - const glyph = s.face.glyph(); - const metrics = glyph.metrics(); - - const glyph_bitmap = glyph.bitmap(); - const glyph_width = glyph_bitmap.width(); - const glyph_height = glyph_bitmap.rows(); - - // Add 1 pixel padding to texture to avoid bleeding over other textures - const margin = 1; - const glyph_data = try s.allocator.alloc([4]u8, (glyph_width + (margin * 2)) * (glyph_height + (margin * 2))); - defer s.allocator.free(glyph_data); - const glyph_buffer = glyph_bitmap.buffer().?; - for (glyph_data, 0..) |*data, i| { - const x = i % (glyph_width + (margin * 2)); - const y = i / (glyph_width + (margin * 2)); - if (x < margin or x > (glyph_width + margin) or y < margin or y > (glyph_height + margin)) { - data.* = [4]u8{ 0, 0, 0, 0 }; - } else { - const alpha = glyph_buffer[((y - margin) * glyph_width + (x - margin)) % glyph_buffer.len]; - data.* = [4]u8{ 0, 0, 0, alpha }; - } - } - var glyph_atlas_region = try s.texture_atlas.reserve(s.allocator, glyph_width + (margin * 2), glyph_height + (margin * 2)); - s.texture_atlas.set(glyph_atlas_region, @as([*]const u8, @ptrCast(glyph_data.ptr))[0 .. glyph_data.len * 4]); - - glyph_atlas_region.x += margin; - glyph_atlas_region.y += margin; - glyph_atlas_region.width -= margin * 2; - glyph_atlas_region.height -= margin * 2; - - try s.regions.put(s.allocator, codepoint, glyph_atlas_region); - _ = metrics; - } - - // rgba32_pixels - const img_size = gpu.Extent3D{ .width = 1024, .height = 1024 }; - const data_layout = gpu.Texture.DataLayout{ - .bytes_per_row = @as(u32, @intCast(img_size.width * 4)), - .rows_per_image = @as(u32, @intCast(img_size.height)), - }; - core.queue.writeTexture(&.{ .texture = s.texture }, &data_layout, &img_size, s.texture_atlas.data); -} diff --git a/examples/glyphs/main.zig b/examples/glyphs/main.zig index 1c0afef7..5fdad364 100644 --- a/examples/glyphs/main.zig +++ b/examples/glyphs/main.zig @@ -4,9 +4,8 @@ const mach = @import("mach"); // The set of Mach modules our application may use. const Modules = mach.Modules(.{ mach.Core, - mach.gfx.sprite_modules, + mach.gfx.Sprite, @import("App.zig"), - @import("Glyphs.zig"), }); // TODO: move this to a mach "entrypoint" zig module which handles nuances like WASM requires.