From 2f87141a3acfbf650b0e0eedecc032fd73b1a44d Mon Sep 17 00:00:00 2001 From: PiergiorgioZagaria Date: Sun, 22 May 2022 20:20:22 +0200 Subject: [PATCH] examples/gkurve: added texture atlas --- examples/gkurve/atlas.zig | 327 ++++++++++++++++++++++++++++++++++++++ examples/gkurve/draw.zig | 116 +++++++++----- examples/gkurve/frag.wgsl | 7 +- examples/gkurve/main.zig | 116 +++++++------- 4 files changed, 464 insertions(+), 102 deletions(-) create mode 100644 examples/gkurve/atlas.zig diff --git a/examples/gkurve/atlas.zig b/examples/gkurve/atlas.zig new file mode 100644 index 00000000..114f4052 --- /dev/null +++ b/examples/gkurve/atlas.zig @@ -0,0 +1,327 @@ +//! This implementation comes from https://gist.github.com/mitchellh/0c023dbd381c42e145b5da8d58b1487f +//! +//! Implements a texture atlas (https://en.wikipedia.org/wiki/Texture_atlas). +//! +//! The implementation is based on "A Thousand Ways to Pack the Bin - A +//! Practical Approach to Two-Dimensional Rectangle Bin Packing" by Jukka +//! Jylänki. This specific implementation is based heavily on +//! Nicolas P. Rougier's freetype-gl project as well as Jukka's C++ +//! implementation: https://github.com/juj/RectangleBinPack +//! +//! Limitations that are easy to fix, but I didn't need them: +//! +//! * Written data must be packed, no support for custom strides. +//! * Texture is always a square, no ability to set width != height. Note +//! that regions written INTO the atlas do not have to be square, only +//! the full atlas texture itself. +//! + +const std = @import("std"); +const assert = std.debug.assert; +const Allocator = std.mem.Allocator; +const testing = std.testing; + +const Node = struct { + x: u32, + y: u32, + width: u32, +}; + +const Error = error{ + /// Atlas cannot fit the desired region. You must enlarge the atlas. + AtlasFull, +}; + +/// A region within the texture atlas. These can be acquired using the +/// "reserve" function. A region reservation is required to write data. +pub const Region = struct { + x: u32, + y: u32, + width: u32, + height: u32, + + pub fn getUVData(region: Region, atlas_float_size: f32) UVData { + return .{ + .bottom_left = .{ @intToFloat(f32, region.x) / atlas_float_size, (atlas_float_size - @intToFloat(f32, region.y + region.height)) / atlas_float_size }, + .width_and_height = .{ @intToFloat(f32, region.width) / atlas_float_size, @intToFloat(f32, region.height) / atlas_float_size }, + }; + } +}; + +pub const UVData = struct { + bottom_left: @Vector(2, f32), + width_and_height: @Vector(2, f32), +}; + +pub fn Atlas(comptime T: type) type { + return struct { + /// Data is the raw texture data. + data: []T, + + /// Width and height of the atlas texture. The current implementation is + /// always square so this is both the width and the height. + size: u32 = 0, + + /// The nodes (rectangles) of available space. + nodes: std.ArrayListUnmanaged(Node) = .{}, + + const Self = @This(); + + pub fn init(alloc: Allocator, size: u32) !Self { + var result = Self{ + .data = try alloc.alloc(T, size * size), + .size = size, + .nodes = .{}, + }; + + // TODO: figure out optimal prealloc based on real world usage + try result.nodes.ensureUnusedCapacity(alloc, 64); + + // This sets up our initial state + result.clear(); + + return result; + } + + pub fn deinit(self: *Self, alloc: Allocator) void { + self.nodes.deinit(alloc); + alloc.free(self.data); + self.* = undefined; + } + + /// Reserve a region within the atlas with the given width and height. + /// + /// May allocate to add a new rectangle into the internal list of rectangles. + /// This will not automatically enlarge the texture if it is full. + pub fn reserve(self: *Self, alloc: Allocator, width: u32, height: u32) !Region { + // x, y are populated within :best_idx below + var region: Region = .{ .x = 0, .y = 0, .width = width, .height = height }; + + // Find the location in our nodes list to insert the new node for this region. + var best_idx: usize = best_idx: { + var best_height: u32 = std.math.maxInt(u32); + var best_width: u32 = best_height; + var chosen: ?usize = null; + + var i: usize = 0; + while (i < self.nodes.items.len) : (i += 1) { + // Check if our region fits within this node. + const y = self.fit(i, width, height) orelse continue; + + const node = self.nodes.items[i]; + if ((y + height) < best_height or + ((y + height) == best_height and + (node.width > 0 and node.width < best_width))) + { + chosen = i; + best_width = node.width; + best_height = y + height; + region.x = node.x; + region.y = y; + } + } + + // If we never found a chosen index, the atlas cannot fit our region. + break :best_idx chosen orelse return Error.AtlasFull; + }; + + // Insert our new node for this rectangle at the exact best index + try self.nodes.insert(alloc, best_idx, .{ + .x = region.x, + .y = region.y + height, + .width = width, + }); + + // Optimize our rectangles + var i: usize = best_idx + 1; + while (i < self.nodes.items.len) : (i += 1) { + const node = &self.nodes.items[i]; + const prev = self.nodes.items[i - 1]; + if (node.x < (prev.x + prev.width)) { + const shrink = prev.x + prev.width - node.x; + node.x += shrink; + node.width -|= shrink; + if (node.width <= 0) { + _ = self.nodes.orderedRemove(i); + i -= 1; + continue; + } + } + + break; + } + self.merge(); + + return region; + } + + /// Attempts to fit a rectangle of width x height into the node at idx. + /// The return value is the y within the texture where the rectangle can be + /// placed. The x is the same as the node. + fn fit(self: Self, idx: usize, width: u32, height: u32) ?u32 { + // If the added width exceeds our texture size, it doesn't fit. + const node = self.nodes.items[idx]; + if ((node.x + width) > (self.size - 1)) return null; + + // Go node by node looking for space that can fit our width. + var y = node.y; + var i = idx; + var width_left = width; + while (width_left > 0) : (i += 1) { + const n = self.nodes.items[i]; + if (n.y > y) y = n.y; + + // If the added height exceeds our texture size, it doesn't fit. + if ((y + height) > (self.size - 1)) return null; + + width_left -|= n.width; + } + + return y; + } + + /// Merge adjacent nodes with the same y value. + fn merge(self: *Self) void { + var i: usize = 0; + while (i < self.nodes.items.len - 1) { + const node = &self.nodes.items[i]; + const next = self.nodes.items[i + 1]; + if (node.y == next.y) { + node.width += next.width; + _ = self.nodes.orderedRemove(i + 1); + continue; + } + + i += 1; + } + } + + /// Set the data associated with a reserved region. The data is expected + /// to fit exactly within the region. + pub fn set(self: *Self, reg: Region, data: []const T) void { + assert(reg.x < (self.size - 1)); + assert((reg.x + reg.width) <= (self.size - 1)); + assert(reg.y < (self.size - 1)); + assert((reg.y + reg.height) <= (self.size - 1)); + + var i: u32 = 0; + while (i < reg.height) : (i += 1) { + const tex_offset = ((reg.y + i) * self.size) + reg.x; + const data_offset = i * reg.width; + std.mem.copy( + T, + self.data[tex_offset..], + data[data_offset .. data_offset + reg.width], + ); + } + } + + // Grow the texture to the new size, preserving all previously written data. + pub fn grow(self: *Self, alloc: Allocator, size_new: u32) Allocator.Error!void { + assert(size_new >= self.size); + if (size_new == self.size) return; + + // Preserve our old values so we can copy the old data + const data_old = self.data; + const size_old = self.size; + + self.data = try alloc.alloc(T, size_new * size_new); + defer alloc.free(data_old); // Only defer after new data succeeded + self.size = size_new; // Only set size after new alloc succeeded + std.mem.set(T, self.data, std.mem.zeroes(T)); + self.set(.{ + .x = 0, // don't bother skipping border so we can avoid strides + .y = 1, // skip the first border row + .width = size_old, + .height = size_old - 2, // skip the last border row + }, data_old[size_old..]); + + // Add our new rectangle for our added righthand space + try self.nodes.append(alloc, .{ + .x = size_old - 1, + .y = 1, + .width = size_new - size_old, + }); + } + + // Empty the atlas. This doesn't reclaim any previously allocated memory. + pub fn clear(self: *Self) void { + std.mem.set(T, self.data, std.mem.zeroes(T)); + self.nodes.clearRetainingCapacity(); + + // Add our initial rectangle. This is the size of the full texture + // and is the initial rectangle we fit our regions in. We keep a 1px border + // to avoid artifacting when sampling the texture. + self.nodes.appendAssumeCapacity(.{ .x = 1, .y = 1, .width = self.size - 2 }); + } + }; +} + +test "exact fit" { + const alloc = testing.allocator; + var atlas = try Atlas(u32).init(alloc, 34); // +2 for 1px border + defer atlas.deinit(alloc); + + _ = try atlas.reserve(alloc, 32, 32); + try testing.expectError(Error.AtlasFull, atlas.reserve(alloc, 1, 1)); +} + +test "doesnt fit" { + const alloc = testing.allocator; + var atlas = try Atlas(f32).init(alloc, 32); + defer atlas.deinit(alloc); + + // doesn't fit due to border + try testing.expectError(Error.AtlasFull, atlas.reserve(alloc, 32, 32)); +} + +test "fit multiple" { + const alloc = testing.allocator; + var atlas = try Atlas(u16).init(alloc, 32); + defer atlas.deinit(alloc); + + _ = try atlas.reserve(alloc, 15, 30); + _ = try atlas.reserve(alloc, 15, 30); + try testing.expectError(Error.AtlasFull, atlas.reserve(alloc, 1, 1)); +} + +test "writing data" { + const alloc = testing.allocator; + var atlas = try Atlas(u64).init(alloc, 32); + defer atlas.deinit(alloc); + + const reg = try atlas.reserve(alloc, 2, 2); + atlas.set(reg, &[_]u64{ 1, 2, 3, 4 }); + + // 33 because of the 1px border and so on + try testing.expectEqual(@as(u64, 1), atlas.data[33]); + try testing.expectEqual(@as(u64, 2), atlas.data[34]); + try testing.expectEqual(@as(u64, 3), atlas.data[65]); + try testing.expectEqual(@as(u64, 4), atlas.data[66]); +} + +test "grow" { + const alloc = testing.allocator; + var atlas = try Atlas(u32).init(alloc, 4); // +2 for 1px border + defer atlas.deinit(alloc); + + const reg = try atlas.reserve(alloc, 2, 2); + try testing.expectError(Error.AtlasFull, atlas.reserve(alloc, 1, 1)); + + // Write some data so we can verify that growing doesn't mess it up + atlas.set(reg, &[_]u32{ 1, 2, 3, 4 }); + try testing.expectEqual(@as(u32, 1), atlas.data[5]); + try testing.expectEqual(@as(u32, 2), atlas.data[6]); + try testing.expectEqual(@as(u32, 3), atlas.data[9]); + try testing.expectEqual(@as(u32, 4), atlas.data[10]); + + // Expand by exactly 1 should fit our new 1x1 block. + try atlas.grow(alloc, atlas.size + 1); + _ = try atlas.reserve(alloc, 1, 1); + + // Ensure our data is still set. Not the offsets change due to size. + try testing.expectEqual(@as(u32, 1), atlas.data[atlas.size + 1]); + try testing.expectEqual(@as(u32, 2), atlas.data[atlas.size + 2]); + try testing.expectEqual(@as(u32, 3), atlas.data[atlas.size * 2 + 1]); + try testing.expectEqual(@as(u32, 4), atlas.data[atlas.size * 2 + 2]); +} diff --git a/examples/gkurve/draw.zig b/examples/gkurve/draw.zig index 7750fc50..a52ccd8a 100644 --- a/examples/gkurve/draw.zig +++ b/examples/gkurve/draw.zig @@ -3,10 +3,13 @@ const ArrayList = std.ArrayList; const gpu = @import("gpu"); const App = @import("main.zig").App; const zm = @import("zmath"); +const UVData = @import("atlas.zig").UVData; + +const Vec2 = @Vector(2, f32); pub const Vertex = struct { pos: @Vector(4, f32), - uv: @Vector(2, f32), + uv: Vec2, }; const VERTEX_ATTRIBUTES = [_]gpu.VertexAttribute{ .{ .format = .float32x4, .offset = @offsetOf(Vertex, "pos"), .shader_location = 0 }, @@ -30,19 +33,18 @@ const GkurveType = enum(u32) { pub const FragUniform = struct { type: GkurveType = .filled, - texture_index: i32 = 0, // Padding for struct alignment to 16 bytes (minimum in WebGPU uniform). - padding: @Vector(2, f32) = undefined, + padding: @Vector(3, f32) = undefined, blend_color: @Vector(4, f32) = @Vector(4, f32){ 1, 1, 1, 1 }, }; -pub fn equilateralTriangle(app: *App, position: @Vector(2, f32), scale: f32, uniform: FragUniform) !void { +pub fn equilateralTriangle(app: *App, position: Vec2, scale: f32, uniform: FragUniform, uv_data: UVData) !void { const triangle_height = scale * @sqrt(0.75); try app.vertices.appendSlice(&[3]Vertex{ - .{ .pos = .{ position[0] + scale / 2, position[1] + triangle_height, 0, 1 }, .uv = .{ 0.5, 1 } }, - .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = .{ 0, 0 } }, - .{ .pos = .{ position[0] + scale, position[1], 0, 1 }, .uv = .{ 1, 0 } }, + .{ .pos = .{ position[0] + scale / 2, position[1] + triangle_height, 0, 1 }, .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0.5, 1 } }, + .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = uv_data.bottom_left }, + .{ .pos = .{ position[0] + scale, position[1], 0, 1 }, .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0 } }, }); try app.fragment_uniform_list.append(uniform); @@ -51,15 +53,19 @@ pub fn equilateralTriangle(app: *App, position: @Vector(2, f32), scale: f32, uni app.update_frag_uniform_buffer = true; } -pub fn quad(app: *App, position: @Vector(2, f32), scale: @Vector(2, f32), uniform: FragUniform) !void { - try app.vertices.appendSlice(&[6]Vertex{ - .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = .{ 0, 1 } }, - .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = .{ 0, 0 } }, - .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = .{ 1, 0 } }, +pub fn quad(app: *App, position: Vec2, scale: Vec2, uniform: FragUniform, uv_data: UVData) !void { + const bottom_right_uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0 }; + const up_left_uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0, 1 }; + const up_right_uv = uv_data.bottom_left + uv_data.width_and_height; - .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = .{ 0, 1 } }, - .{ .pos = .{ position[0] + scale[0], position[1] + scale[1], 0, 1 }, .uv = .{ 1, 1 } }, - .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = .{ 1, 0 } }, + try app.vertices.appendSlice(&[6]Vertex{ + .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = up_left_uv }, + .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = uv_data.bottom_left }, + .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = bottom_right_uv }, + + .{ .pos = .{ position[0] + scale[0], position[1] + scale[1], 0, 1 }, .uv = up_right_uv }, + .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = up_left_uv }, + .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = bottom_right_uv }, }); try app.fragment_uniform_list.appendSlice(&.{ uniform, uniform }); @@ -68,46 +74,68 @@ pub fn quad(app: *App, position: @Vector(2, f32), scale: @Vector(2, f32), unifor app.update_frag_uniform_buffer = true; } -pub fn circle(app: *App, position: @Vector(2, f32), radius: f32, blend_color: @Vector(4, f32)) !void { - const Vec4 = @Vector(4, f32); - const low_mid = Vec4{ position[0], position[1] - radius, 0, 1 }; - const high_mid = Vec4{ position[0], position[1] + radius, 0, 1 }; +pub fn circle(app: *App, position: Vec2, radius: f32, blend_color: @Vector(4, f32), uv_data: UVData) !void { + const low_mid = Vertex{ + .pos = .{ position[0], position[1] - radius, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0.5, 0 }, + }; + const high_mid = Vertex{ + .pos = .{ position[0], position[1] + radius, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0.5, 1 }, + }; - const mid_left = Vec4{ position[0] - radius, position[1], 0, 1 }; - const mid_right = Vec4{ position[0] + radius, position[1], 0, 1 }; + const mid_left = Vertex{ + .pos = .{ position[0] - radius, position[1], 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0, 0.5 }, + }; + const mid_right = Vertex{ + .pos = .{ position[0] + radius, position[1], 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0.5 }, + }; const p = 0.95 * radius; - const high_right = Vec4{ position[0] + p, position[1] + p, 0, 1 }; - const high_left = Vec4{ position[0] - p, position[1] + p, 0, 1 }; - const low_right = Vec4{ position[0] + p, position[1] - p, 0, 1 }; - const low_left = Vec4{ position[0] - p, position[1] - p, 0, 1 }; + const high_right = Vertex{ + .pos = .{ position[0] + p, position[1] + p, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0.75 }, + }; + const high_left = Vertex{ + .pos = .{ position[0] - p, position[1] + p, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0, 0.75 }, + }; + const low_right = Vertex{ + .pos = .{ position[0] + p, position[1] - p, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0.25 }, + }; + const low_left = Vertex{ + .pos = .{ position[0] - p, position[1] - p, 0, 1 }, + .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0, 0.25 }, + }; - // TODO: Fix UVs try app.vertices.appendSlice(&[_]Vertex{ - .{ .pos = low_mid, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_right, .uv = .{ 0.5, 0 } }, - .{ .pos = high_mid, .uv = .{ 0.5, 0 } }, + low_mid, + mid_right, + high_mid, - .{ .pos = high_mid, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_left, .uv = .{ 0.5, 0 } }, - .{ .pos = low_mid, .uv = .{ 0.5, 0 } }, + high_mid, + mid_left, + low_mid, - .{ .pos = low_right, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_right, .uv = .{ 0.5, 0 } }, - .{ .pos = low_mid, .uv = .{ 0.5, 0 } }, + low_right, + mid_right, + low_mid, - .{ .pos = high_right, .uv = .{ 0.5, 0 } }, - .{ .pos = high_mid, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_right, .uv = .{ 0.5, 0 } }, + high_right, + high_mid, + mid_right, - .{ .pos = high_left, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_left, .uv = .{ 0.5, 0 } }, - .{ .pos = high_mid, .uv = .{ 0.5, 0 } }, + high_left, + mid_left, + high_mid, - .{ .pos = low_left, .uv = .{ 0.5, 0 } }, - .{ .pos = low_mid, .uv = .{ 0.5, 0 } }, - .{ .pos = mid_left, .uv = .{ 0.5, 0 } }, + low_left, + low_mid, + mid_left, }); try app.fragment_uniform_list.appendSlice(&[_]FragUniform{ diff --git a/examples/gkurve/frag.wgsl b/examples/gkurve/frag.wgsl index 28b88627..ce423170 100755 --- a/examples/gkurve/frag.wgsl +++ b/examples/gkurve/frag.wgsl @@ -1,12 +1,11 @@ struct FragUniform { type_: u32, - texture_index: i32, - padding: vec2, + padding: vec3, blend_color: vec4, } @binding(1) @group(0) var ubos: array; @binding(2) @group(0) var mySampler: sampler; -@binding(3) @group(0) var myTexture: texture_2d_array; +@binding(3) @group(0) var myTexture: texture_2d; @stage(fragment) fn main( @location(0) uv: vec2, @@ -28,7 +27,7 @@ struct FragUniform { // (These two could be cut with vec2(0.0,1.0) + uv * vec2(1.0,-1.0)) var correct_uv = uv; correct_uv.y = 1.0 - correct_uv.y; - let color = textureSample(myTexture, mySampler, correct_uv, ubos[triangle_index].texture_index) * ubos[triangle_index].blend_color; + let color = textureSample(myTexture, mySampler, correct_uv) * ubos[triangle_index].blend_color; // Gradients let px = dpdx(bary.xy); diff --git a/examples/gkurve/main.zig b/examples/gkurve/main.zig index 60aa230d..a85a238d 100644 --- a/examples/gkurve/main.zig +++ b/examples/gkurve/main.zig @@ -9,6 +9,7 @@ const zm = @import("zmath"); const zigimg = @import("zigimg"); const glfw = @import("glfw"); const draw = @import("draw.zig"); +const Atlas = @import("atlas.zig").Atlas; pub const options = mach.Options{ .width = 640, .height = 480 }; @@ -29,6 +30,59 @@ bind_group: gpu.BindGroup, pub fn init(app: *App, engine: *mach.Engine) !void { try engine.core.setSizeLimits(.{ .width = 20, .height = 20 }, .{ .width = null, .height = null }); + const queue = engine.gpu_driver.device.getQueue(); + + const AtlasRGB8 = Atlas(zigimg.color.Rgba32); + // TODO: Refactor texture atlas size number + var texture_atlas_data: AtlasRGB8 = try AtlasRGB8.init(engine.allocator, 640); + defer texture_atlas_data.deinit(engine.allocator); + const atlas_size = gpu.Extent3D{ .width = texture_atlas_data.size, .height = texture_atlas_data.size }; + const atlas_float_size = @intToFloat(f32, texture_atlas_data.size); + + const texture = engine.gpu_driver.device.createTexture(&.{ + .size = atlas_size, + .format = .rgba8_unorm, + .usage = .{ + .texture_binding = true, + .copy_dst = true, + .render_attachment = true, + }, + }); + const data_layout = gpu.Texture.DataLayout{ + .bytes_per_row = @intCast(u32, atlas_size.width * 4), + .rows_per_image = @intCast(u32, atlas_size.height), + }; + + const img = try zigimg.Image.fromFilePath(engine.allocator, "examples/assets/gotta-go-fast.png"); + defer img.deinit(); + + const atlas_img_region = try texture_atlas_data.reserve(engine.allocator, @truncate(u32, img.width), @truncate(u32, img.height)); + const img_uv_data = atlas_img_region.getUVData(atlas_float_size); + + switch (img.pixels.?) { + .Rgba32 => |pixels| texture_atlas_data.set(atlas_img_region, pixels), + .Rgb24 => |pixels| { + const data = try rgb24ToRgba32(engine.allocator, pixels); + defer data.deinit(engine.allocator); + texture_atlas_data.set(atlas_img_region, data.Rgba32); + }, + else => @panic("unsupported image color format"), + } + + const white_tex_scale = 80; + const atlas_white_region = try texture_atlas_data.reserve(engine.allocator, white_tex_scale, white_tex_scale); + const white_texture_uv_data = atlas_white_region.getUVData(atlas_float_size); + var white_tex_data = try engine.allocator.alloc(zigimg.color.Rgba32, white_tex_scale * white_tex_scale); + std.mem.set(zigimg.color.Rgba32, white_tex_data, zigimg.color.Rgba32.initRGB(0xff, 0xff, 0xff)); + texture_atlas_data.set(atlas_white_region, white_tex_data); + + queue.writeTexture( + &.{ .texture = texture }, + texture_atlas_data.data, + &data_layout, + &.{ .width = texture_atlas_data.size, .height = texture_atlas_data.size }, + ); + app.vertices = try std.ArrayList(draw.Vertex).initCapacity(engine.allocator, 9); app.fragment_uniform_list = try std.ArrayList(draw.FragUniform).initCapacity(engine.allocator, 3); @@ -36,11 +90,12 @@ pub fn init(app: *App, engine: *mach.Engine) !void { const window_width = @intToFloat(f32, wsize.width); const window_height = @intToFloat(f32, wsize.height); // const triangle_scale = 250; - // try draw.equilateralTriangle(app, .{ window_width / 2, window_height / 2 }, triangle_scale, .{ .texture_index = 1 }); - // try draw.equilateralTriangle(app, .{ window_width / 2, window_height / 2 - triangle_scale }, triangle_scale, .{ .type = .concave, .texture_index = 1 }); - // try draw.equilateralTriangle(app, .{ window_width / 2 - triangle_scale, window_height / 2 - triangle_scale / 2 }, triangle_scale, .{ .type = .convex }); - // try draw.quad(app, .{ 0, 0 }, .{ 200, 200 }, .{ .texture_index = 1 }); - try draw.circle(app, .{ window_width / 2, window_height / 2 }, window_height / 2 - 10, .{ 0, 0.5, 0.75, 1.0 }); + _ = img_uv_data; + // try draw.equilateralTriangle(app, .{ window_width / 2, window_height / 2 }, triangle_scale, .{}, img_uv_data); + // try draw.equilateralTriangle(app, .{ window_width / 2, window_height / 2 - triangle_scale }, triangle_scale, .{ .type = .concave }, img_uv_data); + // try draw.equilateralTriangle(app, .{ window_width / 2 - triangle_scale, window_height / 2 - triangle_scale / 2 }, triangle_scale, .{ .type = .convex }, white_texture_uv_data); + // try draw.quad(app, .{ 0, 0 }, .{ 200, 200 }, .{}, img_uv_data); + try draw.circle(app, .{ window_width / 2, window_height / 2 }, window_height / 2 - 10, .{ 0, 0.5, 0.75, 1.0 }, white_texture_uv_data); const vs_module = engine.gpu_driver.device.createShaderModule(&.{ .label = "my vertex shader", @@ -67,7 +122,7 @@ pub fn init(app: *App, engine: *mach.Engine) !void { const vbgle = gpu.BindGroupLayout.Entry.buffer(0, .{ .vertex = true }, .uniform, true, 0); const fbgle = gpu.BindGroupLayout.Entry.buffer(1, .{ .fragment = true }, .read_only_storage, true, 0); const sbgle = gpu.BindGroupLayout.Entry.sampler(2, .{ .fragment = true }, .filtering); - const tbgle = gpu.BindGroupLayout.Entry.texture(3, .{ .fragment = true }, .float, .dimension_2d_array, false); + const tbgle = gpu.BindGroupLayout.Entry.texture(3, .{ .fragment = true }, .float, .dimension_2d, false); const bgl = engine.gpu_driver.device.createBindGroupLayout( &gpu.BindGroupLayout.Descriptor{ .entries = &.{ vbgle, fbgle, sbgle, tbgle }, @@ -123,53 +178,6 @@ pub fn init(app: *App, engine: *mach.Engine) !void { .min_filter = .linear, }); - const queue = engine.gpu_driver.device.getQueue(); - const img = try zigimg.Image.fromFilePath(engine.allocator, "examples/assets/gotta-go-fast.png"); - defer img.deinit(); - const img_size = gpu.Extent3D{ .width = @intCast(u32, img.width), .height = @intCast(u32, img.height), .depth_or_array_layers = 2 }; - const quad_texture = engine.gpu_driver.device.createTexture(&.{ - .size = img_size, - .format = .rgba8_unorm, - .usage = .{ - .texture_binding = true, - .copy_dst = true, - .render_attachment = true, - }, - }); - const data_layout = gpu.Texture.DataLayout{ - .bytes_per_row = @intCast(u32, img.width * 4), - .rows_per_image = @intCast(u32, img.height), - }; - switch (img.pixels.?) { - .Rgba32 => |pixels| queue.writeTexture( - &.{ .texture = quad_texture, .origin = .{ .x = 0, .y = 0, .z = 1 } }, - pixels, - &data_layout, - &.{ .width = img_size.width, .height = img_size.height }, - ), - .Rgb24 => |pixels| { - const data = try rgb24ToRgba32(engine.allocator, pixels); - defer data.deinit(engine.allocator); - queue.writeTexture( - &.{ .texture = quad_texture, .origin = .{ .x = 0, .y = 0, .z = 1 } }, - data.Rgba32, - &data_layout, - &.{ .width = img_size.width, .height = img_size.height }, - ); - }, - else => @panic("unsupported image color format"), - } - - const white_texture_data = try engine.allocator.alloc(zigimg.color.Rgba32, img.width * img.height); - defer engine.allocator.free(white_texture_data); - std.mem.set(zigimg.color.Rgba32, white_texture_data, zigimg.color.Rgba32.initRGBA(0xff, 0xff, 0xff, 0xff)); - queue.writeTexture( - &.{ .texture = quad_texture, .origin = .{ .x = 0, .y = 0, .z = 0 } }, - white_texture_data, - &data_layout, - &.{ .width = img_size.width, .height = img_size.height }, - ); - const bind_group = engine.gpu_driver.device.createBindGroup( &gpu.BindGroup.Descriptor{ .layout = bgl, @@ -177,7 +185,7 @@ pub fn init(app: *App, engine: *mach.Engine) !void { gpu.BindGroup.Entry.buffer(0, vertex_uniform_buffer, 0, @sizeOf(draw.VertexUniform)), gpu.BindGroup.Entry.buffer(1, frag_uniform_buffer, 0, @sizeOf(draw.FragUniform) * app.vertices.items.len / 3), gpu.BindGroup.Entry.sampler(2, sampler), - gpu.BindGroup.Entry.textureView(3, quad_texture.createView(&gpu.TextureView.Descriptor{ .dimension = .dimension_2d_array })), + gpu.BindGroup.Entry.textureView(3, texture.createView(&gpu.TextureView.Descriptor{ .dimension = .dimension_2d })), }, }, );