Adds documentation for antialiasing with impeller by gaaclarke · Pull Request #13370 · flutter/website

gaaclarke · 2026-05-06T23:56:04Z

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

If you are unwilling, or unable, to sign the CLA, even for a tiny, one-word PR, please file an issue instead of a PR.
If this PR is not meant to land until a future stable release, mark it as draft with an explanation.
This PR follows the Google Developer Documentation Style Guidelines—for example, it doesn't use i.e. or e.g., and it avoids I and we (first-person pronouns).
This PR uses semantic line breaks
of 80 characters or fewer.

flutter-website-bot · 2026-05-07T00:02:09Z

Visit the preview URL for this PR (updated for commit 76cc499):

https://flutter-docs-prod--pr13370-antialias-doc-17a96hc6.web.app

andywolff

LGTM. Contents and location of the new doc make sense to me.

sfshaza2

Some smoothing out and one question for @gaaclarke.

sfshaza2 · 2026-05-07T20:12:36Z

+### Multisample anti-aliasing (MSAA)
+
+[MSAA][] is a global anti-aliasing technique that operates on the whole contents
+of the screen. It is an optimization over rendering the whole screen at a larger


Suggested change

of the screen. It is an optimization over rendering the whole screen at a larger

It's more optimized than rendering the whole screen at a larger

The meaning I'm trying to convey is that this is a technique that is an optimization on supersampling. I'm spelling out supersampling though to try to make it more accessible. The suggestion loses that relationship.

sfshaza2 · 2026-05-07T20:13:56Z

+Typically, hardware accelerated computer graphics is done by defining a series
+of points and edges (a [mesh][]) and [shaders][]. SDF rendering instead renders


Suggested change

Typically, hardware accelerated computer graphics is done by defining a series

of points and edges (a [mesh][]) and [shaders][]. SDF rendering instead renders

Typically, hardware accelerated computer graphics define a series

of points and edges (as a [mesh][]) and [shaders][]). Instead, SDF renders

Done. I did keep "a mesh" though since it is defining the concept. It's not an example of how those things could be a collection.

sfshaza2 · 2026-05-07T20:16:52Z

+the shape of things in the fragment shader program using SDFs to define the
+shape of the object being drawn. Since the shape is defined in the fragment


Suggested change

the shape of things in the fragment shader program using SDFs to define the

shape of the object being drawn. Since the shape is defined in the fragment

shapes in the fragment shader program as signed distance fields.

Since the shape is defined in the fragment

sfshaza2 · 2026-05-07T20:19:57Z

+shader there is an opportunity to smooth out edges at the fragment level instead
+of relying on the rasterization of a mesh.


Suggested change

shader there is an opportunity to smooth out edges at the fragment level instead

of relying on the rasterization of a mesh.

shader, the edges can be smoothed at the fragment level instead

of relying on the rasterization of a mesh.

sfshaza2 · 2026-05-07T20:21:25Z

+On desktop, rendering with SDFs is enabled. On mobile platforms SDFs is an
+option whose default value is false.


Suggested change

On desktop, rendering with SDFs is enabled. On mobile platforms SDFs is an

option whose default value is false.

On desktop, rendering with SDFs is enabled. On mobile platforms,

SDF is an option that defaults to false.

sfshaza2 · 2026-05-07T20:22:57Z

+
+### SDFs with the FragmentShader API
+
+Standard primitive shapes in Flutter will be drawn automatically with SDFs. If


Suggested change

Standard primitive shapes in Flutter will be drawn automatically with SDFs. If

Standard primitive shapes in Flutter are drawn automatically with SDFs. If

sfshaza2 · 2026-05-07T20:24:14Z

+a Flutter developer wants to define their own custom graphics with SDFs they can
+do so with the [FragmentShader API][]. Using the [drawPath()][] is sufficient
+for most use cases without resorting to high quality SDF rendering. Not all
+drawn paths are guaranteed to result in SDF rendering though.


Do we want to say more about this? Why might it be ignored even if disabled?

It's the inverse of that, you have SDFs enabled but you aren't guaranteed to get them always. I'm sort of covering for the current limitations in the engine. It's an ongoing research problem. There will always be some frontier where it becomes impractical because of hardware limitations. I don't know if I want to wade into that.

sfshaza2 · 2026-05-07T20:25:22Z

+---
+
+Aliasing is the visual artifacts that result from drawing geometry to a grid of
+pixels (rasterization). Impeller employs a couple of techniques to smooth out


Suggested change

pixels (rasterization). Impeller employs a couple of techniques to smooth out

pixels (rasterization). Impeller employs a couple techniques to smooth out

Adds documentation for antialiasing with impeller

68e69c5

gaaclarke added 2 commits May 7, 2026 09:35

added links

bb96228

added internal links

7581f25

gaaclarke requested a review from andywolff May 7, 2026 16:45

andywolff reviewed May 7, 2026

View reviewed changes

Comment thread sites/docs/src/content/perf/antialiasing.md

andywolff approved these changes May 7, 2026

View reviewed changes

adds some images

0e74068

sfshaza2 reviewed May 7, 2026

View reviewed changes

sfshaza2 added the review.await-update Awaiting Updates after Edits label May 7, 2026

shams feedback

76cc499

gaaclarke requested a review from sfshaza2 May 7, 2026 22:59

	of the screen. It is an optimization over rendering the whole screen at a larger
	It's more optimized than rendering the whole screen at a larger

		Typically, hardware accelerated computer graphics is done by defining a series
		of points and edges (a [mesh][]) and [shaders][]. SDF rendering instead renders

		the shape of things in the fragment shader program using SDFs to define the
		shape of the object being drawn. Since the shape is defined in the fragment

		shader there is an opportunity to smooth out edges at the fragment level instead
		of relying on the rasterization of a mesh.

		On desktop, rendering with SDFs is enabled. On mobile platforms SDFs is an
		option whose default value is false.


		### SDFs with the FragmentShader API

		Standard primitive shapes in Flutter will be drawn automatically with SDFs. If

	Standard primitive shapes in Flutter will be drawn automatically with SDFs. If
	Standard primitive shapes in Flutter are drawn automatically with SDFs. If

	pixels (rasterization). Impeller employs a couple of techniques to smooth out
	pixels (rasterization). Impeller employs a couple techniques to smooth out

Conversation

gaaclarke commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issues fixed by this PR

PRs or commits this PR depends on

Presubmit checklist

Uh oh!

flutter-website-bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

andywolff left a comment

Choose a reason for hiding this comment

Uh oh!

sfshaza2 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gaaclarke commented May 6, 2026 •

edited

Loading

flutter-website-bot commented May 7, 2026 •

edited

Loading