Skip to content

Improve tessellation quality - #5669

Merged
emilk merged 41 commits into
masterfrom
emilk/improve-tessellator
Feb 4, 2025
Merged

emilk merged 41 commits into
masterfrom
emilk/improve-tessellator

Conversation

@emilk

@emilk emilk commented Feb 3, 2025

Copy link
Copy Markdown
Owner

Defining what Rounding is

This PR defines what Rounding means: it is the corner radius of underlying RectShape rectangle. If you use StrokeKind::Inside, this means the rounding is of the outer part of the stroke. Conversely, if you use StrokeKind::Outside, the stroke is outside the rounded rectangle, so the stroke has an inner radius or rounding, and an outer radius that is larger by stroke.width.

This definitions is the same as Figma uses.

Improving general shape rendering

The rendering of filled shapes (rectangles, circles, paths, bezier) has been rewritten. Instead of first painting the fill with the stroke on top, we now paint them as one single mesh with shared vertices at the border. This has several benefits:

  • Less work (faster and with fewer vertices produced)
  • No overdraw (nicer rendering of translucent shapes)
  • Correct blending of stroke and fill

The logic for rendering thin strokes has also been improved, so that the width of a stroke of StrokeKind::Outside never affects the filled area (this used to be wrong for thin strokes).

Improving of rectangle rendering

Rectangles also has specific improvements in how thin rectangles are painted.
The handling of "Blur width" is also a lot better, and now works for rectangles with strokes.
There also used to be bugs with specific combinations of corner radius and stroke width, that are now fixed.

But why?

With the new egui::Scene we end up with a lot of zoomed out shapes, with sub-pixel strokes. These need to look good! One thing led to another, and then I became obsessive 😅

Tessellation Test

In order to investigate the rendering, I created a Tessellation Test in the egui_demo_lib.

Try it here

Screenshot 2025-02-04 at 08 45 50

image

@emilk emilk added feature New feature or request egui epaint style visuals and theming labels Feb 3, 2025
@github-actions

github-actions Bot commented Feb 3, 2025

Copy link
Copy Markdown

Preview available at https://egui-pr-preview.github.io/pr/5669-emilkimprove-tessellator
Note that it might take a couple seconds for the update to show up after the preview_build workflow has completed.

@emilk
emilk marked this pull request as ready for review February 4, 2025 07:49
@emilk
emilk requested a review from lucasmerlin as a code owner February 4, 2025 07:49
Comment thread crates/ecolor/src/color32.rs Outdated
if on_top && area_content_ui.visuals().window_highlight_topmost {
let mut round = window_frame.rounding;
let mut round =
window_frame.rounding - window_frame.stroke.width.round() as u8;

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe rename rounding to corner_radius everywhere?

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it in a follow-up PR

Comment thread crates/epaint/src/tessellator.rs Outdated
Comment thread crates/epaint/src/tessellator.rs
Comment thread crates/epaint/src/tessellator.rs
Comment thread crates/epaint/src/tessellator.rs Outdated
@lucasmerlin

Copy link
Copy Markdown
Collaborator

0 rounding + blur + thick stroke messes up pretty bad
image

I know blur and stroke is probably a rare edge case, but maybe there is an easy fix? If there isn't we could maybe set the rounding to at least 1 when we detect a blur and a stroke, since this only happens with 0 rounding

@emilk emilk changed the title Improve rectangle tessellation Improve tessellation quality Feb 4, 2025

@lucasmerlin lucasmerlin left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@emilk
emilk merged commit 3c07e01 into master Feb 4, 2025
@emilk
emilk deleted the emilk/improve-tessellator branch February 4, 2025 10:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

egui epaint feature New feature or request style visuals and theming

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants