Merge pull request #2962 from iced-rs/fix/blurry-quads

Consistent primitive pixel snapping in `iced_wgpu`
2025-05-28 02:55:20 +02:00 · 2025-05-28 02:55:20 +02:00 · 03326b955b
commit 03326b955b
parent 7c5a4bc465 1d9e812e0a
31 changed files with 59 additions and 78 deletions
--- a/core/src/image.rs
+++ b/core/src/image.rs
@ -23,12 +23,6 @@ pub struct Image<H = Handle> {
    ///
    /// 0 means transparent. 1 means opaque.
    pub opacity: f32,
-
-    /// If set to `true`, the image will be snapped to the pixel grid.
-    ///
-    /// This can avoid graphical glitches, specially when using
-    /// [`FilterMethod::Nearest`].
-    pub snap: bool,
 }

 impl Image<Handle> {
@ -39,7 +33,6 @@ impl Image<Handle> {
            filter_method: FilterMethod::default(),
            rotation: Radians(0.0),
            opacity: 1.0,
-            snap: false,
        }
    }

@ -60,12 +53,6 @@ impl Image<Handle> {
        self.opacity = opacity.into();
        self
    }
-
-    /// Sets whether the [`Image`] should be snapped to the pixel grid.
-    pub fn snap(mut self, snap: bool) -> Self {
-        self.snap = snap;
-        self
-    }
 }

 impl From<&Handle> for Image {
--- a/core/src/rectangle.rs
+++ b/core/src/rectangle.rs
@ -250,11 +250,14 @@ impl Rectangle<f32> {
            return None;
        }

+        let x = (self.x + 0.01).round();
+        let y = (self.y + 0.01).round();
+
        Some(Rectangle {
-            x: self.x as u32,
-            y: self.y as u32,
-            width,
-            height,
+            x: x as u32,
+            y: y as u32,
+            width: ((self.x + self.width + 0.01).round() - x) as u32,
+            height: ((self.y + self.height + 0.01).round() - y) as u32,
        })
    }

