[CP-beta]UberSDF rect handling for thin (line-like) rectangles by flutteractionsbot · Pull Request #189517 · flutter/flutter

flutteractionsbot · 2026-07-15T17:50:03Z

This pull request is created by automatic cherry pick workflow
Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request.

This is the first in a set of 3 PRs (#188821, #189224, and #188514) that will be cherry picked in order to fix a set of line-related issues when Impeller with SDF rendering is enabled.

Issue Link:

What is the link to the issue this cherry-pick is addressing?

#188329
#188911
#188593

Impact Description:

What is the impact (ex. visual jank on Samsung phones, app crash, cannot ship an iOS app)?
Does it impact development (ex. flutter doctor crashes when Android Studio is installed),
or the shipping of production apps (the app crashes on launch).
This information is for domain experts and release engineers to understand the consequences of saying yes or no to the cherry pick.

Thin ines (including lines rendered with canvas.drawLine, thin line-like rectangles rendered with canvas.drawRect, and paths drawn with canvas.drawPath that consist of a single line or thin rectangle) have various highly visible rendering issues:

opacity is ignored
lines with stroke width less than 1 pixel are incorrectly clamped up to be ~2 pixels wide
lines with stroke width more than 1 pixel are overly thick, with an added thickness proportional to their intended width

This issue is present when impeller is enabled Impeller with SDF rendering. In the beta channel, Impeller with SDF rendering is the default when building apps for desktop platforms: macOS, Linux, and Windows.

Changelog Description:

Explain this cherry pick:

In one line that is accessible to most Flutter developers.
That describes the state prior to the fix.
That includes which platforms are impacted.
See best practices for examples.

flutter/188329, flutter/188911, flutter/188593: Multiple line rendering issues when Impeller with SDF rendering is enabled (default enabled on desktop platforms)

Workaround:

Is there a workaround for this issue?

Disable Impeller, falling back to Skia rendering.

Risk:

What is the risk level of this cherry-pick?

Low
Medium
High

Test Coverage:

Are you confident that your fix is well-tested by automated tests?

Yes
No

Validation Steps:

What are the steps to validate that this fix works?

After all 3 PRs are cherry picked, verify the sample apps in the relevant issues (#188329 and #188911) render with expected opacity and with expected line widths.

Implements a custom filledRectSDF function in UberSDF with some custom behavior in order to properly handle dimensions of around 1 pixel and less. Similar thin-shape logic may also be applicable for other shapes in UberSDF. But I'm limiting this PR to just change the behavior for filled rectangle behavior. This is the most common use of very thin shapes (thin rects are often used for lines). Other shapes being drawn thinly would be rare corner cases, I'd expect. If we want to consider other shapes, that should be a follow-up. This change adds gamma correction to the alpha of all SDF shapes. So I expect a lot of golden changes. There will be changes small color changes to the AA fringe of every shape. Factors out common code in the existing `HairlinePath` and `HairlineDrawLine` playground/golden tests. Expands these with new versions that draw thin (`width=0.3`), rotated thin, and one pixel lines. And adds "Rect" versions which draw the same shape with `drawRect` instead of `drawPath` or `drawLine`. Fixes flutter#188591 ## Screenshot UberSDF drawRect with this PR, using the demo app from flutter#188590 which draws lines at every incremental 0.01 offset:: <img height="300" alt="image" src="/sitelet?url=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter%2Fpull%2F%253Ca%2520href%3D"/sitelet?url=https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F98fdc589-dc91-4b70-b848-64dc6c9409cf">https://github.com/user-attachments/assets/98fdc589-dc91-4b70-b848-64dc6c9409cf" /> Compare with the screenshots of various drawing lining methods in flutter#188590. The new lines have very consistent brightness, and have no disappearing issues. ## Videos Using the hairline/thinline drawing playground tests. Note that github's UI seems to not allow showing the video at actual size, so what you see inline is not completely accurate. But it's pretty close. If you want to see what it looks like at full size, I think you'll have to download the videos. ### UberSDF drawRect with this PR: https://github.com/user-attachments/assets/89d8e1dd-1bcc-4211-b081-6255f5c8d55b ### UberSDF drawRect existing behavior: https://github.com/user-attachments/assets/c4cd4fac-7fec-4024-9320-0b6526daf73e ### LineContents AA drawline: https://github.com/user-attachments/assets/a6f70f40-82c8-415a-9490-4222b757f7ce ### Tesselation drawRect https://github.com/user-attachments/assets/1f75fc06-32ec-449b-8553-67b98565482d ### Tesselation drawLine https://github.com/user-attachments/assets/23515419-c890-4bd1-8428-55ff55d68518 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [AI contribution guidelines]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#ai-contribution-guidelines [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

flutteractionsbot · 2026-07-15T17:50:06Z

@b-luk please fill out the PR description above, afterwards the release team will review this request.

flutter-dashboard · 2026-07-15T17:50:10Z

This pull request was opened from and to a release candidate branch. This should only be done as part of the official Flutter release process. If you are attempting to make a regular contribution to the Flutter project, please close this PR and follow the instructions at Tree Hygiene for detailed instructions on contributing to Flutter.

Reviewers: Use caution before merging pull requests to release branches. Ensure the proper procedure has been followed.

gemini-code-assist

Code Review

This pull request refactors line drawing unit tests and introduces rendering improvements for small/thin rectangles when using SDF rendering. Specifically, it expands sub-pixel filled rectangles to a minimum of one pixel while scaling down their alpha, adds a specialized pixel size calculation for rectangles in the shader, and applies gamma correction to the output alpha. The feedback suggests normalizing the input rectangle in canvas.cc to prevent negative scaling issues and clamping the calculated luma value in uber_sdf.frag to avoid potential out-of-bounds or NaN values with HDR colors.

gemini-code-assist · 2026-07-15T17:52:39Z

+    Rect effective_rect = rect;
+    Color effective_color = paint.color;
+
+    // Expand very small/thin rectangles to have a minimum 1 pixel width/height.
+    // Rectangles that are scaled up to meet this minimum get their alpha scaled
+    // down by the same ratio to maintain visual consistency.
+    //
+    // This only applies to filled rectangles with no perspective transform.
+    if (paint.style == Paint::Style::kFill &&
+        !GetCurrentTransform().HasPerspective2D()) {
+      // Convert local rectangle size to device pixel size.
+      Vector2 rect_pixel_size = Vector2(rect.GetSize()) * transform_scaling;
+
+      // Expand rect pixel size dimensions to a 1.0 minimum.
+      Vector2 expanded_rect_pixel_size =
+          rect_pixel_size.Max(Vector2(1.0f, 1.0f));
+
+      // Calculate the alpha scaling as the ratio of the original rectangle to
+      // the expanded rectangle.
+      Scalar alpha_scaling = (rect_pixel_size.x / expanded_rect_pixel_size.x) *
+                             (rect_pixel_size.y / expanded_rect_pixel_size.y);
+
+      if (alpha_scaling <= kEhCloseEnough) {
+        // Rect is effectively invisible and doesn't need to be drawn.
+        return;
+      }
+
+      // Convert expanded rectangle from pixel size back to local size.
+      Vector2 expanded_rect_local_size =
+          Vector2(expanded_rect_pixel_size / transform_scaling);
+
+      effective_rect = Rect::MakeEllipseBounds(rect.GetCenter(),
+                                               expanded_rect_local_size * 0.5f);


If the input rect is not normalized (i.e., has negative width or height), rect.GetSize() will return negative components. This leads to a negative alpha_scaling value, which triggers the early return and prevents the rectangle from being drawn at all. To prevent this regression, we should normalize the rectangle first using rect.Normalize() and use effective_rect consistently for all subsequent calculations.

Rect effective_rect = rect.Normalize(); Color effective_color = paint.color; // Expand very small/thin rectangles to have a minimum 1 pixel width/height. // Rectangles that are scaled up to meet this minimum get their alpha scaled // down by the same ratio to maintain visual consistency. // // This only applies to filled rectangles with no perspective transform. if (paint.style == Paint::Style::kFill && !GetCurrentTransform().HasPerspective2D()) { // Convert local rectangle size to device pixel size. Vector2 rect_pixel_size = Vector2(effective_rect.GetSize()) * transform_scaling; // Expand rect pixel size dimensions to a 1.0 minimum. Vector2 expanded_rect_pixel_size = rect_pixel_size.Max(Vector2(1.0f, 1.0f)); // Calculate the alpha scaling as the ratio of the original rectangle to // the expanded rectangle. Scalar alpha_scaling = (rect_pixel_size.x / expanded_rect_pixel_size.x) * (rect_pixel_size.y / expanded_rect_pixel_size.y); if (alpha_scaling <= kEhCloseEnough) { // Rect is effectively invisible and doesn't need to be drawn. return; } // Convert expanded rectangle from pixel size back to local size. Vector2 expanded_rect_local_size = Vector2(expanded_rect_pixel_size / transform_scaling); effective_rect = Rect::MakeEllipseBounds(effective_rect.GetCenter(), expanded_rect_local_size * 0.5f);

gemini-code-assist · 2026-07-15T17:52:39Z

+
+  // Interpolate between the dark and light gamma corrected alphas based on the
+  // foreground luma.
+  float luma = dot(foreground_rgb, vec3(0.2126, 0.7152, 0.0722));


To prevent potential out-of-bounds extrapolation or NaN values when dealing with wide-gamut or HDR colors (where RGB values can exceed 1.0), clamp the calculated luma value to the [0.0, 1.0] range before passing it to mix.

float luma = clamp(dot(foreground_rgb, vec3(0.2126, 0.7152, 0.0722)), 0.0, 1.0);

justinmc

LGTM 👍

This pull request is created by [automatic cherry pick workflow](https://github.com/flutter/flutter/blob/main/docs/releases/Flutter-Cherrypick-Process.md#automatically-creates-a-cherry-pick-request) Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request. This is the second in a set of 3 PRs (#188821, #189224, and #188514) that will be cherry picked in order to fix a set of line-related issues when Impeller with SDF rendering is enabled. The first PR was cherry picked and merged with #189517 ### Issue Link: What is the link to the issue this cherry-pick is addressing? #188329 #188911 #188593 ### Impact Description: What is the impact (ex. visual jank on Samsung phones, app crash, cannot ship an iOS app)? Does it impact development (ex. flutter doctor crashes when Android Studio is installed), or the shipping of production apps (the app crashes on launch). This information is for domain experts and release engineers to understand the consequences of saying yes or no to the cherry pick. Thin ines (including lines rendered with `canvas.drawLine`, thin line-like rectangles rendered with `canvas.drawRect`, and paths drawn with `canvas.drawPath` that consist of a single line or thin rectangle) have various highly visible rendering issues: - opacity is ignored - lines with stroke width less than 1 pixel are incorrectly clamped up to be ~2 pixels wide - lines with stroke width more than 1 pixel are overly thick, with an added thickness proportional to their intended width This issue is present when impeller is enabled Impeller with SDF rendering. In the beta channel, Impeller with SDF rendering is the default when building apps for desktop platforms: macOS, Linux, and Windows. ### Changelog Description: Explain this cherry pick: * In one line that is accessible to most Flutter developers. * That describes the state prior to the fix. * That includes which platforms are impacted. See [best practices](https://github.com/flutter/flutter/blob/main/docs/releases/Hotfix-Documentation-Best-Practices.md) for examples. [flutter/188329](#188329), [flutter/188911](#188911), [flutter/188593](#188593): Multiple line rendering issues when Impeller with SDF rendering is enabled (default enabled on desktop platforms) ### Workaround: Is there a workaround for this issue? Disable Impeller, falling back to Skia rendering. ### Risk: What is the risk level of this cherry-pick? ### Test Coverage: Are you confident that your fix is well-tested by automated tests? ### Validation Steps: What are the steps to validate that this fix works? After all 3 PRs are cherry picked, verify the sample apps in the relevant issues (#188329 and #188911) render with expected opacity and with expected line widths.

…es (#189537) This pull request is created by [automatic cherry pick workflow](https://github.com/flutter/flutter/blob/main/docs/releases/Flutter-Cherrypick-Process.md#automatically-creates-a-cherry-pick-request) Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request. This is the third in a set of 3 PRs (#188821, #189224, and #188514) that will be cherry picked in order to fix a set of line-related issues when Impeller with SDF rendering is enabled. The first PR was cherry picked and merged with #189517 The second PR was cherry picked and merged with #189529 ### Issue Link: What is the link to the issue this cherry-pick is addressing? #188329 #188911 #188593 ### Impact Description: What is the impact (ex. visual jank on Samsung phones, app crash, cannot ship an iOS app)? Does it impact development (ex. flutter doctor crashes when Android Studio is installed), or the shipping of production apps (the app crashes on launch). This information is for domain experts and release engineers to understand the consequences of saying yes or no to the cherry pick. Thin ines (including lines rendered with `canvas.drawLine`, thin line-like rectangles rendered with `canvas.drawRect`, and paths drawn with `canvas.drawPath` that consist of a single line or thin rectangle) have various highly visible rendering issues: - opacity is ignored - lines with stroke width less than 1 pixel are incorrectly clamped up to be ~2 pixels wide - lines with stroke width more than 1 pixel are overly thick, with an added thickness proportional to their intended width This issue is present when impeller is enabled Impeller with SDF rendering. In the beta channel, Impeller with SDF rendering is the default when building apps for desktop platforms: macOS, Linux, and Windows. ### Changelog Description: Explain this cherry pick: * In one line that is accessible to most Flutter developers. * That describes the state prior to the fix. * That includes which platforms are impacted. See [best practices](https://github.com/flutter/flutter/blob/main/docs/releases/Hotfix-Documentation-Best-Practices.md) for examples. [flutter/188329](#188329), [flutter/188911](#188911), [flutter/188593](#188593): Multiple line rendering issues when Impeller with SDF rendering is enabled (default enabled on desktop platforms) ### Workaround: Is there a workaround for this issue? Disable Impeller, falling back to Skia rendering. ### Risk: What is the risk level of this cherry-pick? ### Test Coverage: Are you confident that your fix is well-tested by automated tests? ### Validation Steps: What are the steps to validate that this fix works? After all 3 PRs are cherry picked, verify the sample apps in the relevant issues (#188329 and #188911) render with expected opacity and with expected line widths.

flutteractionsbot added the cp: review Cherry-picks in the review queue label Jul 15, 2026

flutter-dashboard Bot added the CICD Run CI/CD label Jul 15, 2026

github-actions Bot added engine flutter/engine related. See also e: labels. e: impeller Impeller rendering backend issues and features requests labels Jul 15, 2026

gemini-code-assist Bot reviewed Jul 15, 2026

View reviewed changes

justinmc approved these changes Jul 15, 2026

View reviewed changes

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 15, 2026

auto-submit Bot merged commit eda1209 into flutter:flutter-3.47-candidate.0 Jul 15, 2026
10 checks passed

b-luk mentioned this pull request Jul 15, 2026

[CP-beta]UberSDF thin roundrect handling #189529

Merged

2 of 5 tasks

b-luk mentioned this pull request Jul 15, 2026

[CP-beta]Implement UberSDF lines to replace LineContents-based AA lines #189537

Merged

2 of 5 tasks

flutteractionsbot deleted the cp-beta-899764b6f7c3986d0dd29d38187ed2f0ddd537cd branch July 20, 2026 17:02

Navigation Menu

Repository navigation

[CP-beta]UberSDF rect handling for thin (line-like) rectangles - #189517

[CP-beta]UberSDF rect handling for thin (line-like) rectangles#189517
auto-submit[bot] merged 1 commit into
flutter:flutter-3.47-candidate.0from
flutteractionsbot:cp-beta-899764b6f7c3986d0dd29d38187ed2f0ddd537cd

flutteractionsbot commented Jul 15, 2026 •

edited by b-luk

Loading

Uh oh!

flutteractionsbot commented Jul 15, 2026

Uh oh!

flutter-dashboard Bot commented Jul 15, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jul 15, 2026

Uh oh!

gemini-code-assist Bot Jul 15, 2026

Uh oh!

justinmc left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

flutteractionsbot commented Jul 15, 2026 • edited by b-luk Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue Link:

Impact Description:

Changelog Description:

Workaround:

Risk:

Test Coverage:

Validation Steps:

Uh oh!

flutteractionsbot commented Jul 15, 2026

Uh oh!

flutter-dashboard Bot commented Jul 15, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

flutteractionsbot commented Jul 15, 2026 •

edited by b-luk

Loading