Allow transforming after shapes were tessellated and rounded (#8587)

Via a new `TransformedShape`. When the transform is applied before
rounding during an animation, it introduces a ugly snap once the
transform ends:


https://github.com/user-attachments/assets/1e75cd21-4bc4-4869-b3fa-cde749991518

When the transform is applied after rounding it looks way smoother:


https://github.com/user-attachments/assets/ccba1562-66dc-4b93-b187-53928510c0b8

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: lucasmerlin

crates/egui/src/context.rs

@@ -3530,6 +3530,25 @@ impl Context {
         }
     }
 
+    /// Transform all the graphics at the given layer, but only after they have been tessellated and
+    /// snapped to the pixel grid.
+    ///
+    /// Unlike [`Self::transform_layer_shapes`], the snapping happens in the layer's own
+    /// coordinates, so the rendering converges on the untransformed one.
+    /// Use this for an animation that ends at [`TSTransform::IDENTITY`], such as a popup scaling
+    /// into place: it doesn't end with a jump of up to a pixel.
+    /// See [`epaint::ClippedShape::transform_after_tessellation`] for the trade-off.
+    ///
+    /// This only applies to the existing graphics at the layer, not to graphics added later, so
+    /// call it once the layer is complete — [`crate::Plugin::on_end_pass`] is a good place.
+    ///
+    /// Interaction is unaffected: the layer keeps its own input coordinates.
+    pub fn transform_layer_shapes_after_rounding(&self, layer_id: LayerId, transform: TSTransform) {
+        if transform != TSTransform::IDENTITY {
+            self.graphics_mut(|g| g.entry(layer_id).transform_after_rounding(transform));
+        }
+    }
+
     /// Top-most layer at the given position.
     pub fn layer_id_at(&self, pos: Pos2) -> Option<LayerId> {
         self.memory(|mem| mem.layer_id_at(pos))
@@ -4822,15 +4841,10 @@ fn warn_if_rect_changes_id(
                     .map(|w| w.id.short_debug_format())
                     .collect::<Vec<_>>(),
             );
-            out_shapes.push(ClippedShape {
-                clip_rect: Rect::EVERYTHING,
-                shape: epaint::Shape::rect_stroke(
-                    rect,
-                    0,
-                    (2.0, Color32::RED),
-                    StrokeKind::Outside,
-                ),
-            });
+            out_shapes.push(ClippedShape::new(
+                Rect::EVERYTHING,
+                epaint::Shape::rect_stroke(rect, 0, (2.0, Color32::RED), StrokeKind::Outside),
+            ));
         }
     }
 }

crates/egui/src/layers.rs

@@ -126,15 +126,15 @@ impl PaintList {
     #[inline(always)]
     pub fn add(&mut self, clip_rect: Rect, shape: Shape) -> ShapeIdx {
         let idx = self.next_idx();
-        self.0.push(ClippedShape { clip_rect, shape });
+        self.0.push(ClippedShape::new(clip_rect, shape));
         idx
     }
 
     pub fn extend<I: IntoIterator<Item = Shape>>(&mut self, clip_rect: Rect, shapes: I) {
         self.0.extend(
             shapes
                 .into_iter()
-                .map(|shape| ClippedShape { clip_rect, shape }),
+                .map(|shape| ClippedShape::new(clip_rect, shape)),
         );
     }
 
@@ -152,7 +152,7 @@ impl PaintList {
             return;
         }
 
-        self.0[idx.0] = ClippedShape { clip_rect, shape };
+        self.0[idx.0] = ClippedShape::new(clip_rect, shape);
     }
 
     /// Set the given shape to be empty (a `Shape::Noop`).