--- a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256
@ -1 +1 @@
-9e67e429f88fd5a64744d9cd4d42e123950bea4a45fea78581bc3d64b12e11f0
+12ba47a34ed415825a23f8ef377a2d52950d2f8614a66bf46c0ec28d0cf15c85
--- a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256
@ -1 +1 @@
-811a22238f3a40e3e3998f514c0a95f24f2b45449250682d86c8ec392fec5e28
+fa00d7e0ff95b366945d409712d7fe4ce44fff22425236cb56b8b96a88815ee6
--- a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256
@ -1 +1 @@
-6bf957efe807f87f38cfc672f9a05325aadee6256aacca87bbc3281b98160c8a
+4e594cfec775d51f7f836646c59bf4a2de07252721d66ddddea69c17e9112bae
--- a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256
@ -1 +1 @@
-d3f4110fae78a3be3b7a4813e9a432b48b81fff1e982c0244e4ea394074bef55
+2ab665b51387c61086ae0199c29e291105bfe4583bd4c4daa652e30917f10bd6
--- a/examples/styling/snapshots/dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/dark-tiny-skia.sha256
@ -1 +1 @@
-578e7420de69d82906d284c59d81fcea0edf81098481fc4dd7b4c1fb577b7f1c
+61c9ee377b33ffa800f512877e45ad5f41fbac36f5d3f06d1b62d6af6ee9d7b2
--- a/examples/styling/snapshots/dracula-tiny-skia.sha256
+++ b/examples/styling/snapshots/dracula-tiny-skia.sha256
@ -1 +1 @@
-422e841113efaa86e9e37593d0d14f8dd36ad483a81c30a08588f48805e4f9f3
+75f2fb12c9090a256708515de01a25e78905f71e134b7cda79f4fe44b2434052
--- a/examples/styling/snapshots/ferra-tiny-skia.sha256
+++ b/examples/styling/snapshots/ferra-tiny-skia.sha256
@ -1 +1 @@
-3d616a31842a29b4a3d31fbeef25f95c7b50f33360f1c05e069e0b29b3f7553e
+b4a1b42d2e21b2a493605745e6beb8e1f28cbeb01b73336e1e8d9061249a8311
--- a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256
@ -1 +1 @@
-9a21865bfc075669d368ccac69b975c3e1f6c22ba297dddfa003d4ee1a06641c
+eb52921b3ee23e1814268701c935d0dff387e7eb741c50443f75a7ab902b5e44
--- a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256
@ -1 +1 @@
-d5164fb10a92177afd0aab353557d1e3fdaa743962c6a901f05cbfcd0d91e9fb
+bf6c4cbd6eeed0167d28509e37292f5ce26ed1d58bb156bedb861d0619a1945b
--- a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256
@ -1 +1 @@
-3d5ba3b50f192f8700edbfbf54007e92dfd66997bce7342671afc2b60d556aca
+83726a4175900a9ef159b80925f2fa985b4ea87bff78d8bb01918fb6c40d6175
--- a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256
@ -1 +1 @@
-90cb13c900d58a56ce170afeefbceb77410d024e7eae6030e181df1c929c3944
+54c8d44afbdd644f324cf40e744b3d7871263e44de2d9a91f6c10470c38ac3c6
--- a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256
@ -1 +1 @@
-71b625bc39aaead7a1298e4b2dad51b266526c53deab139858774986395878db
+5713843396e2efcfc7cc8abd00343d5d66ce8b8a195212a9b75dbfeec8edf7a7
--- a/examples/styling/snapshots/light-tiny-skia.sha256
+++ b/examples/styling/snapshots/light-tiny-skia.sha256
@ -1 +1 @@
-f08f80a79959ef1c2fd8f8696a26555f2b2eab6618dd3653a042acab563bcced
+f1b20ab79f8242776d9eb1ad9cff7090435aa416811c48a7c22c69b09cd8e70f
--- a/examples/styling/snapshots/moonfly-tiny-skia.sha256
+++ b/examples/styling/snapshots/moonfly-tiny-skia.sha256
@ -1 +1 @@
-3302b7934051ff8aa01d70c45e28c444bdc93e8a4da219931aa22465b51c6748
+2c4be9dc1340b65cad6d15d5318017412eba1247a016379b83db379dde0214af
--- a/examples/styling/snapshots/nightfly-tiny-skia.sha256
+++ b/examples/styling/snapshots/nightfly-tiny-skia.sha256
@ -1 +1 @@
-661ec43b66213f369ce5a3680e9e8ead56c98d94718da25b12fbb313386944e0
+2d5d6b9613ccb6a2f23142baf704288037808e7a60ee05bdc73490d8c8780064
--- a/examples/styling/snapshots/nord-tiny-skia.sha256
+++ b/examples/styling/snapshots/nord-tiny-skia.sha256
@ -1 +1 @@
-b5dd22b064220d5f2f90c6f0f381eff41d25f534587d1649ed59e25f878eda97
+512b8dfd4687a609d202436e75ecf1a5553acc2157000e77e31c1578941b033c
--- a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256
+++ b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256
@ -1 +1 @@
-dd6e7e7ba125a2549143501c3de44427633f0bfa6c0d8b6f66aa95d503874065
+4b3b7a2dc65307a3551227f1c5d2bb49da15d29e320ccaa160e3d9fca44c1037
--- a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256
@ -1 +1 @@
-44b5afe743b753a54f3e68da2fd2701837e7e8cff276ff1e8c349030c83ac72e
+15aa476c65304bde23e3648ceb424d6394f525f6c1d3e49ee1150376b6fd3068
--- a/examples/styling/snapshots/solarized_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/solarized_light-tiny-skia.sha256
@ -1 +1 @@
-1b46820f12611b2759eb843688cd13b6024f2096b7986f205398bb029e0c60bd
+04fcb0da640c6e7c1d86c95c74570c9f9d8f56056c9802eef332187f52c003ca
--- a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256
@ -1 +1 @@
-27a9a8bb08cea7b0a9b9763e332a6833d4fead1a885cdd59a1f5161e3726d6b1
+26e9660da3caa88e5a995739c986b142487f1449c1a5dc555abf7bc7cbca2345
--- a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256
@ -1 +1 @@
-ab0dee2cc24f30eb51b376a0385302b45bfeddb373348525dab7f551c27ffec2
+8d846a765ff96506ad4f26a672976cb1bfa997d4b09c5ecabf273d5e22ae0a3a
--- a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256
@ -1 +1 @@
-aef404c7e38aec5387c39cf3a2911688324c1b9b520e5f541b9fd3fd6eefd3a8
+0ecd51994f6eb37f111dc1b21cad72bb705499eb83156e9dc3ae2221ec392a42
--- a/wgpu/src/image/mod.rs
+++ b/wgpu/src/image/mod.rs
@ -147,8 +147,6 @@ impl Pipeline {
                            6 => Float32x2,
                            // Layer
                            7 => Sint32,
-                            // Snap
-                            8 => Uint32,
                        ),
                    }],
                    compilation_options:
@ -243,7 +241,7 @@ impl State {
                            [bounds.width, bounds.height],
                            f32::from(image.rotation),
                            image.opacity,
-                            image.snap,
+                            scale,
                            atlas_entry,
                            match image.filter_method {
                                crate::core::image::FilterMethod::Nearest => {
@ -276,7 +274,7 @@ impl State {
                            size,
                            f32::from(svg.rotation),
                            svg.opacity,
-                            true,
+                            scale,
                            atlas_entry,
                            nearest_instances,
                        );
@ -506,7 +504,6 @@ struct Instance {
    _position_in_atlas: [f32; 2],
    _size_in_atlas: [f32; 2],
    _layer: u32,
-    _snap: u32,
 }

 impl Instance {
@ -524,14 +521,21 @@ struct Uniforms {
 }

 fn add_instances(
-    image_position: [f32; 2],
-    image_size: [f32; 2],
+    mut image_position: [f32; 2],
+    mut image_size: [f32; 2],
    rotation: f32,
    opacity: f32,
-    snap: bool,
+    scale: f32,
    entry: &atlas::Entry,
    instances: &mut Vec<Instance>,
 ) {
+    let snap = |coordinate: f32| (coordinate * scale).round() / scale;
+
+    image_position[0] = snap(image_position[0]);
+    image_position[1] = snap(image_position[1]);
+    image_size[0] = snap(image_size[0]);
+    image_size[1] = snap(image_size[1]);
+
    let center = [
        image_position[0] + image_size[0] / 2.0,
        image_position[1] + image_size[1] / 2.0,
@ -545,7 +549,6 @@ fn add_instances(
                image_size,
                rotation,
                opacity,
-                snap,
                allocation,
                instances,
            );
@ -575,8 +578,8 @@ fn add_instances(
                ];

                add_instance(
-                    position, center, size, rotation, opacity, snap,
-                    allocation, instances,
+                    position, center, size, rotation, opacity, allocation,
+                    instances,
                );
            }
        }
@ -590,7 +593,6 @@ fn add_instance(
    size: [f32; 2],
    rotation: f32,
    opacity: f32,
-    snap: bool,
    allocation: &atlas::Allocation,
    instances: &mut Vec<Instance>,
 ) {
@ -613,7 +615,6 @@ fn add_instance(
            (height as f32 - 1.0) / atlas::SIZE as f32,
        ],
        _layer: layer as u32,
-        _snap: snap as u32,
    };

    instances.push(instance);
--- a/wgpu/src/shader/image.wgsl
+++ b/wgpu/src/shader/image.wgsl
@ -17,7 +17,6 @@ struct VertexInput {
    @location(5) atlas_pos: vec2<f32>,
    @location(6) atlas_scale: vec2<f32>,
    @location(7) layer: i32,
-    @location(8) snap: u32,
 }

 struct VertexOutput {
@ -54,11 +53,7 @@ fn vs_main(input: VertexInput) -> VertexOutput {

    // Calculate the final position of the vertex
    out.position = vec4(vec2(globals.scale_factor), 1.0, 1.0) * (vec4<f32>(input.center, 0.0, 0.0) + rotate * vec4<f32>(v_pos, 0.0, 1.0));
-
-    if bool(input.snap) {
-        out.position = round(out.position);
-    }
-
+    out.position = round(out.position);
    out.position = globals.transform * out.position;

    return out;
--- a/wgpu/src/shader/quad/gradient.wgsl
+++ b/wgpu/src/shader/quad/gradient.wgsl
@ -33,6 +33,9 @@ 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> = round(pos + vec2(0.01, 0.01)) - pos;
+    var scale_snap: vec2<f32> = round(pos + scale + vec2(0.01, 0.01)) - 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 +45,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, 0.0, 1.0)
    );

    out.position = globals.transform * transform * vec4<f32>(vertex_position(input.vertex_index), 0.0, 1.0);
@ -55,7 +58,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;
--- a/wgpu/src/shader/quad/solid.wgsl
+++ b/wgpu/src/shader/quad/solid.wgsl
@ -30,15 +30,9 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput {

    var pos: vec2<f32> = (input.pos + min(input.shadow_offset, vec2<f32>(0.0, 0.0)) - input.shadow_blur_radius) * globals.scale;
    var scale: vec2<f32> = (input.scale + vec2<f32>(abs(input.shadow_offset.x), abs(input.shadow_offset.y)) + input.shadow_blur_radius * 2.0) * globals.scale;
-    var snap: vec2<f32> = vec2<f32>(0.0, 0.0);

-    if input.scale.x == 1.0 {
-        snap.x = round(pos.x) - pos.x;
-    }
-
-    if input.scale.y == 1.0 {
-        snap.y = round(pos.y) - pos.y;
-    }
+    var pos_snap: vec2<f32> = round(pos + vec2(0.01, 0.01)) - pos;
+    var scale_snap: vec2<f32> = round(pos + scale + vec2(0.01, 0.01)) - pos - pos_snap - scale;

    var min_border_radius = min(input.scale.x, input.scale.y) * 0.5;
    var border_radius: vec4<f32> = vec4<f32>(
@ -49,17 +43,17 @@ fn solid_vs_main(input: SolidVertexInput) -> SolidVertexOutput {
    );

    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) + snap, 0.0, 1.0)
+        vec4<f32>(pos + pos_snap, 0.0, 1.0)
    );

    out.position = globals.transform * transform * vec4<f32>(vertex_position(input.vertex_index), 0.0, 1.0);
    out.color = premultiply(input.color);
    out.border_color = premultiply(input.border_color);
-    out.pos = input.pos * globals.scale + snap;
-    out.scale = input.scale * globals.scale;
+    out.pos = input.pos * globals.scale + pos_snap;
+    out.scale = input.scale * globals.scale + scale_snap;
    out.border_radius = border_radius * globals.scale;
    out.border_width = input.border_width * globals.scale;
    out.shadow_color = premultiply(input.shadow_color);
--- a/widget/src/image.rs
+++ b/widget/src/image.rs
@ -296,7 +296,6 @@ fn render<Renderer, Handle>(
            filter_method,
            rotation: rotation.radians(),
            opacity,
-            snap: true,
        },
        drawing_bounds,
    );
--- a/widget/src/image/viewer.rs
+++ b/widget/src/image/viewer.rs
@ -351,7 +351,6 @@ where
                        filter_method: self.filter_method,
                        rotation: Radians(0.0),
                        opacity: 1.0,
-                        snap: true,
                    },
                    drawing_bounds,
                );
--- a/widget/src/toggler.rs
+++ b/widget/src/toggler.rs
@ -424,7 +424,7 @@ where
            .style(&self.class, self.last_status.unwrap_or(Status::Disabled));

        let border_radius = bounds.height / BORDER_RADIUS_RATIO;
-        let space = SPACE_RATIO * bounds.height;
+        let space = (SPACE_RATIO * bounds.height).round();

        let toggler_background_bounds = Rectangle {
            x: bounds.x + space,