From cc906c83cdf896d94b7ccf91258466714be631f6 Mon Sep 17 00:00:00 2001 From: Nick Senger Date: Wed, 8 Nov 2023 19:12:53 -0800 Subject: feat: quad shadows --- wgpu/src/layer.rs | 6 ++++++ wgpu/src/quad.rs | 9 +++++++++ wgpu/src/quad/solid.rs | 6 ++++++ wgpu/src/shader/quad.wgsl | 18 +++++++----------- wgpu/src/shader/quad/solid.wgsl | 36 +++++++++++++++++++++++++++++++----- 5 files changed, 59 insertions(+), 16 deletions(-) (limited to 'wgpu') diff --git a/wgpu/src/layer.rs b/wgpu/src/layer.rs index 4ad12a88..7b54601b 100644 --- a/wgpu/src/layer.rs +++ b/wgpu/src/layer.rs @@ -198,6 +198,9 @@ impl<'a> Layer<'a> { border_radius, border_width, border_color, + shadow_color, + shadow_offset, + shadow_blur_radius, } => { let layer = &mut layers[current_layer]; @@ -210,6 +213,9 @@ impl<'a> Layer<'a> { border_color: color::pack(*border_color), border_radius: *border_radius, border_width: *border_width, + shadow_color: shadow_color.into_linear(), + shadow_offset: (*shadow_offset).into(), + shadow_blur_radius: *shadow_blur_radius, }; layer.quads.add(quad, background); diff --git a/wgpu/src/quad.rs b/wgpu/src/quad.rs index 4bcf9a66..cda1bec9 100644 --- a/wgpu/src/quad.rs +++ b/wgpu/src/quad.rs @@ -201,6 +201,15 @@ pub struct Quad { /// The border width of the [`Quad`]. pub border_width: f32, + + /// The shadow color of the [`Quad`]. + pub shadow_color: [f32; 4], + + /// The shadow offset of the [`Quad`]. + pub shadow_offset: [f32; 2], + + /// The shadow blur radius of the [`Quad`]. + pub shadow_blur_radius: f32, } /// A group of [`Quad`]s rendered together. diff --git a/wgpu/src/quad/solid.rs b/wgpu/src/quad/solid.rs index 90e7f98e..771eee34 100644 --- a/wgpu/src/quad/solid.rs +++ b/wgpu/src/quad/solid.rs @@ -105,6 +105,12 @@ impl Pipeline { 4 => Float32x4, // Border width 5 => Float32, + // Shadow color + 6 => Float32x4, + // Shadow offset + 7 => Float32x2, + // Shadow blur radius + 8 => Float32, ), }], }, diff --git a/wgpu/src/shader/quad.wgsl b/wgpu/src/shader/quad.wgsl index f919cfe2..4de73362 100644 --- a/wgpu/src/shader/quad.wgsl +++ b/wgpu/src/shader/quad.wgsl @@ -11,19 +11,15 @@ fn distance_alg( size: vec2, radius: f32 ) -> f32 { - var inner_size: vec2 = size - vec2(radius, radius) * 2.0; + var inner_half_size: vec2 = (size - vec2(radius, radius) * 2.0) / 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 rounded_box_sdf(frag_coord - top_left - inner_half_size, inner_half_size, 0.0); +} - return sqrt(dist.x * dist.x + dist.y * dist.y); +// 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 fragement position and the center of the quad, select one of the 4 radi. diff --git a/wgpu/src/shader/quad/solid.wgsl b/wgpu/src/shader/quad/solid.wgsl index f84dd7ab..cb4a3816 100644 --- a/wgpu/src/shader/quad/solid.wgsl +++ b/wgpu/src/shader/quad/solid.wgsl @@ -6,6 +6,9 @@ struct SolidVertexInput { @location(3) border_color: vec4, @location(4) border_radius: vec4, @location(5) border_width: f32, + @location(6) shadow_color: vec4, + @location(7) shadow_offset: vec2, + @location(8) shadow_blur_radius: f32, } struct SolidVertexOutput { @@ -16,14 +19,19 @@ struct SolidVertexOutput { @location(3) scale: vec2, @location(4) border_radius: vec4, @location(5) border_width: f32, + @location(6) shadow_color: vec4, + @location(7) shadow_offset: vec2, + @location(8) shadow_blur_radius: f32, } @vertex fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { var out: SolidVertexOutput; - var pos: vec2 = input.pos * globals.scale; - var scale: vec2 = input.scale * globals.scale; + var pos: vec2 = (input.pos + min(input.shadow_offset, vec2(0.0, 0.0)) - input.shadow_blur_radius) * globals.scale; + var quad_pos: vec2 = input.pos * globals.scale; + var scale: vec2 = (input.scale + vec2(abs(input.shadow_offset.x), abs(input.shadow_offset.y)) + input.shadow_blur_radius * 2.0) * globals.scale; + var quad_scale: vec2 = input.scale * globals.scale; var min_border_radius = min(input.scale.x, input.scale.y) * 0.5; var border_radius: vec4 = vec4( @@ -43,10 +51,13 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { out.position = globals.transform * transform * vec4(vertex_position(input.vertex_index), 0.0, 1.0); out.color = input.color; out.border_color = input.border_color; - out.pos = pos; - out.scale = scale; + out.pos = quad_pos; + out.scale = quad_scale; out.border_radius = border_radius * globals.scale; out.border_width = input.border_width * globals.scale; + out.shadow_color = input.shadow_color; + out.shadow_offset = input.shadow_offset * globals.scale; + out.shadow_blur_radius = input.shadow_blur_radius * globals.scale; return out; } @@ -95,5 +106,20 @@ fn solid_fs_main( dist ); - return vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); + let quad_color = vec4(mixed_color.x, mixed_color.y, mixed_color.z, mixed_color.w * radius_alpha); + + if input.shadow_color.a > 0.0 { + let shadow_distance = rounded_box_sdf(input.position.xy - input.pos - input.shadow_offset - (input.scale / 2.0), input.scale / 2.0, border_radius); + let shadow_alpha = 1.0 - smoothstep(-input.shadow_blur_radius, input.shadow_blur_radius, shadow_distance); + let shadow_color = input.shadow_color; + let base_color = select( + vec4(shadow_color.x, shadow_color.y, shadow_color.z, 0.0), + quad_color, + quad_color.a > 0.0 + ); + + return mix(base_color, shadow_color, (1.0 - radius_alpha) * shadow_alpha); + } else { + return quad_color; + } } -- cgit From b7b457a575cdd103915994f640c50262ce30a7c5 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 12:11:18 +0100 Subject: Make `shadow` optional in `renderer::Quad` --- wgpu/src/layer.rs | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'wgpu') diff --git a/wgpu/src/layer.rs b/wgpu/src/layer.rs index 7b54601b..cb91878d 100644 --- a/wgpu/src/layer.rs +++ b/wgpu/src/layer.rs @@ -12,7 +12,9 @@ pub use text::Text; use crate::core; use crate::core::alignment; -use crate::core::{Color, Font, Pixels, Point, Rectangle, Size, Vector}; +use crate::core::{ + Color, Font, Pixels, Point, Rectangle, Shadow, Size, Vector, +}; use crate::graphics; use crate::graphics::color; use crate::graphics::Viewport; @@ -198,12 +200,16 @@ impl<'a> Layer<'a> { border_radius, border_width, border_color, - shadow_color, - shadow_offset, - shadow_blur_radius, + shadow, } => { let layer = &mut layers[current_layer]; + let shadow = shadow.unwrap_or_else(|| Shadow { + color: Color::TRANSPARENT, + offset: Vector::ZERO, + blur_radius: 0.0, + }); + let quad = Quad { position: [ bounds.x + translation.x, @@ -213,9 +219,9 @@ impl<'a> Layer<'a> { border_color: color::pack(*border_color), border_radius: *border_radius, border_width: *border_width, - shadow_color: shadow_color.into_linear(), - shadow_offset: (*shadow_offset).into(), - shadow_blur_radius: *shadow_blur_radius, + shadow_color: shadow.color.into_linear(), + shadow_offset: shadow.offset.into(), + shadow_blur_radius: shadow.blur_radius, }; layer.quads.add(quad, background); -- cgit From 25f182f933ea6b7c112c8f9a450a98dc9b9eebdd Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 13:29:25 +0100 Subject: Introduce `Border` struct analogous to `Shadow` --- wgpu/src/layer.rs | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) (limited to 'wgpu') diff --git a/wgpu/src/layer.rs b/wgpu/src/layer.rs index cb91878d..e213c95f 100644 --- a/wgpu/src/layer.rs +++ b/wgpu/src/layer.rs @@ -12,9 +12,7 @@ pub use text::Text; use crate::core; use crate::core::alignment; -use crate::core::{ - Color, Font, Pixels, Point, Rectangle, Shadow, Size, Vector, -}; +use crate::core::{Color, Font, Pixels, Point, Rectangle, Size, Vector}; use crate::graphics; use crate::graphics::color; use crate::graphics::Viewport; @@ -197,28 +195,20 @@ impl<'a> Layer<'a> { Primitive::Quad { bounds, background, - border_radius, - border_width, - border_color, + border, shadow, } => { let layer = &mut layers[current_layer]; - let shadow = shadow.unwrap_or_else(|| Shadow { - color: Color::TRANSPARENT, - offset: Vector::ZERO, - blur_radius: 0.0, - }); - let quad = Quad { position: [ bounds.x + translation.x, bounds.y + translation.y, ], size: [bounds.width, bounds.height], - border_color: color::pack(*border_color), - border_radius: *border_radius, - border_width: *border_width, + border_color: color::pack(border.color), + border_radius: border.radius.into(), + border_width: border.width, shadow_color: shadow.color.into_linear(), shadow_offset: shadow.offset.into(), shadow_blur_radius: shadow.blur_radius, -- cgit From 1c1667c3c99fa9b1009ef416b9b3c7e5a1d53a97 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 20 Jan 2024 13:41:51 +0100 Subject: Inline `quad_pos` and `quad_scale` definitions --- wgpu/src/shader/quad/solid.wgsl | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'wgpu') diff --git a/wgpu/src/shader/quad/solid.wgsl b/wgpu/src/shader/quad/solid.wgsl index cb4a3816..1274f814 100644 --- a/wgpu/src/shader/quad/solid.wgsl +++ b/wgpu/src/shader/quad/solid.wgsl @@ -29,9 +29,7 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { var out: SolidVertexOutput; var pos: vec2 = (input.pos + min(input.shadow_offset, vec2(0.0, 0.0)) - input.shadow_blur_radius) * globals.scale; - var quad_pos: vec2 = input.pos * globals.scale; var scale: vec2 = (input.scale + vec2(abs(input.shadow_offset.x), abs(input.shadow_offset.y)) + input.shadow_blur_radius * 2.0) * globals.scale; - var quad_scale: vec2 = input.scale * globals.scale; var min_border_radius = min(input.scale.x, input.scale.y) * 0.5; var border_radius: vec4 = vec4( @@ -51,8 +49,8 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput { out.position = globals.transform * transform * vec4(vertex_position(input.vertex_index), 0.0, 1.0); out.color = input.color; out.border_color = input.border_color; - out.pos = quad_pos; - out.scale = quad_scale; + out.pos = input.pos * globals.scale; + out.scale = input.scale * globals.scale; out.border_radius = border_radius * globals.scale; out.border_width = input.border_width * globals.scale; out.shadow_color = input.shadow_color; -- cgit