@@ -168,17 +168,40 @@ impl PaintList {
 
     /// Transform each [`Shape`] and clip rectangle by this much, in-place
     pub fn transform(&mut self, transform: TSTransform) {
-        for ClippedShape { clip_rect, shape } in &mut self.0 {
-            *clip_rect = transform.mul_rect(*clip_rect);
-            shape.transform(transform);
-        }
+        let end = self.next_idx();
+        self.transform_range(ShapeIdx(0), end, transform);
     }
 
     /// Transform each [`Shape`] and clip rectangle in range by this much, in-place
     pub fn transform_range(&mut self, start: ShapeIdx, end: ShapeIdx, transform: TSTransform) {
-        for ClippedShape { clip_rect, shape } in &mut self.0[start.0..end.0] {
-            *clip_rect = transform.mul_rect(*clip_rect);
-            shape.transform(transform);
+        for clipped_shape in &mut self.0[start.0..end.0] {
+            clipped_shape.transform(transform);
+        }
+    }
+
+    /// Transform each [`Shape`] and clip rectangle by this much, in-place, but only after the
+    /// shapes have been tessellated and snapped to the pixel grid.
+    ///
+    /// See [`ClippedShape::transform_after_tessellation`] for which of the two you want.
+    pub fn transform_after_rounding(&mut self, transform: TSTransform) {
+        let end = self.next_idx();
+        self.transform_after_rounding_range(ShapeIdx(0), end, transform);
+    }
+
+    /// Transform each [`Shape`] and clip rectangle in range by this much, in-place, but only
+    /// after the shapes have been tessellated and snapped to the pixel grid.
+    ///
+    /// See [`ClippedShape::transform_after_tessellation`] for which of the two you want.
+    pub fn transform_after_rounding_range(
+        &mut self,
+        start: ShapeIdx,
+        end: ShapeIdx,
+        transform: TSTransform,
+    ) {
+        for clipped_shape in &mut self.0[start.0..end.0] {
+            clipped_shape.clip_rect = transform.mul_rect(clipped_shape.clip_rect);
+            clipped_shape.transform_after_tessellation =
+                transform * clipped_shape.transform_after_tessellation;
         }
     }
 

crates/egui_kittest/src/lib.rs

@@ -38,7 +38,7 @@ use core::{
 };
 
 use egui::{
-    Color32, Key, Modifiers, PointerButton, Pos2, Rect, RepaintCause, Shape, Vec2, ViewportId,
+    Color32, Key, Modifiers, PointerButton, Pos2, Rect, RepaintCause, Vec2, ViewportId,
     epaint::{ClippedShape, RectShape},
     style::ScrollAnimation,
 };
@@ -61,15 +61,14 @@ fn push_cursor_shape(ctx: &egui::Context, shapes: &mut Vec<ClippedShape>) {
         mouse_pos + egui::vec2(8.0, 16.0),
     ];
 
-    shapes.push(ClippedShape {
-        clip_rect: ctx.content_rect(),
-        shape: egui::epaint::PathShape::convex_polygon(
+    shapes.push(ClippedShape::new(
+        ctx.content_rect(),
+        egui::epaint::PathShape::convex_polygon(
             triangle,
             Color32::WHITE,
             egui::Stroke::new(1.0, Color32::BLACK),
-        )
-        .into(),
-    });
+        ),
+    ));
 }
 
 #[derive(Debug, Clone)]
@@ -817,10 +816,10 @@ impl<'a, State> Harness<'a, State> {
             self.last_render = None;
         }
 
-        self.output.shapes.push(ClippedShape {
-            clip_rect: Rect::EVERYTHING,
-            shape: Shape::Rect(RectShape::filled(rect, 0.0, Color32::MAGENTA)),
-        });
+        self.output.shapes.push(ClippedShape::new(
+            Rect::EVERYTHING,
+            RectShape::filled(rect, 0.0, Color32::MAGENTA),
+        ));
     }
 
     /// Should every step be rendered?

crates/epaint/benches/benchmark.rs

