Adds documentation for antialiasing with impeller#13370
Conversation
|
Visit the preview URL for this PR (updated for commit 76cc499): https://flutter-docs-prod--pr13370-antialias-doc-17a96hc6.web.app |
andywolff
left a comment
andywolff
left a comment
There was a problem hiding this comment.
LGTM. Contents and location of the new doc make sense to me.
sfshaza2
left a comment
sfshaza2
left a comment
There was a problem hiding this comment.
Some smoothing out and one question for @gaaclarke.
| only one fragment operation is calculated. This limits smoothing to edges. | ||
| Mobile phone GPUs have special hardware to optimize this process ( | ||
| [Tiled rendering][]). It comes in varying degrees of how many samples to | ||
| consider. |
There was a problem hiding this comment.
Not sure how you are defining "fragment operation". If it is "execution of a fragment program" then I don't think this is correct.
For any given pixel I believe it only performs one fragment shader operation on the center of a pixel for any pixel, whether it has all the same MSAA coverage or not. The only thing that MSAA adds is which of the sub-samples it propagates that single result to.
The text above implies that it only runs the fragment shader once for wholly enclosed interior pixels - and??? runs it multiple times for edge pixles? (I don't think it works that way).
| [Tiled rendering][]). It comes in varying degrees of how many samples to | ||
| consider. | ||
|
|
||
| On desktop and mobile 4x MSAA is used for all rendering calls. |
There was a problem hiding this comment.
Perhaps mention the consequences of the MSAA #, such as "the quantization of the coverage for edge pixels is limited to the number of MSAA samples" (so edge pixels are always only one of 0%, 25%, 50%, 75%, or 100% covered with MSAA 4).
| ### Signed distance fields ([SDFs][]) | ||
|
|
||
| Typically, hardware accelerated computer graphics define a series of points and | ||
| edges (a [mesh][]) and [shaders][]. Instead, SDF renders shapes in the fragment |
There was a problem hiding this comment.
"... and the color sample for pixels is either 0% or 100% the result of the fragment shader (color source?) for each pixel depending on whether it falls in the mesh or not"...?
| edges (a [mesh][]) and [shaders][]. Instead, SDF renders shapes in the fragment | ||
| shader program as signed distance fields. Since the shape is defined in the | ||
| fragment shader the edges can be smoothed at the fragment level instead of | ||
| relying on the rasterization of a mesh. |
There was a problem hiding this comment.
"smoothed ... by computing the coverage of the shape over each individual pixel at a high resolution (or precision?) and used to proportionally apply the color sample to that pixel"...?
| fragment shader the edges can be smoothed at the fragment level instead of | ||
| relying on the rasterization of a mesh. | ||
|
|
||
| On desktop, rendering with SDFs is enabled. On mobile platforms, SDFs are an |
|
|
||
| This technique is prioritized on desktop because SDF rendering puts more demand | ||
| on the GPU and Flutter supports older mobile phones. Also, the physical pixel | ||
| sizes on desktop computers are typically bigger than those of mobile phones. So |
There was a problem hiding this comment.
Desktop computers don't have pixels. ;)
"desktop displays"?
Perhaps provide some example statistics?
There was a problem hiding this comment.
Also, bigger in terms of field of view. Mobile phones are viewed closer than desktop displays, but their much higher pixel count still wins out in terms of pixel angular viewing angle thingy bopper...
|
|
||
| ### SDFs with the FragmentShader API | ||
|
|
||
| Standard primitive shapes in Flutter are drawn automatically with SDFs. If a |
There was a problem hiding this comment.
automatically -> by default unless the developer changes the "?antialiased?" setting in the Paint object...?
|
|
||
| | No AA | MSAA 4x | MSAA 4x + SDF | | ||
| | ------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------- | | ||
| |  |  |  | |
There was a problem hiding this comment.
The images are subtle. One other option is to show a very slightly rotated line where the stepping is far more abrupt with MSAA and it is easy to see more steps with SDF.
5 participants
This PR should only be landed after macOS impeller is switched to SDFs by default: flutter/flutter#183045
Description
This explains SDF rendering for macOS and covers antialiasing in general. The main things to communicate is the escape hatch if people want to implement their own SDFs and how to opt-in to SDFs on mobile devices.
Issues fixed by this PR
flutter/flutter#183043
PRs or commits this PR depends on
flutter/flutter#183045
Presubmit checklist
of 80 characters or fewer.