Add crisp feature for default quad snapping

Cargo.toml

@@ -55,6 +55,8 @@ smol = ["iced_futures/smol"]
 system = ["iced_winit/system"]
 # Enables broken "sRGB linear" blending to reproduce color management of the Web
 web-colors = ["iced_renderer/web-colors"]
+# Enables pixel snapping for crisp edges by default (can cause jitter!)
+crisp = ["iced_core/crisp", "iced_widget/crisp"]
 # Enables the WebGL backend
 webgl = ["iced_renderer/webgl"]
 # Enables syntax highligthing

core/Cargo.toml

@@ -16,6 +16,7 @@ workspace = true
 [features]
 auto-detect-theme = ["dep:dark-light"]
 advanced = []
+crisp = []
 
 [dependencies]
 bitflags.workspace = true

core/src/renderer.rs

@@ -75,6 +75,9 @@ pub struct Quad {
 
     /// The [`Shadow`] of the [`Quad`].
     pub shadow: Shadow,
+
+    /// Whether the [`Quad`] should be snapped to the pixel grid.
+    pub snap: bool,
 }
 
 impl Default for Quad {
@@ -83,6 +86,7 @@ impl Default for Quad {
             bounds: Rectangle::with_size(Size::ZERO),
             border: Border::default(),
             shadow: Shadow::default(),
+            snap: cfg!(feature = "crisp"),
         }
     }
 }

examples/custom_quad/src/main.rs

@@ -1,89 +1,6 @@
 //! This example showcases a drawing a quad.
-mod quad {
-    use iced::advanced::layout::{self, Layout};
-    use iced::advanced::renderer;
-    use iced::advanced::widget::{self, Widget};
-    use iced::border;
-    use iced::mouse;
-    use iced::{Border, Color, Element, Length, Rectangle, Shadow, Size};
-
-    pub struct CustomQuad {
-        size: f32,
-        radius: border::Radius,
-        border_width: f32,
-        shadow: Shadow,
-    }
-
-    impl CustomQuad {
-        pub fn new(
-            size: f32,
-            radius: border::Radius,
-            border_width: f32,
-            shadow: Shadow,
-        ) -> Self {
-            Self {
-                size,
-                radius,
-                border_width,
-                shadow,
-            }
-        }
-    }
-
-    impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for CustomQuad
-    where
-        Renderer: renderer::Renderer,
-    {
-        fn size(&self) -> Size<Length> {
-            Size {
-                width: Length::Shrink,
-                height: Length::Shrink,
-            }
-        }
-
-        fn layout(
-            &self,
-            _tree: &mut widget::Tree,
-            _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: &Theme,
-            _style: &renderer::Style,
-            layout: Layout<'_>,
-            _cursor: mouse::Cursor,
-            _viewport: &Rectangle,
-        ) {
-            renderer.fill_quad(
-                renderer::Quad {
-                    bounds: layout.bounds(),
-                    border: Border {
-                        radius: self.radius,
-                        width: self.border_width,
-                        color: Color::from_rgb(1.0, 0.0, 0.0),
-                    },
-                    shadow: self.shadow,
-                },
-                Color::BLACK,
-            );
-        }
-    }
-
-    impl<Message> From<CustomQuad> for Element<'_, Message> {
-        fn from(circle: CustomQuad) -> Self {
-            Self::new(circle)
-        }
-    }
-}
-
 use iced::border;
-use iced::widget::{center, column, slider, text};
+use iced::widget::{center, column, slider, text, toggler};
 use iced::{Center, Color, Element, Shadow, Vector};
 
 pub fn main() -> iced::Result {
@@ -94,6 +11,7 @@ struct Example {
     radius: border::Radius,
     border_width: f32,
     shadow: Shadow,
+    snap: bool,
 }
 
 #[derive(Debug, Clone, Copy)]
@@ -107,6 +25,7 @@ enum Message {
     ShadowXOffsetChanged(f32),
     ShadowYOffsetChanged(f32),
     ShadowBlurRadiusChanged(f32),
+    SnapToggled(bool),
 }
 
 impl Example {
@@ -119,6 +38,7 @@ impl Example {
                 offset: Vector::new(0.0, 8.0),
                 blur_radius: 16.0,
             },
+            snap: false,
         }
     }
 
@@ -148,6 +68,9 @@ impl Example {
             Message::ShadowBlurRadiusChanged(s) => {
                 self.shadow.blur_radius = s;
             }
+            Message::SnapToggled(snap) => {
+                self.snap = snap;
+            }
         }
     }
 
@@ -170,7 +93,8 @@ impl Example {
                 200.0,
                 self.radius,
                 self.border_width,
-                self.shadow
+                self.shadow,
+                self.snap,
             ),
             text!("Radius: {top_left:.2}/{top_right:.2}/{bottom_right:.2}/{bottom_left:.2}"),
             slider(1.0..=100.0, top_left, Message::RadiusTopLeftChanged).step(0.01),
@@ -188,6 +112,7 @@ impl Example {
                 .step(0.01),
             slider(0.0..=100.0, sr, Message::ShadowBlurRadiusChanged)
                 .step(0.01),
+            toggler(self.snap).label("Snap to pixel grid").on_toggle(Message::SnapToggled),
         ]
         .padding(20)
         .spacing(20)
@@ -203,3 +128,90 @@ impl Default for Example {
         Self::new()
     }
 }
