Add border_width and border_color to Quad

wgpu/src/shader/quad.frag

@@ -1,14 +1,17 @@
 #version 450
 
 layout(location = 0) in vec4 v_Color;
-layout(location = 1) in vec2 v_Pos;
-layout(location = 2) in vec2 v_Scale;
-layout(location = 3) in float v_BorderRadius;
+layout(location = 1) in vec4 v_BorderColor;
+layout(location = 2) in vec2 v_Pos;
+layout(location = 3) in vec2 v_Scale;
+layout(location = 4) in float v_BorderRadius;
+layout(location = 5) in float v_BorderWidth;
 
 layout(location = 0) out vec4 o_Color;
 
-float rounded(in vec2 frag_coord, in vec2 position, in vec2 size, float radius, float s)
+float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius)
 {
+    // TODO: Try SDF approach: https://www.shadertoy.com/view/wd3XRN
     vec2 inner_size = size - vec2(radius, radius) * 2.0;
     vec2 top_left = position + vec2(radius, radius);
     vec2 bottom_right = top_left + inner_size;
@@ -21,13 +24,43 @@ float rounded(in vec2 frag_coord, in vec2 position, in vec2 size, float radius,
         max(max(top_left_distance.y, bottom_right_distance.y), 0)
     );
 
-    float d = sqrt(distance.x * distance.x + distance.y * distance.y);
-
-    return 1.0 - smoothstep(radius - s, radius + s, d);
+    return sqrt(distance.x * distance.x + distance.y * distance.y);
 }
 
 void main() {
-    float radius_alpha = rounded(gl_FragCoord.xy, v_Pos, v_Scale, v_BorderRadius, 0.5);
+    vec4 mixed_color;
 
-    o_Color = vec4(v_Color.xyz, v_Color.w * radius_alpha);
+    // TODO: Remove branching (?)
+    if(v_BorderWidth > 0) {
+        float internal_border = max(v_BorderRadius - v_BorderWidth, 0);
+
+        float internal_distance = distance(
+            gl_FragCoord.xy,
+            v_Pos + vec2(v_BorderWidth),
+            v_Scale - vec2(v_BorderWidth * 2.0),
+            internal_border
+        );
+
+        float border_mix = smoothstep(
+            max(internal_border - 0.5, 0.0),
+            internal_border + 0.5,
+            internal_distance
+        );
+
+        mixed_color = mix(v_Color, v_BorderColor, border_mix);
+    } else {
+        mixed_color = v_Color;
+    }
+
+    float d = distance(
+        gl_FragCoord.xy,
+        v_Pos,
+        v_Scale,
+        v_BorderRadius
+    );
+
+    float radius_alpha =
+        1.0 - smoothstep(max(v_BorderRadius - 0.5, 0), v_BorderRadius + 0.5, d);
+
+    o_Color = vec4(mixed_color.xyz, mixed_color.w * radius_alpha);
 }

wgpu/src/shader/quad.vert

@@ -4,7 +4,9 @@ layout(location = 0) in vec2 v_Pos;
 layout(location = 1) in vec2 i_Pos;
 layout(location = 2) in vec2 i_Scale;
 layout(location = 3) in vec4 i_Color;
-layout(location = 4) in float i_BorderRadius;
+layout(location = 4) in vec4 i_BorderColor;
+layout(location = 5) in float i_BorderRadius;
+layout(location = 6) in float i_BorderWidth;
 
 layout (set = 0, binding = 0) uniform Globals {
     mat4 u_Transform;
@@ -12,9 +14,11 @@ layout (set = 0, binding = 0) uniform Globals {
 };
 
 layout(location = 0) out vec4 o_Color;
-layout(location = 1) out vec2 o_Pos;
-layout(location = 2) out vec2 o_Scale;
-layout(location = 3) out float o_BorderRadius;
+layout(location = 1) out vec4 o_BorderColor;
+layout(location = 2) out vec2 o_Pos;
+layout(location = 3) out vec2 o_Scale;
+layout(location = 4) out float o_BorderRadius;
+layout(location = 5) out float o_BorderWidth;
 
 void main() {
     vec2 p_Pos = i_Pos * u_Scale;
@@ -28,9 +32,11 @@ void main() {
     );
 
     o_Color = i_Color;
+    o_BorderColor = i_BorderColor;
     o_Pos = p_Pos;
     o_Scale = p_Scale;
     o_BorderRadius = i_BorderRadius * u_Scale;
+    o_BorderWidth = i_BorderWidth * u_Scale;
 
     gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0);
 }