me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1506 from rksm/non-uniform-border-radius-for-quads

Browse source 
non uniform border radius for quads
This commit is contained in:
Héctor Ramón 2022-12-02 21:10:44 +01:00 • committed by GitHub
commit 91d5516474
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 317 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

10
examples/custom_quad/Cargo.toml Normal file
View file

@ -0,0 +1,10 @@
[package]
name = "custom_quad"
version = "0.1.0"
authors = ["Robert Krahn"]
edition = "2021"
publish = false
[dependencies]
iced = { path = "../.." }
iced_native = { path = "../../native" }

160
examples/custom_quad/src/main.rs Normal file
View file

@ -0,0 +1,160 @@
//! This example showcases a drawing a quad.
mod quad {
use iced_native::layout::{self, Layout};
use iced_native::renderer;
use iced_native::widget::{self, Widget};
use iced_native::{Color, Element, Length, Point, Rectangle, Size};
pub struct CustomQuad {
size: f32,
radius: [f32; 4],
border_width: f32,
}
impl CustomQuad {
pub fn new(size: f32, radius: [f32; 4], border_width: f32) -> Self {
Self {
size,
radius,
border_width,
}
}
}
impl<Message, Renderer> Widget<Message, Renderer> for CustomQuad
where
Renderer: renderer::Renderer,
{
fn width(&self) -> Length {
Length::Shrink
}
fn height(&self) -> Length {
Length::Shrink
}
fn layout(
&self,
_renderer: &Renderer,
_limits: &layout::Limits,
) -> layout::Node {
layout::Node::new(Size::new(self.size, self.size))
}
fn draw(
&self,
_state: &widget::Tree,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
_cursor_position: Point,
_viewport: &Rectangle,
) {
renderer.fill_quad(
renderer::Quad {
bounds: layout.bounds(),
border_radius: self.radius.into(),
border_width: self.border_width,
border_color: Color::from_rgb(1.0, 0.0, 0.0),
},
Color::BLACK,
);
}
}
impl<'a, Message, Renderer> From<CustomQuad> for Element<'a, Message, Renderer>
where
Renderer: renderer::Renderer,
{
fn from(circle: CustomQuad) -> Self {
Self::new(circle)
}
}
}
use iced::widget::{column, container, slider, text};
use iced::{Alignment, Element, Length, Sandbox, Settings};
pub fn main() -> iced::Result {
Example::run(Settings::default())
}
struct Example {
radius: [f32; 4],
border_width: f32,
}
#[derive(Debug, Clone, Copy)]
#[allow(clippy::enum_variant_names)]
enum Message {
RadiusTopLeftChanged(f32),
RadiusTopRightChanged(f32),
RadiusBottomRightChanged(f32),
RadiusBottomLeftChanged(f32),
BorderWidthChanged(f32),
}
impl Sandbox for Example {
type Message = Message;
fn new() -> Self {
Self {
radius: [50.0; 4],
border_width: 0.0,
}
}
fn title(&self) -> String {
String::from("Custom widget - Iced")
}
fn update(&mut self, message: Message) {
let [tl, tr, br, bl] = self.radius;
match message {
Message::RadiusTopLeftChanged(radius) => {
self.radius = [radius, tr, br, bl];
}
Message::RadiusTopRightChanged(radius) => {
self.radius = [tl, radius, br, bl];
}
Message::RadiusBottomRightChanged(radius) => {
self.radius = [tl, tr, radius, bl];
}
Message::RadiusBottomLeftChanged(radius) => {
self.radius = [tl, tr, br, radius];
}
Message::BorderWidthChanged(width) => {
self.border_width = width;
}
}
}
fn view(&self) -> Element<Message> {
let [tl, tr, br, bl] = self.radius;
let content = column![
quad::CustomQuad::new(200.0, self.radius, self.border_width),
text(format!("Radius: {tl:.2}/{tr:.2}/{br:.2}/{bl:.2}")),
slider(1.0..=100.0, tl, Message::RadiusTopLeftChanged).step(0.01),
slider(1.0..=100.0, tr, Message::RadiusTopRightChanged).step(0.01),
slider(1.0..=100.0, br, Message::RadiusBottomRightChanged)
.step(0.01),
slider(1.0..=100.0, bl, Message::RadiusBottomLeftChanged)
.step(0.01),
slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged)
.step(0.01),
]
.padding(20)
.spacing(20)
.max_width(500)
.align_items(Alignment::Center);
container(content)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.into()
}
}

