struct Globals { transform: mat4x4, scale: f32, } @group(0) @binding(0) var globals: Globals; struct VertexInput { @location(0) v_pos: vec2, @location(1) pos: vec2, @location(2) scale: vec2, @location(3) color: vec4, @location(4) border_color: vec4, @location(5) border_radius: f32, @location(6) border_width: f32, } struct VertexOutput { @builtin(position) position: vec4, @location(0) color: vec4, @location(1) border_color: vec4, @location(2) pos: vec2, @location(3) scale: vec2, @location(4) border_radius: f32, @location(5) border_width: f32, } @vertex fn vs_main(input: VertexInput) -> VertexOutput { var out: VertexOutput; var pos: vec2 = input.pos * globals.scale; var scale: vec2 = input.scale * globals.scale; var border_radius: f32 = min( input.border_radius, min(input.scale.x, input.scale.y) / 2.0 ); var transform: mat4x4 = mat4x4( vec4(scale.x + 1.0, 0.0, 0.0, 0.0), vec4(0.0, scale.y + 1.0, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), vec4(pos - vec2(0.5, 0.5), 0.0, 1.0) ); out.color = input.color; out.border_color = input.border_color; out.pos = pos; out.scale = scale; out.border_radius = border_radius * globals.scale; out.border_width = input.border_width * globals.scale; out.position = globals.transform * transform * vec4(input.v_pos, 0.0, 1.0); return out; } fn distance_alg( frag_coord: vec2, position: vec2, size: vec2, radius: f32 ) -> f32 { var inner_size: vec2 = size - vec2(radius, radius) * 2.0; var top_left: vec2 = position + vec2(radius, radius); var bottom_right: vec2 = top_left + inner_size; var top_left_distance: vec2 = top_left - frag_coord; var bottom_right_distance: vec2 = frag_coord - bottom_right; var dist: vec2 = vec2( max(max(top_left_distance.x, bottom_right_distance.x), 0.0), max(max(top_left_distance.y, bottom_right_distance.y), 0.0) ); return sqrt(dist.x * dist.x + dist.y * dist.y); } @fragment fn fs_main( input: VertexOutput ) -> @location(0) vec4 { var mixed_color: vec4 = input.color; if (input.border_width > 0.0) { var internal_border: f32 = max( input.border_radius - input.border_width, 0.0 ); var internal_distance: f32 = distance_alg( vec2(input.position.x, input.position.y), input.pos + vec2(input.border_width, input.border_width), input.scale - vec2(input.border_width * 2.0, input.border_width * 2.0), internal_border ); var border_mix: f32 = smoothstep( max(internal_border - 0.5, 0.0), internal_border + 0.5, internal_distance ); mixed_color = mix(input.color, input.border_color, vec4(border_mix, border_mix, border_mix, border_mix)); } var dist: f32 = distance_alg( vec2(input.position.x, input.position.y), input.pos, input.scale, input.border_radius ); var radius_alpha: f32 = 1.0 - smoothstep( max(input.border_radius - 0.5, 0.0), input.border_radius + 0.5, dist); return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); }