+
+mod quad {
+    use iced::advanced::layout::{self, Layout};
+    use iced::advanced::renderer;
+    use iced::advanced::widget::{self, Widget};
+    use iced::border;
+    use iced::mouse;
+    use iced::{Border, Color, Element, Length, Rectangle, Shadow, Size};
+
+    pub struct CustomQuad {
+        size: f32,
+        radius: border::Radius,
+        border_width: f32,
+        shadow: Shadow,
+        snap: bool,
+    }
+
+    impl CustomQuad {
+        pub fn new(
+            size: f32,
+            radius: border::Radius,
+            border_width: f32,
+            shadow: Shadow,
+            snap: bool,
+        ) -> Self {
+            Self {
+                size,
+                radius,
+                border_width,
+                shadow,
+                snap,
+            }
+        }
+    }
+
+    impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for CustomQuad
+    where
+        Renderer: renderer::Renderer,
+    {
+        fn size(&self) -> Size<Length> {
+            Size {
+                width: Length::Shrink,
+                height: Length::Shrink,
+            }
+        }
+
+        fn layout(
+            &self,
+            _tree: &mut widget::Tree,
+            _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: &Theme,
+            _style: &renderer::Style,
+            layout: Layout<'_>,
+            _cursor: mouse::Cursor,
+            _viewport: &Rectangle,
+        ) {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: layout.bounds(),
+                    border: Border {
+                        radius: self.radius,
+                        width: self.border_width,
+                        color: Color::from_rgb(1.0, 0.0, 0.0),
+                    },
+                    shadow: self.shadow,
+                    snap: self.snap,
+                },
+                Color::BLACK,
+            );
+        }
+    }
+
+    impl<Message> From<CustomQuad> for Element<'_, Message> {
+        fn from(circle: CustomQuad) -> Self {
+            Self::new(circle)
+        }
+    }
+}

wgpu/src/layer.rs

@@ -54,6 +54,7 @@ impl Layer {
             shadow_color: color::pack(quad.shadow.color),
             shadow_offset: quad.shadow.offset.into(),
             shadow_blur_radius: quad.shadow.blur_radius,
+            snap: quad.snap as u32,
         };
 
         self.quads.add(quad, &background);

wgpu/src/quad.rs

@@ -41,6 +41,9 @@ pub struct Quad {
 
     /// The shadow blur radius of the [`Quad`].
     pub shadow_blur_radius: f32,
+
+    /// Whether the [`Quad`] should be snapped to the pixel grid.
+    pub snap: u32,
 }
 
 #[derive(Debug, Clone)]

wgpu/src/quad/gradient.rs

@@ -153,7 +153,9 @@ impl Pipeline {
                                 // Border radius
                                 8 => Float32x4,
                                 // Border width
-                                9 => Float32
+                                9 => Float32,
+                                // Snap
+                                10 => Uint32,
                             ),
                         }],
                         compilation_options:

wgpu/src/quad/solid.rs

@@ -114,6 +114,8 @@ impl Pipeline {
                             7 => Float32x2,
                             // Shadow blur radius
                             8 => Float32,
+                            // Snap
+                            9 => Uint32,
                         ),
                     }],
                     compilation_options:

wgpu/src/shader/quad/gradient.wgsl

@@ -10,6 +10,7 @@ struct GradientVertexInput {
     @location(7) border_color: vec4<f32>,
     @location(8) border_radius: vec4<f32>,
     @location(9) border_width: f32,
+    @location(10) snap: u32,
 }
 
 struct GradientVertexOutput {
@@ -33,6 +34,14 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
     var pos: vec2<f32> = input.position_and_scale.xy * globals.scale;
     var scale: vec2<f32> = input.position_and_scale.zw * globals.scale;
 
+    var pos_snap = vec2<f32>(0.0, 0.0);
+    var scale_snap = vec2<f32>(0.0, 0.0);
+
+    if bool(input.snap) {
+        pos_snap = round(pos + vec2(0.001, 0.001)) - pos;
+        scale_snap = round(pos + scale + vec2(0.001, 0.001)) - pos - pos_snap - scale;
+    }
+
     var min_border_radius = min(input.position_and_scale.z, input.position_and_scale.w) * 0.5;
     var border_radius: vec4<f32> = vec4<f32>(
         min(input.border_radius.x, min_border_radius),
@@ -42,10 +51,10 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
     );
 
     var transform: mat4x4<f32> = mat4x4<f32>(
-        vec4<f32>(scale.x + 1.0, 0.0, 0.0, 0.0),
-        vec4<f32>(0.0, scale.y + 1.0, 0.0, 0.0),
+        vec4<f32>(scale.x + scale_snap.x + 1.0, 0.0, 0.0, 0.0),
+        vec4<f32>(0.0, scale.y + scale_snap.y + 1.0, 0.0, 0.0),
         vec4<f32>(0.0, 0.0, 1.0, 0.0),
-        vec4<f32>(pos - vec2<f32>(0.5, 0.5), 0.0, 1.0)
+        vec4<f32>(pos + pos_snap - vec2<f32>(0.5, 0.5), 0.0, 1.0)
     );
 
     out.position = globals.transform * transform * vec4<f32>(vertex_position(input.vertex_index), 0.0, 1.0);
@@ -55,7 +64,7 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
     out.colors_4 = input.colors_4;
     out.offsets = input.offsets;
     out.direction = input.direction * globals.scale;
-    out.position_and_scale = vec4<f32>(pos, scale);
+    out.position_and_scale = vec4<f32>(pos + pos_snap, scale + scale_snap);
     out.border_color = premultiply(input.border_color);
     out.border_radius = border_radius * globals.scale;
     out.border_width = input.border_width * globals.scale;