Replace rendering for solid color circles (both filled and stroked) to use SDFs #177482

walley892 · 2025-10-24T04:37:12Z

Replace rendering for solid color circles (both filled and stroked) to use SDFs. This change improves the visual quality of circle borders, especially on platforms without MSAA support.

Adds a vertex and fragment shader that support SDF rendering for both filled and stroked circles.
Adds a Contents subclass, CircleContents that uses these shaders for rendering
Modifies Canvas::DrawCircle to use this new contents for drawing circles
Only supports circles with a solid color paint. Everything else continues to use the existing behavior
Adds a playground test that interactively scales circles to ensure fidelity at all scales.
Partially fixes [Impeller] Aliasing artifacts when rendering some SVGs on some Android emulators. #167181

Before (Android emulator):

After (Android emulator):

Pre-launch Checklist

[x ] I read the Contributor Guide and followed the process outlined there for submitting PRs.
[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.
[x ] All existing and new tests are passing.

google-cla · 2025-10-24T04:37:17Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

gemini-code-assist

Code Review

This pull request introduces SDF-based rendering for solid color circles to improve anti-aliasing quality, which is a great enhancement. The changes include new vertex and fragment shaders, a CircleContents class to use these shaders, and modifications in Canvas::DrawCircle to leverage this new path. A new interactive playground test is also added. The implementation looks solid, but I've found a couple of critical duplication issues that will cause build failures, along with several opportunities to improve code clarity and remove dead code.

engine/src/flutter/impeller/entity/contents/pipelines.h

engine/src/flutter/impeller/entity/BUILD.gn

engine/src/flutter/impeller/display_list/canvas.cc

engine/src/flutter/impeller/entity/contents/circle_contents.cc

engine/src/flutter/impeller/entity/shaders/circle.frag

gaaclarke · 2025-10-24T17:42:43Z

@walley892 you're going to have to sign the CLA. if you click that presubmit failure it should link you to getting that resolved

gaaclarke · 2025-10-24T17:43:25Z

the ci.yaml validation issue should be able to be resolved by updating your branch (either by merging main or rebasing against main)

gaaclarke

This is looking really good. Thanks Mr. Walley892. The concerns are:

Usage of fwidth
I want to see how it behaves when scaled
Let's get the ci happy so golden tests run

engine/src/flutter/impeller/entity/shaders/circle.frag

engine/src/flutter/impeller/entity/geometry/circle_geometry.h

engine/src/flutter/impeller/display_list/dl_unittests.cc

engine/src/flutter/impeller/entity/contents/circle_contents.cc

engine/src/flutter/impeller/display_list/dl_unittests.cc

engine/src/flutter/impeller/entity/contents/circle_contents.cc

gaaclarke

Okay, looks good to me. Let's just get CI happy. I think you need to copyright and the others may have been flakes.

engine/src/flutter/impeller/entity/contents/circle_contents.cc

chinmaygarde

I have serious misgivings about the direction here. So far, we have avoided having the fragment shaders be concerned about coverage in most cases. This is a notable departure from that approach. That it is being done for cases where there exists a broken MSAA implementation (emulators) makes me question if this is worthwhile.

I think what I am (hopefully incorrectly) concerned about is what happens when such shapes are used in operations where the coverage matters (like clipping). Won't that affect stenciling operations?

This also adds to the pipeline load which makes startup slower (again for the purpose of addressing emulators with broken MSAA).

gaaclarke · 2025-10-27T20:14:02Z

I have serious misgivings about the direction here. So far, we have avoided having the fragment shaders be concerned about coverage in most cases. This is a notable departure from that approach. That it is being done for cases where there exists a broken MSAA implementation (emulators) makes me question if this is worthwhile.

I think what I am (hopefully incorrectly) concerned about is what happens when such shapes are used in operations where the coverage matters (like clipping). Won't that affect stenciling operations?

This also adds to the pipeline load which makes startup slower (again for the purpose of addressing emulators with broken MSAA).

I had those conversations with Evan already, I'll throw something on your calendar to discuss it.

chinmaygarde · 2025-10-27T22:43:14Z

From the conversation, I was mistaken about the coverage geometry changing. The additional pipeline variant is unfortunate but Aaron says this is a one off. Looks good to me! Thanks for giving the additional context.

gaaclarke · 2025-10-28T20:20:53Z

FYI I'm happy with the code right now. I'm ready to approve when we are happy with the goldens. I think there were a few that mr wally892 wanted to look at. Particularly relating to think tiny rings evaporating from the anti-aliasing.

walley892 · 2025-10-29T07:13:56Z

FYI I'm happy with the code right now. I'm ready to approve when we are happy with the goldens. I think there were a few that mr wally892 wanted to look at. Particularly relating to think tiny rings evaporating from the anti-aliasing.

Changed the fragment shader to handle this case. Stroked circles that would be drawn just one pixel wide are just rendered as is with no fading.

gaaclarke · 2025-10-29T16:09:57Z

engine/src/flutter/impeller/entity/shaders/circle.frag

      frag_info.radius, frag_info.stroke_width, frag_info.center, v_position);
  float sdfDistance = mix(dist_filled, dist_stroked, frag_info.stroked);

  float pixelDerivativeSDF = fwidth(sdfDistance);


