terminal/kitty-gfx: process source rectangle display params

This commit is contained in:
Mitchell Hashimoto
2023-08-22 14:33:41 -07:00
parent 84c72bbe46
commit 3bbfee676b
7 changed files with 94 additions and 86 deletions

View File

@ -528,7 +528,7 @@ pub fn render(
// We only do this if the Kitty image state is dirty meaning only if
// it changes.
if (state.terminal.screen.kitty_images.dirty) {
try self.prepKittyGraphics(&state.terminal.screen);
try self.prepKittyGraphics(state.terminal);
}
break :critical .{
@ -742,7 +742,12 @@ fn drawImagePlacement(
@as(f32, @floatFromInt(p.cell_offset_y)),
},
.offset_y = p.offset_y,
.source_rect = .{
@as(f32, @floatFromInt(p.source_x)),
@as(f32, @floatFromInt(p.source_y)),
@as(f32, @floatFromInt(p.source_width)),
@as(f32, @floatFromInt(p.source_height)),
},
}});
defer buf.deinit();
@ -827,9 +832,10 @@ fn drawCells(
/// the visible images are loaded on the GPU.
fn prepKittyGraphics(
self: *Metal,
screen: *terminal.Screen,
t: *terminal.Terminal,
) !void {
defer screen.kitty_images.dirty = false;
const storage = &t.screen.kitty_images;
defer storage.dirty = false;
// We always clear our previous placements no matter what because
// we rebuild them from scratch.
@ -843,7 +849,7 @@ fn prepKittyGraphics(
{
var it = self.images.iterator();
while (it.next()) |kv| {
if (screen.kitty_images.imageById(kv.key_ptr.*) == null) {
if (storage.imageById(kv.key_ptr.*) == null) {
kv.value_ptr.markForUnload();
}
}
@ -851,17 +857,18 @@ fn prepKittyGraphics(
// The top-left and bottom-right corners of our viewport in screen
// points. This lets us determine offsets and containment of placements.
const top = (terminal.point.Viewport{}).toScreen(screen);
const top = (terminal.point.Viewport{}).toScreen(&t.screen);
const bot = (terminal.point.Viewport{
.x = screen.cols - 1,
.y = screen.rows - 1,
}).toScreen(screen);
.x = t.screen.cols - 1,
.y = t.screen.rows - 1,
}).toScreen(&t.screen);
// Go through the placements and ensure the image is loaded on the GPU.
var it = screen.kitty_images.placements.iterator();
var it = storage.placements.iterator();
while (it.next()) |kv| {
// Find the image in storage
const image = screen.kitty_images.imageById(kv.key_ptr.image_id) orelse {
const p = kv.value_ptr;
const image = storage.imageById(kv.key_ptr.image_id) orelse {
log.warn(
"missing image for placement, ignoring image_id={}",
.{kv.key_ptr.image_id},
@ -869,38 +876,14 @@ fn prepKittyGraphics(
continue;
};
// We want the width/height of the image in cells to figure out
// if this image is within our viewport. We use floats here because
// we want to round UP so that if any part of the image is in a cell,
// we count the cell.
const image_grid_size: renderer.GridSize = grid_size: {
const width_f64: f64 = @floatFromInt(image.width);
const height_f64: f64 = @floatFromInt(image.height);
const cell_width_f64: f64 = @floatFromInt(self.cell_size.width);
const cell_height_f64: f64 = @floatFromInt(self.cell_size.height);
const width_cells: u32 = @intFromFloat(@ceil(width_f64 / cell_width_f64));
const height_cells: u32 = @intFromFloat(@ceil(height_f64 / cell_height_f64));
break :grid_size .{ .columns = width_cells, .rows = height_cells };
};
// Create a "selection" across the image. This is how we detect
// whether the image is in our viewport by detecting whether the
// selection is in our viewport.
const image_sel: terminal.Selection = .{
.start = kv.value_ptr.point,
.end = .{
.x = kv.value_ptr.point.x + image_grid_size.columns,
.y = kv.value_ptr.point.y + image_grid_size.rows,
},
};
// If the selection isn't within our viewport then skip it.
const image_sel = kv.value_ptr.selection(image, t);
if (!image_sel.within(top, bot)) continue;
// If the top left is outside the viewport we need to calc an offset
// so that we render (0, 0) with some offset for the texture.
const offset_y: u32 = if (image_sel.start.y < screen.viewport) offset_y: {
const offset_cells = screen.viewport - image_sel.start.y;
const offset_y: u32 = if (image_sel.start.y < t.screen.viewport) offset_y: {
const offset_cells = t.screen.viewport - image_sel.start.y;
const offset_pixels = offset_cells * self.cell_size.height;
break :offset_y @intCast(offset_pixels);
} else 0;
@ -913,33 +896,50 @@ fn prepKittyGraphics(
errdefer self.alloc.free(data);
// Store it in the map
const p: Image.Pending = .{
const pending: Image.Pending = .{
.width = image.width,
.height = image.height,
.data = data.ptr,
};
gop.value_ptr.* = switch (image.format) {
.rgb => .{ .pending_rgb = p },
.rgba => .{ .pending_rgba = p },
.rgb => .{ .pending_rgb = pending },
.rgba => .{ .pending_rgba = pending },
.png => unreachable, // should be decoded by now
};
}
// Convert our screen point to a viewport point
const viewport = kv.value_ptr.point.toViewport(screen);
const viewport = kv.value_ptr.point.toViewport(&t.screen);
// Calculate the source rectangle
const source_x = @min(image.width, p.source_x);
const source_y = @min(image.height, p.source_y + offset_y);
const source_width = if (p.source_width > 0)
@min(image.width - source_x, p.source_width)
else
image.width;
const source_height = if (p.source_height > 0)
@min(image.height, p.source_height)
else
image.height -| offset_y;
// Accumulate the placement
if (image.width > 0 and image.height > 0) {
try self.image_placements.append(self.alloc, .{
.image_id = kv.key_ptr.image_id,
.x = @intCast(kv.value_ptr.point.x),
.y = @intCast(viewport.y),
.cell_offset_x = kv.value_ptr.x_offset,
.cell_offset_y = kv.value_ptr.y_offset,
.offset_y = offset_y,
.source_x = source_x,
.source_y = source_y,
.source_width = source_width,
.source_height = source_height,
});
}
}
}
/// Update the configuration.
pub fn changeConfig(self: *Metal, config: *DerivedConfig) !void {

View File

@ -40,6 +40,7 @@ pub const MTLIndexType = enum(c_ulong) {
pub const MTLVertexFormat = enum(c_ulong) {
uchar4 = 3,
float2 = 29,
float4 = 31,
int2 = 33,
uint = 36,
uint2 = 37,

View File

@ -20,11 +20,11 @@ pub const Placement = struct {
cell_offset_x: u32,
cell_offset_y: u32,
/// The offset of the top of the image texture in case we are clipping
/// the top. We don't need an offset_x because we don't support any
/// horizontal scrolling so the width is never clipped from the left.
/// Clipping from the bottom/right is handled by the shader.
offset_y: u32,
/// The source rectangle of the placement.
source_x: u32,
source_y: u32,
source_width: u32,
source_height: u32,
};
/// The map used for storing images.

View File

@ -61,7 +61,7 @@ pub const Cell = extern struct {
pub const Image = extern struct {
grid_pos: [2]f32,
cell_offset: [2]f32,
offset_y: u32,
source_rect: [4]f32,
};
/// The uniforms that are passed to the terminal cell shader.
@ -356,8 +356,8 @@ fn initImagePipeline(device: objc.Object, library: objc.Object) !objc.Object {
.{@as(c_ulong, 3)},
);
attr.setProperty("format", @intFromEnum(mtl.MTLVertexFormat.uint));
attr.setProperty("offset", @as(c_ulong, @offsetOf(Image, "offset_y")));
attr.setProperty("format", @intFromEnum(mtl.MTLVertexFormat.float4));
attr.setProperty("offset", @as(c_ulong, @offsetOf(Image, "source_rect")));
attr.setProperty("bufferIndex", @as(c_ulong, 0));
}

View File

@ -199,8 +199,8 @@ struct ImageVertexIn {
// corner of the image.
float2 cell_offset [[ attribute(2) ]];
// The offset for the texture coordinates.
uint offset_y [[ attribute(3) ]];
// The source rectangle of the texture to sample from.
float4 source_rect [[ attribute(3) ]];
};
struct ImageVertexOut {
@ -231,19 +231,18 @@ vertex ImageVertexOut image_vertex(
position.x = (vid == 0 || vid == 1) ? 1.0f : 0.0f;
position.y = (vid == 0 || vid == 3) ? 0.0f : 1.0f;
// The texture coordinates are in [0, 1]. If we're at top y (y == 0)
// then we need to offset the y by offset_y for clipping.
float2 tex_coord = position;
if (tex_coord.y == 0) tex_coord.y = input.offset_y / image_size.y;
// The texture coordinates start at our source x/y, then add the width/height
// as enabled by our instance id, then normalize to [0, 1]
float2 tex_coord = input.source_rect.xy;
tex_coord += input.source_rect.zw * position;
tex_coord /= image_size;
ImageVertexOut out;
// The position of our image starts at the top-left of the grid cell.
// The position of our image starts at the top-left of the grid cell and
// adds the source rect width/height components.
float2 image_pos = (uniforms.cell_size * input.grid_pos) + input.cell_offset;
// We need to adjust the bottom y of the image by offset y otherwise
// as we scroll the full image will be rendered and stretched.
image_pos += float2(image_size.x, image_size.y - input.offset_y) * position;
image_pos += input.source_rect.zw * position;
out.position = uniforms.projection_matrix * float4(image_pos.x, image_pos.y, 0.0f, 1.0f);
out.tex_coord = tex_coord;

View File

@ -172,6 +172,10 @@ fn display(
.point = placement_point,
.x_offset = d.x_offset,
.y_offset = d.y_offset,
.source_x = d.x,
.source_y = d.y,
.source_width = d.width,
.source_height = d.height,
};
storage.addPlacement(alloc, img.id, d.placement_id, p) catch |err| {
encodeError(&result, err);
@ -184,23 +188,17 @@ fn display(
.after => {
const p_sel = p.selection(img, terminal);
// If we are moving beneath the screen we need to scroll.
// TODO: handle scroll regions
var new_y = p_sel.end.y + 1;
if (new_y >= terminal.rows) {
const scroll_amount = (new_y + 1) - terminal.rows;
terminal.screen.scroll(.{ .screen = @intCast(scroll_amount) }) catch |err| {
// If this failed we just warn, the screen will just be in a
// weird state but nothing fatal.
log.warn("scroll for image failed: {}", .{err});
// We can do better by doing this with pure internal screen state
// but this handles scroll regions.
const height = p_sel.end.y - p_sel.start.y + 1;
for (0..height) |_| terminal.index() catch |err| {
log.warn("failed to move cursor: {}", .{err});
break;
};
new_y = terminal.rows - 1;
}
// Move the cursor
terminal.setCursorPos(
new_y,
p_sel.end.x,
terminal.screen.cursor.y + 1,
p_sel.end.x + 1,
);
},
}

View File

@ -160,6 +160,12 @@ pub const ImageStorage = struct {
x_offset: u32 = 0,
y_offset: u32 = 0,
/// Source rectangle for the image to pull from
source_x: u32 = 0,
source_y: u32 = 0,
source_width: u32 = 0,
source_height: u32 = 0,
/// Returns a selection of the entire rectangle this placement
/// occupies within the screen.
pub fn selection(
@ -175,9 +181,13 @@ pub const ImageStorage = struct {
const cell_width_f64 = terminal_width_f64 / grid_columns_f64;
const cell_height_f64 = terminal_height_f64 / grid_rows_f64;
// Our image width
const width_px = if (self.source_width > 0) self.source_width else image.width;
const height_px = if (self.source_height > 0) self.source_height else image.height;
// Calculate our image size in grid cells
const width_f64: f64 = @floatFromInt(image.width);
const height_f64: f64 = @floatFromInt(image.height);
const width_f64: f64 = @floatFromInt(width_px);
const height_f64: f64 = @floatFromInt(height_px);
const width_cells: u32 = @intFromFloat(@ceil(width_f64 / cell_width_f64));
const height_cells: u32 = @intFromFloat(@ceil(height_f64 / cell_height_f64));