examples/gkurve: added texture atlas

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]);
+}

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] + 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 = .{ 0, 0 } },
+        .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = uv_data.bottom_left },
-        .{ .pos = .{ position[0] + scale, position[1], 0, 1 }, .uv = .{ 1, 0 } },
+        .{ .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 {
+pub fn quad(app: *App, position: Vec2, scale: Vec2, uniform: FragUniform, uv_data: UVData) !void {
-    try app.vertices.appendSlice(&[6]Vertex{
+    const bottom_right_uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0 };
-        .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = .{ 0, 1 } },
+    const up_left_uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 0, 1 };
-        .{ .pos = .{ position[0], position[1], 0, 1 }, .uv = .{ 0, 0 } },
+    const up_right_uv = uv_data.bottom_left + uv_data.width_and_height;
-        .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = .{ 1, 0 } },
 
-        .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = .{ 0, 1 } },
+    try app.vertices.appendSlice(&[6]Vertex{
-        .{ .pos = .{ position[0] + scale[0], position[1] + scale[1], 0, 1 }, .uv = .{ 1, 1 } },
+        .{ .pos = .{ position[0], position[1] + scale[1], 0, 1 }, .uv = up_left_uv },
-        .{ .pos = .{ position[0] + scale[0], position[1], 0, 1 }, .uv = .{ 1, 0 } },
+        .{ .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 {
+pub fn circle(app: *App, position: Vec2, radius: f32, blend_color: @Vector(4, f32), uv_data: UVData) !void {
-    const Vec4 = @Vector(4, f32);
+    const low_mid = Vertex{
-    const low_mid = Vec4{ position[0], position[1] - radius, 0, 1 };
+        .pos = .{ position[0], position[1] - radius, 0, 1 },
-    const high_mid = Vec4{ 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_left = Vertex{
-    const mid_right = Vec4{ position[0] + radius, position[1], 0, 1 };
+        .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_right = Vertex{
-    const high_left = Vec4{ position[0] - p, position[1] + p, 0, 1 };
+        .pos = .{ position[0] + p, position[1] + p, 0, 1 },
-    const low_right = Vec4{ position[0] + p, position[1] - p, 0, 1 };
+        .uv = uv_data.bottom_left + uv_data.width_and_height * Vec2{ 1, 0.75 },
-    const low_left = Vec4{ position[0] - p, position[1] - p, 0, 1 };
+    };
+    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 } },
+        low_mid,
-        .{ .pos = mid_right, .uv = .{ 0.5, 0 } },
+        mid_right,
-        .{ .pos = high_mid, .uv = .{ 0.5, 0 } },
+        high_mid,
 
-        .{ .pos = high_mid, .uv = .{ 0.5, 0 } },
+        high_mid,
-        .{ .pos = mid_left, .uv = .{ 0.5, 0 } },
+        mid_left,
-        .{ .pos = low_mid, .uv = .{ 0.5, 0 } },
+        low_mid,
 
-        .{ .pos = low_right, .uv = .{ 0.5, 0 } },
+        low_right,
-        .{ .pos = mid_right, .uv = .{ 0.5, 0 } },
+        mid_right,
-        .{ .pos = low_mid, .uv = .{ 0.5, 0 } },
+        low_mid,
 
-        .{ .pos = high_right, .uv = .{ 0.5, 0 } },
+        high_right,
-        .{ .pos = high_mid, .uv = .{ 0.5, 0 } },
+        high_mid,
-        .{ .pos = mid_right, .uv = .{ 0.5, 0 } },
+        mid_right,
 
-        .{ .pos = high_left, .uv = .{ 0.5, 0 } },
+        high_left,
-        .{ .pos = mid_left, .uv = .{ 0.5, 0 } },
+        mid_left,
-        .{ .pos = high_mid, .uv = .{ 0.5, 0 } },
+        high_mid,
 
-        .{ .pos = low_left, .uv = .{ 0.5, 0 } },
+        low_left,
-        .{ .pos = low_mid, .uv = .{ 0.5, 0 } },
+        low_mid,
-        .{ .pos = mid_left, .uv = .{ 0.5, 0 } },
+        mid_left,
     });
 
     try app.fragment_uniform_list.appendSlice(&[_]FragUniform{

examples/gkurve/frag.wgsl

@@ -1,12 +1,11 @@
 struct FragUniform {
     type_: u32,
-    texture_index: i32,
+    padding: vec3<f32>,
-    padding: vec2<f32>,
     blend_color: vec4<f32>,
 }
 @binding(1) @group(0) var<storage> ubos: array<FragUniform>;
 @binding(2) @group(0) var mySampler: sampler;
-@binding(3) @group(0) var myTexture: texture_2d_array<f32>;
+@binding(3) @group(0) var myTexture: texture_2d<f32>;
 
 @stage(fragment) fn main( 
     @location(0) uv: vec2<f32>,
@@ -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);

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 });
+    _ = img_uv_data;
-    // 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, window_height / 2 }, triangle_scale, .{}, img_uv_data);
-    // try draw.equilateralTriangle(app, .{ window_width / 2 - triangle_scale, window_height / 2 - triangle_scale / 2 }, triangle_scale, .{ .type = .convex });
+    // try draw.equilateralTriangle(app, .{ window_width / 2, window_height / 2 - triangle_scale }, triangle_scale, .{ .type = .concave }, img_uv_data);
-    // try draw.quad(app, .{ 0, 0 }, .{ 200, 200 }, .{ .texture_index = 1 });
+    // 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.circle(app, .{ window_width / 2, window_height / 2 }, window_height / 2 - 10, .{ 0, 0.5, 0.75, 1.0 });
+    // 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 })),
             },
         },
     );