examples/gkurve: added texture atlas
This commit is contained in:
PiergiorgioZagaria
Stephen Gutekanst
parent
dbdb2173b8
commit
2f87141a3a
4 changed files with 464 additions and 102 deletions
327
examples/gkurve/atlas.zig
Normal file
327
examples/gkurve/atlas.zig
Normal file
|
|
@ -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]);
|
||||
}
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
struct FragUniform {
|
||||
type_: u32,
|
||||
texture_index: i32,
|
||||
padding: vec2<f32>,
|
||||
padding: vec3<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);
|
||||
|
|
|
|||
|
|
@ -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 })),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue