Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 15.4 — Anti-Aliasing
3D Web · Example 1 of 2

Soft edge pixels with each method

The counts come from this software GPU: another GPU's MSAA pattern gives a different number, but 0 stays 0. The pause lets SMAA's lookup pictures load.

Slanted edges on a pixel grid look like steps. MSAA smooths them while drawing, FXAA and SMAA smooth the finished picture. The catch: the canvas's MSAA does not reach a composer's pictures unless you ask for it.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 4 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Create a composer whose pictures keep 4-sample MSAA.

02

Add FXAA at the right place in the chain Render, Bloom, Output.

Explain it without notes

01

Why do edges become jagged when you add a composer to a renderer created with antialias: true?

02

Compare MSAA, SMAA and FXAA for a showroom page for phones.

Soft edge pixels with each method
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

no anti-aliasing:        soft edge pixels 0
antialias: true:         soft edge pixels 450
same renderer + composer: soft edge pixels 0
composer, samples: 4:    soft edge pixels 450
composer + SMAA:         first frame: 0
composer + SMAA:         soft edge pixels 595
composer + FXAA:         soft edge pixels 759