2
examples/custom_widget/src/main.rs
View file

@ -61,7 +61,7 @@ mod circle {
renderer.fill_quad(
renderer::Quad {
bounds: layout.bounds(),
border_radius: self.radius,
border_radius: self.radius.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

2
examples/modal/src/main.rs
View file

@ -412,7 +412,7 @@ mod modal {
renderer.fill_quad(
renderer::Quad {
bounds: layout.bounds(),
border_radius: 0.0,
border_radius: renderer::BorderRadius::from(0.0),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

8
glow/src/quad/compatibility.rs
View file

@ -254,7 +254,7 @@ unsafe fn create_buffers(
gl.enable_vertex_attrib_array(4);
gl.vertex_attrib_pointer_f32(
4,
1,
4,
glow::FLOAT,
false,
stride,
@ -268,7 +268,7 @@ unsafe fn create_buffers(
glow::FLOAT,
false,
stride,
4 * (2 + 2 + 4 + 4 + 1),
4 * (2 + 2 + 4 + 4 + 4),
);
gl.enable_vertex_attrib_array(6);
@ -278,7 +278,7 @@ unsafe fn create_buffers(
glow::FLOAT,
false,
stride,
4 * (2 + 2 + 4 + 4 + 1 + 1),
4 * (2 + 2 + 4 + 4 + 4 + 1),
);
gl.bind_vertex_array(None);
@ -307,7 +307,7 @@ pub struct Vertex {
pub border_color: [f32; 4],
/// The border radius of the [`Vertex`].
pub border_radius: f32,
pub border_radius: [f32; 4],
/// The border width of the [`Vertex`].
pub border_width: f32,

4
glow/src/quad/core.rs
View file

@ -218,7 +218,7 @@ unsafe fn create_instance_buffer(
gl.enable_vertex_attrib_array(4);
gl.vertex_attrib_pointer_f32(
4,
1,
4,
glow::FLOAT,
false,
stride,
@ -233,7 +233,7 @@ unsafe fn create_instance_buffer(
glow::FLOAT,
false,
stride,
4 * (2 + 2 + 4 + 4 + 1),
4 * (2 + 2 + 4 + 4 + 4),
);
gl.vertex_attrib_divisor(5, 1);

24
glow/src/shader/compatibility/quad.frag
View file

@ -12,7 +12,7 @@ varying vec4 v_Color;
varying vec4 v_BorderColor;
varying vec2 v_Pos;
varying vec2 v_Scale;
varying float v_BorderRadius;
varying vec4 v_BorderRadius;
varying float v_BorderWidth;
float _distance(vec2 frag_coord, vec2 position, vec2 size, float radius)
@ -33,10 +33,26 @@ float _distance(vec2 frag_coord, vec2 position, vec2 size, float radius)
return sqrt(distance.x * distance.x + distance.y * distance.y);
}
float selectBorderRadius(vec4 radi, vec2 position, vec2 center)
{
float rx = radi.x;
float ry = radi.y;
rx = position.x > center.x ? radi.y : radi.x;
ry = position.x > center.x ? radi.z : radi.w;
rx = position.y > center.y ? ry : rx;
return rx;
}
void main() {
vec2 fragCoord = vec2(gl_FragCoord.x, u_ScreenHeight - gl_FragCoord.y);
float internal_border = max(v_BorderRadius - v_BorderWidth, 0.0);
float border_radius = selectBorderRadius(
v_BorderRadius,
fragCoord,
(v_Pos + v_Scale * 0.5).xy
);
float internal_border = max(border_radius - v_BorderWidth, 0.0);
float internal_distance = _distance(
fragCoord,
@ -57,11 +73,11 @@ void main() {
fragCoord,
v_Pos,
v_Scale,
v_BorderRadius
border_radius
);
float radius_alpha =
1.0 - smoothstep(max(v_BorderRadius - 0.5, 0.0), v_BorderRadius + 0.5, d);
1.0 - smoothstep(max(border_radius - 0.5, 0.0), border_radius + 0.5, d);
gl_FragColor = vec4(mixed_color.xyz, mixed_color.w * radius_alpha);
}

12
glow/src/shader/compatibility/quad.vert
View file

@ -5,7 +5,7 @@ attribute vec2 i_Pos;
attribute vec2 i_Scale;
attribute vec4 i_Color;
attribute vec4 i_BorderColor;
attribute float i_BorderRadius;
attribute vec4 i_BorderRadius;
attribute float i_BorderWidth;
attribute vec2 q_Pos;
@ -13,7 +13,7 @@ varying vec4 v_Color;
varying vec4 v_BorderColor;
varying vec2 v_Pos;
varying vec2 v_Scale;
varying float v_BorderRadius;
varying vec4 v_BorderRadius;
varying float v_BorderWidth;
@ -21,9 +21,11 @@ void main() {
vec2 p_Pos = i_Pos * u_Scale;
vec2 p_Scale = i_Scale * u_Scale;
float i_BorderRadius = min(
i_BorderRadius,
min(i_Scale.x, i_Scale.y) / 2.0
vec4 i_BorderRadius = vec4(
min(i_BorderRadius.x, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.y, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.z, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.w, min(i_Scale.x, i_Scale.y) / 2.0)
);
mat4 i_Transform = mat4(

24
glow/src/shader/core/quad.frag
View file

@ -17,7 +17,7 @@ in vec4 v_Color;
in vec4 v_BorderColor;
in vec2 v_Pos;
in vec2 v_Scale;
in float v_BorderRadius;
in vec4 v_BorderRadius;
in float v_BorderWidth;
float fDistance(vec2 frag_coord, vec2 position, vec2 size, float radius)
@ -38,14 +38,30 @@ float fDistance(vec2 frag_coord, vec2 position, vec2 size, float radius)
return sqrt(distance.x * distance.x + distance.y * distance.y);
}
float selectBorderRadius(vec4 radi, vec2 position, vec2 center)
{
float rx = radi.x;
float ry = radi.y;
rx = position.x > center.x ? radi.y : radi.x;
ry = position.x > center.x ? radi.z : radi.w;
rx = position.y > center.y ? ry : rx;
return rx;
}
void main() {
vec4 mixed_color;
vec2 fragCoord = vec2(gl_FragCoord.x, u_ScreenHeight - gl_FragCoord.y);
float border_radius = selectBorderRadius(
v_BorderRadius,
fragCoord,
(v_Pos + v_Scale * 0.5).xy
);
// TODO: Remove branching (?)
if(v_BorderWidth > 0.0) {
float internal_border = max(v_BorderRadius - v_BorderWidth, 0.0);
float internal_border = max(border_radius - v_BorderWidth, 0.0);
float internal_distance = fDistance(
fragCoord,
@ -69,11 +85,11 @@ void main() {
fragCoord,
v_Pos,
v_Scale,
v_BorderRadius
border_radius
);
float radius_alpha =
1.0 - smoothstep(max(v_BorderRadius - 0.5, 0.0), v_BorderRadius + 0.5, d);
1.0 - smoothstep(max(border_radius - 0.5, 0.0), border_radius + 0.5, d);
gl_FragColor = vec4(mixed_color.xyz, mixed_color.w * radius_alpha);
}

12
glow/src/shader/core/quad.vert
View file

@ -5,14 +5,14 @@ in vec2 i_Pos;
in vec2 i_Scale;
in vec4 i_Color;
in vec4 i_BorderColor;
in float i_BorderRadius;
in vec4 i_BorderRadius;
in float i_BorderWidth;
out vec4 v_Color;
out vec4 v_BorderColor;
out vec2 v_Pos;
out vec2 v_Scale;
out float v_BorderRadius;
out vec4 v_BorderRadius;
out float v_BorderWidth;
vec2 positions[4] = vec2[](
@ -27,9 +27,11 @@ void main() {
vec2 p_Pos = i_Pos * u_Scale;
vec2 p_Scale = i_Scale * u_Scale;
float i_BorderRadius = min(
i_BorderRadius,
min(i_Scale.x, i_Scale.y) / 2.0
vec4 i_BorderRadius = vec4(
min(i_BorderRadius.x, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.y, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.z, min(i_Scale.x, i_Scale.y) / 2.0),
min(i_BorderRadius.w, min(i_Scale.x, i_Scale.y) / 2.0)
);
mat4 i_Transform = mat4(

2
graphics/src/layer/quad.rs
View file

@ -17,7 +17,7 @@ pub struct Quad {
pub border_color: [f32; 4],
/// The border radius of the [`Quad`].
pub border_radius: f32,
pub border_radius: [f32; 4],
/// The border width of the [`Quad`].
pub border_width: f32,

2
graphics/src/primitive.rs
View file

@ -42,7 +42,7 @@ pub enum Primitive {
/// The background of the quad
background: Background,
/// The border radius of the quad
border_radius: f32,
border_radius: [f32; 4],
/// The border width of the quad
border_width: f32,
/// The border color of the quad

2
graphics/src/renderer.rs
View file

@ -109,7 +109,7 @@ where
self.primitives.push(Primitive::Quad {
bounds: quad.bounds,
background: background.into(),
border_radius: quad.border_radius,
border_radius: quad.border_radius.into(),
border_width: quad.border_width,
border_color: quad.border_color,
});

2
native/src/element.rs
View file

@ -519,7 +519,7 @@ where
bounds: layout.bounds(),
border_color: color,
border_width: 1.0,
border_radius: 0.0,
border_radius: 0.0.into(),
},
Color::TRANSPARENT,
);

4
native/src/overlay/menu.rs
View file

@ -287,7 +287,7 @@ where
},
border_color: appearance.border_color,
border_width: appearance.border_width,
border_radius: appearance.border_radius,
border_radius: appearance.border_radius.into(),
},
appearance.background,
);
@ -479,7 +479,7 @@ where
bounds,
border_color: Color::TRANSPARENT,
border_width: 0.0,
border_radius: appearance.border_radius,
border_radius: appearance.border_radius.into(),
},
appearance.selected_background,
);

25
native/src/renderer.rs
View file

@ -50,7 +50,7 @@ pub struct Quad {
pub bounds: Rectangle,
/// The border radius of the [`Quad`].
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the [`Quad`].
pub border_width: f32,
@ -59,6 +59,29 @@ pub struct Quad {
pub border_color: Color,
}
/// The border radi for the corners of a graphics primitive in the order:
/// top-left, top-right, bottom-right, bottom-left.
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub struct BorderRadius([f32; 4]);
impl From<f32> for BorderRadius {
fn from(w: f32) -> Self {
Self([w; 4])
}
}
impl From<[f32; 4]> for BorderRadius {
fn from(radi: [f32; 4]) -> Self {
Self(radi)
}
}
impl From<BorderRadius> for [f32; 4] {
fn from(radi: BorderRadius) -> Self {
radi.0
}
}
/// The styling attributes of a [`Renderer`].
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct Style {

4
native/src/widget/button.rs
View file

@ -393,7 +393,7 @@ where
y: bounds.y + styling.shadow_offset.y,
..bounds
},
border_radius: styling.border_radius,
border_radius: styling.border_radius.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -404,7 +404,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: styling.border_radius,
border_radius: styling.border_radius.into(),
border_width: styling.border_width,
border_color: styling.border_color,
},

2
native/src/widget/checkbox.rs
View file

@ -236,7 +236,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: custom_style.border_radius,
border_radius: custom_style.border_radius.into(),
border_width: custom_style.border_width,
border_color: custom_style.border_color,
},

2
native/src/widget/container.rs
View file

@ -321,7 +321,7 @@ pub fn draw_background<Renderer>(
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: appearance.border_radius,
border_radius: appearance.border_radius.into(),
border_width: appearance.border_width,
border_color: appearance.border_color,
},

2
native/src/widget/pane_grid.rs
View file

@ -877,7 +877,7 @@ pub fn draw<Renderer, T>(
height: split_region.height,
},
},
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

2
native/src/widget/pick_list.rs
View file

@ -536,7 +536,7 @@ pub fn draw<T, Renderer>(
bounds,
border_color: style.border_color,
border_width: style.border_width,
border_radius: style.border_radius,
border_radius: style.border_radius.into(),
},
style.background,
);

4
native/src/widget/progress_bar.rs
View file

@ -129,7 +129,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds: Rectangle { ..bounds },
border_radius: style.border_radius,
border_radius: style.border_radius.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -143,7 +143,7 @@ where
width: active_progress_width,
..bounds
},
border_radius: style.border_radius,
border_radius: style.border_radius.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

4
native/src/widget/radio.rs
View file

@ -245,7 +245,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: size / 2.0,
border_radius: (size / 2.0).into(),
border_width: custom_style.border_width,
border_color: custom_style.border_color,
},
@ -261,7 +261,7 @@ where
width: bounds.width - dot_size,
height: bounds.height - dot_size,
},
border_radius: dot_size / 2.0,
border_radius: (dot_size / 2.0).into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

2
native/src/widget/rule.rs
View file

@ -123,7 +123,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: style.radius,
border_radius: style.radius.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

4
native/src/widget/scrollable.rs
View file

@ -704,7 +704,7 @@ pub fn draw<Renderer>(
renderer.fill_quad(
renderer::Quad {
bounds: scrollbar.bounds,
border_radius: style.border_radius,
border_radius: style.border_radius.into(),
border_width: style.border_width,
border_color: style.border_color,
},
@ -721,7 +721,7 @@ pub fn draw<Renderer>(
renderer.fill_quad(
renderer::Quad {
bounds: scrollbar.scroller.bounds,
border_radius: style.scroller.border_radius,
border_radius: style.scroller.border_radius.into(),
border_width: style.scroller.border_width,
border_color: style.scroller.border_color,
},

6
native/src/widget/slider.rs
View file

@ -380,7 +380,7 @@ pub fn draw<T, R>(
width: bounds.width,
height: 2.0,
},
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -395,7 +395,7 @@ pub fn draw<T, R>(
width: bounds.width,
height: 2.0,
},
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -435,7 +435,7 @@ pub fn draw<T, R>(
width: handle_width,
height: handle_height,
},
border_radius: handle_border_radius,
border_radius: handle_border_radius.into(),
border_width: style.handle.border_width,
border_color: style.handle.border_color,
},

6
native/src/widget/text_input.rs
View file

@ -801,7 +801,7 @@ pub fn draw<Renderer>(
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: appearance.border_radius,
border_radius: appearance.border_radius.into(),
border_width: appearance.border_width,
border_color: appearance.border_color,
},
@ -833,7 +833,7 @@ pub fn draw<Renderer>(
width: 1.0,
height: text_bounds.height,
},
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -877,7 +877,7 @@ pub fn draw<Renderer>(
width,
height: text_bounds.height,
},
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

4
native/src/widget/toggler.rs
View file

@ -278,7 +278,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds: toggler_background_bounds,
border_radius,
border_radius: border_radius.into(),
border_width: 1.0,
border_color: style
.background_border
@ -302,7 +302,7 @@ where
renderer.fill_quad(
renderer::Quad {
bounds: toggler_foreground_bounds,
border_radius,
border_radius: border_radius.into(),
border_width: 1.0,
border_color: style
.foreground_border

2
wgpu/src/quad.rs
View file

@ -91,7 +91,7 @@ impl Pipeline {
2 => Float32x2,
3 => Float32x4,
4 => Float32x4,
5 => Float32,
5 => Float32x4,
6 => Float32,
),
},

47
wgpu/src/shader/quad.wgsl
View file

@ -11,7 +11,7 @@ struct VertexInput {
@location(2) scale: vec2<f32>,
@location(3) color: vec4<f32>,
@location(4) border_color: vec4<f32>,
@location(5) border_radius: f32,
@location(5) border_radius: vec4<f32>,
@location(6) border_width: f32,
}
@ -21,7 +21,7 @@ struct VertexOutput {
@location(1) border_color: vec4<f32>,
@location(2) pos: vec2<f32>,
@location(3) scale: vec2<f32>,
@location(4) border_radius: f32,
@location(4) border_radius: vec4<f32>,
@location(5) border_width: f32,
}
@ -32,9 +32,12 @@ fn vs_main(input: VertexInput) -> VertexOutput {
var pos: vec2<f32> = input.pos * globals.scale;
var scale: vec2<f32> = input.scale * globals.scale;
var border_radius: f32 = min(
input.border_radius,
min(input.scale.x, input.scale.y) / 2.0
var min_border_radius = min(input.scale.x, input.scale.y) * 0.5;
var border_radius: vec4<f32> = vec4<f32>(
min(input.border_radius.x, min_border_radius),
min(input.border_radius.y, min_border_radius),
min(input.border_radius.z, min_border_radius),
min(input.border_radius.w, min_border_radius)
);
var transform: mat4x4<f32> = mat4x4<f32>(
@ -76,6 +79,18 @@ fn distance_alg(
return sqrt(dist.x * dist.x + dist.y * dist.y);
}
// Based on the fragement position and the center of the quad, select one of the 4 radi.
// Order matches CSS border radius attribute:
// radi.x = top-left, radi.y = top-right, radi.z = bottom-right, radi.w = bottom-left
fn select_border_radius(radi: vec4<f32>, position: vec2<f32>, center: vec2<f32>) -> f32 {
var rx = radi.x;
var ry = radi.y;
rx = select(radi.x, radi.y, position.x > center.x);
ry = select(radi.w, radi.z, position.x > center.x);
rx = select(rx, ry, position.y > center.y);
return rx;
}
@fragment
fn fs_main(
@ -83,14 +98,17 @@ fn fs_main(
) -> @location(0) vec4<f32> {
var mixed_color: vec4<f32> = input.color;
var border_radius = select_border_radius(
input.border_radius,
input.position.xy,
(input.pos + input.scale * 0.5).xy
);
if (input.border_width > 0.0) {
var internal_border: f32 = max(
input.border_radius - input.border_width,
0.0
);
var internal_border: f32 = max(border_radius - input.border_width, 0.0);
var internal_distance: f32 = distance_alg(
vec2<f32>(input.position.x, input.position.y),
input.position.xy,
input.pos + vec2<f32>(input.border_width, input.border_width),
input.scale - vec2<f32>(input.border_width * 2.0, input.border_width * 2.0),
internal_border
@ -109,13 +127,14 @@ fn fs_main(
vec2<f32>(input.position.x, input.position.y),
input.pos,
input.scale,
input.border_radius
border_radius
);
var radius_alpha: f32 = 1.0 - smoothstep(
max(input.border_radius - 0.5, 0.0),
input.border_radius + 0.5,
dist);
max(border_radius - 0.5, 0.0),
border_radius + 0.5,
dist
);
return vec4<f32>(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha);
}