@@ -55,7 +55,7 @@ fn tessellate_circles(c: &mut Criterion) {
             for _ in 0..10_000 {
                 let clip_rect = Rect::from_min_size(Pos2::ZERO, Vec2::splat(1024.0));
                 let shape = Shape::circle_filled(Pos2::new(10.0, 10.0), r, Color32::WHITE);
-                clipped_shapes.push(ClippedShape { clip_rect, shape });
+                clipped_shapes.push(ClippedShape::new(clip_rect, shape));
             }
         }
         assert_eq!(

crates/epaint/src/lib.rs

@@ -129,17 +129,46 @@ pub struct ClippedShape {
 
     /// The shape
     pub shape: Shape,
+
+    /// Applied to the tessellated result of `shape`, _after_ it has been snapped to the pixel grid.
+    ///
+    /// [`emath::TSTransform::IDENTITY`] means "no transform", which is what you want most of the
+    /// time.
+    ///
+    /// Snapping in the shape's own coordinates makes the rendering converge on the untransformed
+    /// one, so this suits a transform that animates towards [`emath::TSTransform::IDENTITY`], such
+    /// as a popup scaling into place: it doesn't end with a jump of up to a pixel. The cost is
+    /// that the rendering is resampled, and so slightly blurrier, while the transform is not the
+    /// identity. For a lasting transform, such as a pan/zoom canvas, transform the shape itself.
+    ///
+    /// Note that `clip_rect` is in the space this transform maps _to_.
+    pub transform_after_tessellation: emath::TSTransform,
 }
 
 impl ClippedShape {
+    /// A shape with no [`Self::transform_after_tessellation`].
+    #[inline]
+    pub fn new(clip_rect: emath::Rect, shape: impl Into<Shape>) -> Self {
+        Self {
+            clip_rect,
+            shape: shape.into(),
+            transform_after_tessellation: emath::TSTransform::IDENTITY,
+        }
+    }
+
     /// Transform (move/scale) the shape in-place.
     ///
     /// If using a [`PaintCallback`], note that only the rect is scaled as opposed
     /// to other shapes where the stroke is also scaled.
     pub fn transform(&mut self, transform: emath::TSTransform) {
-        let Self { clip_rect, shape } = self;
-        *clip_rect = transform * *clip_rect;
-        shape.transform(transform);
+        self.clip_rect = transform * self.clip_rect;
+        if self.transform_after_tessellation == emath::TSTransform::IDENTITY {
+            self.shape.transform(transform);
+        } else {
+            // The shape is tessellated in its own coordinate space, so the new transform has to
+            // apply to the finished rendering too, or the two would fight over the pixel grid.
+            self.transform_after_tessellation = transform * self.transform_after_tessellation;
+        }
     }
 }
 

crates/epaint/src/tessellator.rs

@@ -6,7 +6,8 @@
 #![expect(clippy::identity_op)]
 
 use emath::{
-    GuiRounding as _, NumExt as _, Pos2, Rangef, Rect, Rot2, Vec2, fast_midpoint, pos2, remap, vec2,
+    GuiRounding as _, NumExt as _, Pos2, Rangef, Rect, Rot2, TSTransform, Vec2, fast_midpoint,
+    pos2, remap, vec2,
 };
 
 use crate::{
@@ -1477,20 +1478,36 @@ impl Tessellator {
         clipped_shape: ClippedShape,
         out_primitives: &mut Vec<ClippedPrimitive>,
     ) {
-        let ClippedShape { clip_rect, shape } = clipped_shape;
+        let ClippedShape {
+            clip_rect,
+            shape,
+            transform_after_tessellation: transform,
+        } = clipped_shape;
 
         if !clip_rect.is_positive() {
             return; // skip empty clip rectangles
         }
 
+        if !transform.is_valid() {
+            return;
+        }
+
         if let Shape::Vec(shapes) = shape {
             for shape in shapes {
-                self.tessellate_clipped_shape(ClippedShape { clip_rect, shape }, out_primitives);
+                self.tessellate_clipped_shape(
+                    ClippedShape {
+                        clip_rect,
+                        shape,
+                        transform_after_tessellation: transform,
+                    },
+                    out_primitives,
+                );
             }
             return;
         }
 
-        if let Shape::Callback(callback) = shape {
+        if let Shape::Callback(mut callback) = shape {
+            callback.rect = transform * callback.rect;
             out_primitives.push(ClippedPrimitive {
                 clip_rect,
                 primitive: Primitive::Callback(callback),
@@ -1522,8 +1539,21 @@ impl Tessellator {
         let out = out_primitives.last_mut().unwrap();
 
         if let Primitive::Mesh(out_mesh) = &mut out.primitive {
-            self.clip_rect = clip_rect;
-            self.tessellate_shape(shape, out_mesh);
+            if transform == TSTransform::IDENTITY {
+                self.clip_rect = clip_rect;
+                self.tessellate_shape(shape, out_mesh);
+            } else {
+                // Tessellate in the shape's own coordinate space, so that everything lands on the
+                // pixel grid there, and only then move the finished vertices into place.
+                // Culling has to happen in that same space, so map the clip rect back into it:
+                self.clip_rect = transform.inverse() * clip_rect;
+
+                let vertex_start = out_mesh.vertices.len();
+                self.tessellate_shape(shape, out_mesh);
+                for vertex in &mut out_mesh.vertices[vertex_start..] {
+                    vertex.pos = transform * vertex.pos;
+                }
+            }
         } else {
             unreachable!();
         }
@@ -2593,10 +2623,7 @@ fn test_tessellator() {
     shapes.push(Shape::mesh(mesh));
 
     let shape = Shape::Vec(shapes);
-    let clipped_shapes = vec![ClippedShape {
-        clip_rect: rect,
-        shape,
-    }];
+    let clipped_shapes = vec![ClippedShape::new(rect, shape)];
 
     let font_tex_size = [1024, 1024]; // unused
     let prepared_discs = vec![]; // unused
@@ -2607,6 +2634,46 @@ fn test_tessellator() {
     assert_eq!(primitives.len(), 2);
 }
 
+#[test]
+fn transform_before_and_after_rounding() {
+    use crate::*;
+
+    fn tessellated_bounds(clipped_shape: ClippedShape) -> Rect {
+        let options = TessellationOptions {
+            feathering: false,
+            ..Default::default()
+        };
+        let primitives = Tessellator::new(1.0, options, [1024, 1024], vec![])
+            .tessellate_shapes(vec![clipped_shape]);
+        assert_eq!(primitives.len(), 1);
+        let Primitive::Mesh(mesh) = &primitives[0].primitive else {
+            panic!("expected a mesh");
+        };
+        mesh.calc_bounds()
+    }
+
+    // Off the pixel grid, so the tessellator has to round it:
+    let rect = Rect::from_min_max(pos2(0.5, 0.5), pos2(10.5, 10.5));
+    let shape = Shape::rect_filled(rect, 0, Color32::WHITE);
+    let transform = TSTransform::from_scaling(3.0);
+
+    // Transform first, then round: [1.5, 31.5] rounds to [2, 32].
+    let mut immediate = ClippedShape::new(Rect::EVERYTHING, shape.clone());
+    immediate.transform(transform);
+    assert_eq!(
+        tessellated_bounds(immediate),
+        Rect::from_min_max(pos2(2.0, 2.0), pos2(32.0, 32.0))
+    );
+
+    // Round first, then transform: [0.5, 10.5] rounds to [1, 11], which scales to [3, 33].
+    let mut after_rounding = ClippedShape::new(Rect::EVERYTHING, shape);
+    after_rounding.transform_after_tessellation = transform;
+    assert_eq!(
+        tessellated_bounds(after_rounding),
+        Rect::from_min_max(pos2(3.0, 3.0), pos2(33.0, 33.0))
+    );
+}
+
 #[test]
 fn path_bounding_box() {
     use crate::*;