Add border radius support for image
This commit is contained in:
parent
c896cd8d31
commit
44e68aa4b6
15 changed files with 256 additions and 188 deletions
|
|
@ -9,22 +9,25 @@ struct Globals {
|
|||
|
||||
struct VertexInput {
|
||||
@builtin(vertex_index) vertex_index: u32,
|
||||
@location(0) pos: vec2<f32>,
|
||||
@location(1) center: vec2<f32>,
|
||||
@location(2) scale: vec2<f32>,
|
||||
@location(3) rotation: f32,
|
||||
@location(4) opacity: f32,
|
||||
@location(5) atlas_pos: vec2<f32>,
|
||||
@location(6) atlas_scale: vec2<f32>,
|
||||
@location(7) layer: i32,
|
||||
@location(8) snap: u32,
|
||||
@location(0) center: vec2<f32>,
|
||||
@location(1) clip_bounds: vec4<f32>,
|
||||
@location(2) border_radius: vec4<f32>,
|
||||
@location(3) tile: vec4<f32>,
|
||||
@location(4) rotation: f32,
|
||||
@location(5) opacity: f32,
|
||||
@location(6) atlas_pos: vec2<f32>,
|
||||
@location(7) atlas_scale: vec2<f32>,
|
||||
@location(8) layer: i32,
|
||||
@location(9) snap: u32,
|
||||
}
|
||||
|
||||
struct VertexOutput {
|
||||
@builtin(position) position: vec4<f32>,
|
||||
@location(0) uv: vec2<f32>,
|
||||
@location(1) layer: f32, // this should be an i32, but naga currently reads that as requiring interpolation.
|
||||
@location(2) opacity: f32,
|
||||
@location(0) clip_bounds: vec4<f32>,
|
||||
@location(1) border_radius: vec4<f32>,
|
||||
@location(2) uv: vec2<f32>,
|
||||
@location(3) layer: f32, // this should be an i32, but naga currently reads that as requiring interpolation.
|
||||
@location(4) opacity: f32,
|
||||
}
|
||||
|
||||
@vertex
|
||||
|
|
@ -39,8 +42,11 @@ fn vs_main(input: VertexInput) -> VertexOutput {
|
|||
out.layer = f32(input.layer);
|
||||
out.opacity = input.opacity;
|
||||
|
||||
let tile = input.tile;
|
||||
let center = input.center;
|
||||
|
||||
// Calculate the vertex position and move the center to the origin
|
||||
v_pos = input.pos + v_pos * input.scale - input.center;
|
||||
v_pos = tile.xy + v_pos * tile.zw - center;
|
||||
|
||||
// Apply the rotation around the center of the image
|
||||
let cos_rot = cos(input.rotation);
|
||||
|
|
@ -53,19 +59,39 @@ fn vs_main(input: VertexInput) -> VertexOutput {
|
|||
);
|
||||
|
||||
// Calculate the final position of the vertex
|
||||
out.position = vec4(vec2(globals.scale_factor), 1.0, 1.0) * (vec4<f32>(input.center, 0.0, 0.0) + rotate * vec4<f32>(v_pos, 0.0, 1.0));
|
||||
out.position = vec4(vec2(globals.scale_factor), 1.0, 1.0) * (vec4<f32>(center, 0.0, 0.0) + rotate * vec4<f32>(v_pos, 0.0, 1.0));
|
||||
|
||||
if bool(input.snap) {
|
||||
out.position = round(out.position);
|
||||
}
|
||||
|
||||
out.position = globals.transform * out.position;
|
||||
out.clip_bounds = globals.scale_factor * input.clip_bounds;
|
||||
out.border_radius = globals.scale_factor * input.border_radius;
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
@fragment
|
||||
fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
|
||||
// Sample the texture at the given UV coordinate and layer.
|
||||
return textureSample(u_texture, u_sampler, input.uv, i32(input.layer)) * vec4<f32>(1.0, 1.0, 1.0, input.opacity);
|
||||
let fragment = input.position.xy;
|
||||
let position = input.clip_bounds.xy;
|
||||
let scale = input.clip_bounds.zw;
|
||||
|
||||
let d = rounded_box_sdf(
|
||||
2.0 * (fragment - position - scale / 2.0),
|
||||
scale,
|
||||
input.border_radius * 2.0,
|
||||
);
|
||||
|
||||
let antialias: f32 = clamp(0.5 - d, 0.0, 1.0);
|
||||
|
||||
return textureSample(u_texture, u_sampler, input.uv, i32(input.layer)) * vec4<f32>(1.0, 1.0, 1.0, antialias * input.opacity);
|
||||
}
|
||||
|
||||
fn rounded_box_sdf(p: vec2<f32>, size: vec2<f32>, corners: vec4<f32>) -> f32 {
|
||||
var box_half = select(corners.yz, corners.xw, p.x > 0.0);
|
||||
var corner = select(box_half.y, box_half.x, p.y > 0.0);
|
||||
var q = abs(p) - size + corner;
|
||||
return min(max(q.x, q.y), 0.0) + length(max(q, vec2(0.0))) - corner;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue