struct Globals { transform: mat4x4, scale: f32, } @group(0) @binding(0) var globals: Globals; fn distance_alg( frag_coord: vec2, position: vec2, size: vec2, radius: f32 ) -> f32 { var inner_half_size: vec2 = (size - vec2(radius, radius) * 2.0) / 2.0; var top_left: vec2 = position + vec2(radius, radius); return rounded_box_sdf(frag_coord - top_left - inner_half_size, inner_half_size, 0.0); } // Given a vector from a point to the center of a rounded rectangle of the given `size` and // border `radius`, determines the point's distance from the nearest edge of the rounded rectangle fn rounded_box_sdf(to_center: vec2, size: vec2, radius: f32) -> f32 { return length(max(abs(to_center) - size + vec2(radius, radius), vec2(0.0, 0.0))) - radius; } // Based on the fragment position and the center of the quad, select one of the 4 radii. // Order matches CSS border radius attribute: // radii.x = top-left, radii.y = top-right, radii.z = bottom-right, radii.w = bottom-left fn select_border_radius(radii: vec4, position: vec2, center: vec2) -> f32 { var rx = radii.x; var ry = radii.y; rx = select(radii.x, radii.y, position.x > center.x); ry = select(radii.w, radii.z, position.x > center.x); rx = select(rx, ry, position.y > center.y); return rx; }