Repository navigation
[CP-beta]Eliminate some early returns in uber_sdf.frag to fix broken UberSDF AA on Windows - #190378
Conversation
…A on Windows (flutter#190260) See flutter#189827 (comment) for some more context. That comment shows 2 issues: 1. UberSDF AA is broken on Windows 2. Tessellated AA is broken on OpenGLES Fixes flutter#189827 (comment) This PR fixes the first issue. The second issue is tracked at flutter#190060. This PR flattens some branching in uber_sdf.frag to eliminate some early returns. Something about the dFdx and dFdy derivatives are incompatible with ANGLE and/or D3D, making uberSDF antialiasing fail on Windows. I don't know what the exact limits are of when dFdx and dFdy are allowed. From asking Gemini, it may be related to branching, non-uniform branching, loops, or early return statements. After some manual testing, eliminating early return statements in functions which use dFdx and dFdy (either directly, or indirectly through a child call) seems sufficient to fix this. ### Demo app <details> <summary>Demo:</summary> ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @OverRide Widget build(BuildContext context) { return InteractiveViewer( maxScale: 10, child: Container( color: Colors.black, child: CustomPaint(painter: TestPainter()), ), ); } } class TestPainter extends CustomPainter { @OverRide void paint(Canvas canvas, Size size) { var filledPaint = Paint()..color = Colors.white; var strokedPaint = Paint() ..color = Colors.white ..style = PaintingStyle.stroke ..strokeWidth = 5; const rect = Rect.fromLTWH(20, 20, 30.5, 15.5); // circle canvas.drawCircle(Offset(35, 25), 15.5, filledPaint); canvas.save(); canvas.translate(50, 0); canvas.drawCircle(Offset(35, 25), 15.5, strokedPaint); canvas.restore(); // oval canvas.translate(0, 50); canvas.drawOval(rect, filledPaint); canvas.save(); canvas.translate(50, 0); canvas.drawOval(rect, strokedPaint); canvas.restore(); // rounded rect canvas.translate(0, 50); canvas.drawRRect(RRect.fromRectAndRadius(rect, .circular(5)), filledPaint); canvas.save(); canvas.translate(50, 0); canvas.drawRRect( RRect.fromRectAndRadius(rect, .circular(5)), strokedPaint, ); canvas.restore(); // column 2 canvas.translate(120, -150); // rect canvas.translate(0, 50); canvas.drawRect(rect, filledPaint); canvas.save(); canvas.translate(50, 0); canvas.drawRect(rect, strokedPaint); canvas.restore(); // rotated rect canvas.translate(0, 50); canvas.save(); canvas.rotate(0.3); canvas.drawRect(rect, filledPaint); canvas.restore(); canvas.save(); canvas.translate(50, 0); canvas.rotate(0.3); canvas.drawRect(rect, strokedPaint); canvas.restore(); // RSuperellipse canvas.translate(0, 50); canvas.drawRSuperellipse( RSuperellipse.fromRectAndRadius(rect, .circular(5)), filledPaint, ); canvas.save(); canvas.translate(50, 0); canvas.drawRSuperellipse( RSuperellipse.fromRectAndRadius(rect, .circular(5)), strokedPaint, ); canvas.restore(); } @OverRide bool shouldRepaint(covariant CustomPainter oldDelegate) => false; } ``` </details> ### Before: <img width="232" height="189" alt="image" src="https://github.com/user-attachments/assets/ef75b0ea-62be-49a6-9c20-1507ed9e1435" /> 500% zoom: <img width="1150" height="938" alt="image" src="https://github.com/user-attachments/assets/e199cbf1-222c-4e1d-b250-e5649b212e86" /> ### After: <img width="232" height="189" alt="image" src="https://github.com/user-attachments/assets/181c9316-e3f1-4b10-b474-fdc2baf74e50" /> 500% zoom: <img width="1150" height="938" alt="image" src="https://github.com/user-attachments/assets/26783e17-d5de-46f3-a0af-9b8801aeb122" /> Notice that stroked RSuperellipse does not have AA. This confused me for a long time. Eventually I figured out that stroked RSuperellipse is [always drawn with a path](https://github.com/flutter/flutter/blob/b1ae9ca144127fa87eb86d0cdf73f6c028964ec3/engine/src/flutter/display_list/dl_builder.cc#L1371-L1378). So it does not go through the UberSDF code. Paths render with tessellation, which is supposed to use MSAA but is currently not functioning properly on Windows. ## 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 `///`). - [ ] 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. <!-- Links --> [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 --------- Co-authored-by: gaaclarke <[email protected]>
|
@b-luk please fill out the PR description above, afterwards the release team will review this request. |
|
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. |
There was a problem hiding this comment.
Code Review
This pull request refactors the uber_sdf.frag shader to unify the return paths in roundRectPixelSize, filledSDF, and strokedSDF by assigning values to local variables and returning them at the end of the functions. The offline compiler statistics in malioc.json are updated accordingly. Feedback suggests simplifying the conditional checks in strokedSDF by introducing a local boolean variable and removing a redundant check.
| float sdf; | ||
| float pixel_size; | ||
| if (frag_info.type >= 0.5 && frag_info.type < 1.5 && | ||
| frag_info.stroke_join < 0.5) { | ||
| // Rect with Miter join | ||
| float outer = distanceFromRect(p, frag_info.size + half_stroke); | ||
| float inner = base_sdf + half_stroke; | ||
| sdf = max(outer, -inner); | ||
| pixel_size = pixelSize(sdf); | ||
| } else if (frag_info.type >= 0.5 && frag_info.type < 1.5 && | ||
| frag_info.stroke_join >= 0.5 && frag_info.stroke_join < 1.5) { | ||
| // Rect with Bevel join | ||
| float outer = | ||
| distanceFromChamferRect(p, frag_info.size + half_stroke, half_stroke); | ||
| float inner = base_sdf + half_stroke; | ||
| sdf = max(outer, -inner); | ||
| pixel_size = pixelSize(sdf); | ||
| } else { | ||
| // All other shapes | ||
| vec2 sdf_and_pixel_size = | ||
| SDFStroke(base_sdf, base_pixel_size, frag_info.stroke_width); | ||
| sdf = sdf_and_pixel_size.x; | ||
| pixel_size = sdf_and_pixel_size.y; | ||
| } | ||
|
|
||
| return SDFStroke(base_sdf, base_pixel_size, frag_info.stroke_width); | ||
| return vec2(sdf, pixel_size); |
There was a problem hiding this comment.
We can simplify the conditional checks and avoid repeating the frag_info.type >= 0.5 && frag_info.type < 1.5 check by introducing a local boolean variable is_rect. Additionally, the check frag_info.stroke_join >= 0.5 in the else if is redundant because the first if branch already handles the case where frag_info.stroke_join < 0.5.
float sdf;
float pixel_size;
bool is_rect = frag_info.type >= 0.5 && frag_info.type < 1.5;
if (is_rect && frag_info.stroke_join < 0.5) {
// Rect with Miter join
float outer = distanceFromRect(p, frag_info.size + half_stroke);
float inner = base_sdf + half_stroke;
sdf = max(outer, -inner);
pixel_size = pixelSize(sdf);
} else if (is_rect && frag_info.stroke_join < 1.5) {
// Rect with Bevel join
float outer =
distanceFromChamferRect(p, frag_info.size + half_stroke, half_stroke);
float inner = base_sdf + half_stroke;
sdf = max(outer, -inner);
pixel_size = pixelSize(sdf);
} else {
// All other shapes
vec2 sdf_and_pixel_size =
SDFStroke(base_sdf, base_pixel_size, frag_info.stroke_width);
sdf = sdf_and_pixel_size.x;
pixel_size = sdf_and_pixel_size.y;
}
return vec2(sdf, pixel_size);
References
- Suggest simplification and refactoring to enhance readability and maintainability. (link)
|
Importantly, while this PR doesn't look like it has test. The fix is documented in the golden output from malioc that we check in. See #190260 (comment) |
a0378ad
into
flutter:flutter-3.47-candidate.0
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.
Issue Link:
What is the link to the issue this cherry-pick is addressing?
#189827
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.
This PR fixes anti-aliasing on some draw calls in Impeller Windows, specifically all draws using UberSDF (almost all draws except for paths and some corner case shapes).
Changelog Description:
Explain this cherry pick:
See best practices for examples.
< Replace with changelog description here >
[flutter/189827] When running an app on Windows with Impeller, most raw shape draws had jagged edges.
Workaround:
Is there a workaround for this issue?
Yes, downgrading to Skia.
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?
Verified by running a Flutter app on Windows before and after this fix. See the PR description at #190260.