Can you change this file to have consistent variable naming following the c++ style guide? ex pixel_deriviative_sdf

gaaclarke

lgtm as long as the goldens are happy

chinmay disregarded this review in a comment but forgot to update the status

…stroked) to use SDFs (flutter/flutter#177482)

flutter/flutter@e5d5c01...c5e809a 2025-11-06 [email protected] Remove WindowingOwner.hasTopLevelWindows (flutter/flutter#178033) 2025-11-06 [email protected] Fix DropdownMenu escape key does not close the menu (flutter/flutter#178002) 2025-11-06 [email protected] Update documentation tool reference in image.dart (flutter/flutter#177782) 2025-11-06 [email protected] Roll Skia from 4eb2383d38f2 to 5c4e1352128f (5 revisions) (flutter/flutter#178094) 2025-11-06 [email protected] Revert "Refactor OverlayPortal semantics (#173005)" (flutter/flutter#178007) 2025-11-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix verified input test failure in CI (attempt 4) (#178018)" (flutter/flutter#178089) 2025-11-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[web] Unify Surface code between Skwasm and CanvasKit (#177138)" (flutter/flutter#178085) 2025-11-05 [email protected] Fix verified input test failure in CI (attempt 4) (flutter/flutter#178018) 2025-11-05 [email protected] fix: inconsistent horizontal spacing between hours and mins in time picker for non-english language (flutter/flutter#173706) 2025-11-05 [email protected] Roll Fuchsia Linux SDK from mpsxF1gd-jbKNvmpm... to cm88aTLui5yorSGYQ... (flutter/flutter#178074) 2025-11-05 [email protected] Fix(ios): Remove arm64 exclusion to support Xcode 26 simulators (flutter/flutter#177065) 2025-11-05 [email protected] Roll Skia from 2ff897e9b440 to 4eb2383d38f2 (18 revisions) (flutter/flutter#178070) 2025-11-05 [email protected] [web] Unify Surface code between Skwasm and CanvasKit (flutter/flutter#177138) 2025-11-05 [email protected] Update more missing ninja deps (flutter/flutter#178079) 2025-11-05 [email protected] Add ninja / cmake deps to failing tests (flutter/flutter#178054) 2025-11-05 [email protected] [web] Don't add webparagraph suite to CI (flutter/flutter#177681) 2025-11-05 [email protected] Fixing broken link in engine readme (flutter/flutter#177987) 2025-11-05 [email protected] Print reason for adb command failure in verified input test (attempt 3) (flutter/flutter#178005) 2025-11-05 [email protected] Fix `ReorderableList` items jumping when drag direction reverses mid-animation (flutter/flutter#173241) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `overflow_bar.0.dart‎` example (flutter/flutter#177813) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `data_table.1.dart‎` example (flutter/flutter#177812) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `switch.1.dart` example (flutter/flutter#177811) 2025-11-04 [email protected] Roll Skia from c89b6118266b to 2ff897e9b440 (6 revisions) (flutter/flutter#177999) 2025-11-04 [email protected] Fix verified input test in CI (attempt 2) (flutter/flutter#177961) 2025-11-04 [email protected] Replace rendering for solid color circles (both filled and stroked) to use SDFs (flutter/flutter#177482) 2025-11-04 [email protected] Roll Fuchsia Linux SDK from vxK5obzfr1X9P2kSh... to mpsxF1gd-jbKNvmpm... (flutter/flutter#177996) 2025-11-04 [email protected] Validate that platforms specified in .ci.yaml target names match the platforms defined in the platform_properties section (flutter/flutter#177523) 2025-11-04 [email protected] Roll Packages from 1a7075b to 3d926aa (6 revisions) (flutter/flutter#177998) 2025-11-04 [email protected] Remove dead code from snippet_generator (flutter/flutter#174440) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

walley892 requested a review from gaaclarke October 24, 2025 04:37

github-actions bot added engine flutter/engine related. See also e: labels. e: impeller Impeller rendering backend issues and features requests labels Oct 24, 2025

gemini-code-assist bot reviewed Oct 24, 2025

View reviewed changes

walley892 force-pushed the sdf-circles branch from 81c2883 to f70ea2a Compare October 24, 2025 05:01

gaaclarke requested changes Oct 24, 2025

View reviewed changes

walley892 force-pushed the sdf-circles branch 8 times, most recently from 97fa29e to eb2560a Compare October 24, 2025 21:12

gaaclarke reviewed Oct 24, 2025

View reviewed changes

engine/src/flutter/impeller/entity/contents/circle_contents.cc Outdated Show resolved Hide resolved

gaaclarke reviewed Oct 27, 2025

View reviewed changes

engine/src/flutter/impeller/entity/contents/circle_contents.cc Show resolved Hide resolved

chinmaygarde previously requested changes Oct 27, 2025

View reviewed changes

walley892 force-pushed the sdf-circles branch from eb2560a to 61524b9 Compare October 27, 2025 20:37

chinmaygarde self-requested a review October 27, 2025 22:39

walley892 force-pushed the sdf-circles branch 2 times, most recently from 2cea4fe to 08326c1 Compare October 28, 2025 18:58

gaaclarke reviewed Oct 29, 2025

View reviewed changes

gaaclarke approved these changes Oct 29, 2025

View reviewed changes

update goldens

6bc009b

walley892 force-pushed the sdf-circles branch from 297b0c3 to 6bc009b Compare October 30, 2025 20:38

walley892 enabled auto-merge October 31, 2025 19:56

walley892 added this pull request to the merge queue Nov 4, 2025

This was referenced Nov 4, 2025

Make generic paths look better on platforms without MSAA. #178003

Closed

[Impeller] Aliasing artifacts when rendering some SVGs on some Android emulators. #167181

Closed

Merged via the queue into flutter:master with commit a41146c Nov 4, 2025
185 checks passed

walley892 deleted the sdf-circles branch November 4, 2025 20:18

engine-flutter-autoroll mentioned this pull request Nov 5, 2025

Roll Flutter from e5d5c01850f2 to 3fd81edbf1e0 (14 revisions) flutter/packages#10364

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 5, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

bf956d9

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 5, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

5cdca95

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 5, 2025

Roll Flutter from e5d5c01850f2 to 3fd81edbf1e0 (14 revisions) flutter/packages#10365

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

d0025d9

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to c5e809a998fe (29 revisions) flutter/packages#10369

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

13920d9

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to 6925f8b815ea (30 revisions) flutter/packages#10370

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

97ed1fb

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to aebe02b44fe2 (31 revisions) flutter/packages#10371

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

5959cfe

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to c45883383950 (32 revisions) flutter/packages#10372

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

f531ddf

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to ac3b91db0dcc (33 revisions) flutter/packages#10373

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

a41146c20 Replace rendering for solid color circles (both filled and …

dfbca88

…stroked) to use SDFs (flutter/flutter#177482)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to 7dc982e1b16d (34 revisions) flutter/packages#10375

Closed

Piinks mentioned this pull request Nov 7, 2025

Flutter Notable Commits - 2025 #161460

Open

Replace rendering for solid color circles (both filled and stroked) to use SDFs #177482

Replace rendering for solid color circles (both filled and stroked) to use SDFs #177482

Uh oh!

Conversation

walley892 commented Oct 24, 2025

Pre-launch Checklist

Uh oh!

google-cla bot commented Oct 24, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gaaclarke commented Oct 24, 2025

Uh oh!

gaaclarke commented Oct 24, 2025

Uh oh!

gaaclarke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gaaclarke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chinmaygarde left a comment

Choose a reason for hiding this comment

Uh oh!

gaaclarke commented Oct 27, 2025

Uh oh!

chinmaygarde commented Oct 27, 2025

Uh oh!

gaaclarke commented Oct 28, 2025

Uh oh!

walley892 commented Oct 29, 2025

Uh oh!

gaaclarke Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaaclarke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gaaclarke Oct 29, 2025 •

edited

Loading