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

This reverts commit 03326b955b, reversing changes made to 7c5a4bc465.
2025-05-28 22:51:10 +02:00 · 2025-05-28 22:51:10 +02:00 · 9d4e849a0e
commit 9d4e849a0e
parent 6c0962c5c3
31 changed files with 78 additions and 59 deletions
--- a/core/src/image.rs
+++ b/core/src/image.rs
@ -23,6 +23,12 @@ 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> {
@ -33,6 +39,7 @@ impl Image<Handle> {
            filter_method: FilterMethod::default(),
            rotation: Radians(0.0),
            opacity: 1.0,
+            snap: false,
        }
    }

@ -53,6 +60,12 @@ 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,14 +250,11 @@ impl Rectangle<f32> {
            return None;
        }

-        let x = (self.x + 0.01).round();
-        let y = (self.y + 0.01).round();
-
        Some(Rectangle {
-            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,
+            x: self.x as u32,
+            y: self.y as u32,
+            width,
+            height,
        })
    }

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

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

 fn add_instances(
-    mut image_position: [f32; 2],
-    mut image_size: [f32; 2],
+    image_position: [f32; 2],
+    image_size: [f32; 2],
    rotation: f32,
    opacity: f32,
-    scale: f32,
+    snap: bool,
    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,
@ -549,6 +545,7 @@ fn add_instances(
                image_size,
                rotation,
                opacity,
+                snap,
                allocation,
                instances,
            );
@ -578,8 +575,8 @@ fn add_instances(
                ];

                add_instance(
-                    position, center, size, rotation, opacity, allocation,
-                    instances,
+                    position, center, size, rotation, opacity, snap,
+                    allocation, instances,
                );
            }
        }
@ -593,6 +590,7 @@ fn add_instance(
    size: [f32; 2],
    rotation: f32,
    opacity: f32,
+    snap: bool,
    allocation: &atlas::Allocation,
    instances: &mut Vec<Instance>,
 ) {
@ -615,6 +613,7 @@ 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,6 +17,7 @@ struct VertexInput {
    @location(5) atlas_pos: vec2<f32>,
    @location(6) atlas_scale: vec2<f32>,
    @location(7) layer: i32,
+    @location(8) snap: u32,
 }

 struct VertexOutput {
@ -53,7 +54,11 @@ 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));
-    out.position = round(out.position);
+
+    if bool(input.snap) {
+        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,9 +33,6 @@ 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),
@ -45,10 +42,10 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
    );

    var transform: mat4x4<f32> = mat4x4<f32>(
-        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>(scale.x + 1.0, 0.0, 0.0, 0.0),
+        vec4<f32>(0.0, scale.y + 1.0, 0.0, 0.0),
        vec4<f32>(0.0, 0.0, 1.0, 0.0),
-        vec4<f32>(pos + pos_snap, 0.0, 1.0)
+        vec4<f32>(pos - 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);
@ -58,7 +55,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 + pos_snap, scale + scale_snap);
+    out.position_and_scale = vec4<f32>(pos, scale);
    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,9 +30,15 @@ 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);

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

    var transform: mat4x4<f32> = mat4x4<f32>(
-        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>(scale.x + 1.0, 0.0, 0.0, 0.0),
+        vec4<f32>(0.0, scale.y + 1.0, 0.0, 0.0),
        vec4<f32>(0.0, 0.0, 1.0, 0.0),
-        vec4<f32>(pos + pos_snap, 0.0, 1.0)
+        vec4<f32>(pos - vec2<f32>(0.5, 0.5) + 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 + pos_snap;
-    out.scale = input.scale * globals.scale + scale_snap;
+    out.pos = input.pos * globals.scale + snap;
+    out.scale = input.scale * globals.scale;
    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,6 +296,7 @@ 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,6 +351,7 @@ 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).round();
+        let space = SPACE_RATIO * bounds.height;

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