Replace rendering for solid color circles (both filled and stroked) to use SDFs by walley892 · Pull Request #177482 · flutter/flutter

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

@@ -51,12 +51,19 @@ void main() {

  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

flutter-dashboard · 2025-10-30T09:08:43Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #177482 at sha 8dd29b8

jtmcdole

![awesome-computer-kid-computer-lgtm](

Warning

This asset could not be copied from your saved reply. Please try again later.

)

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

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

github-actions bot removed f: focus Focus traversal, gaining or losing focus team-ecosystem Owned by Ecosystem team team-android Owned by Android platform team team-ios Owned by iOS platform team d: docs/ flutter/flutter/docs, for contributors labels Oct 30, 2025

walley892 force-pushed the sdf-circles branch from 8939c3b to 8dd29b8 Compare October 30, 2025 07:36

flutter-dashboard bot added the will affect goldens Changes to golden files label Oct 30, 2025

jtmcdole approved these changes Oct 30, 2025

View reviewed changes

walley892 force-pushed the sdf-circles branch from 8dd29b8 to 297b0c3 Compare October 30, 2025 19:59

walley892 added 4 commits October 30, 2025 13:37

Update solid color circle rendering to use SDFs

8931a33

Create special case for stroked circles with a small width

3f5c193

fix variable naming

340e892

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

Piinks mentioned this pull request Nov 7, 2025

Flutter Notable Commits - 2025 #161460

Closed

		@@ -51,12 +51,19 @@ void main() {

		float pixelDerivativeSDF = fwidth(sdfDistance);

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!

flutter-dashboard bot commented Oct 30, 2025

Uh oh!

jtmcdole left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gaaclarke Oct 29, 2025 •

edited

Loading