Antialiasing
WebGL 1 doesn't support multisampled render targets. Therefore, the default antialiasing (MSAA) has no effect in post processing pipelines. It's recommended to set the antialias flag to false when creating a WebGLRenderer for a post processing setup.
If WebGL 2 is available, MSAA may be enabled via the multisampling constructor option of the EffectComposer. Although MSAA provides high quality antialiasing at low computational cost, it may produce visual artifacts when used with certain effects such as SSAO and should not be regarded as a blanket antialiasing solution. The following images show SSAO with and without MSAA enabled:
| With MSAA | Without MSAA |
|---|---|
 |
 |
The SMAA technique implements efficient antialiasing for post processing pipelines. The postprocessing library provides the SMAAEffect as a default antialiasing solution.
SMAA uses two data images as look-up-tables to detect aliasing artifacts. These images can be generated using the SMAAImageLoader.
The technique focuses on handling each pattern in a very specific way (via look-up-tables), in order to minimize false positives in the pattern detection. Ultimately, this prevents antialiasing features that are not produced by jaggies, like texture details. — iryoku
import { LoadingManager } from "three";
import { SMAAEffect, SMAAImageLoader } from "postprocessing";
/**
* Loads scene assets.
*
* @return {Promise} Returns loaded assets when ready.
*/
function load() {
const assets = new Map();
const loadingManager = new LoadingManager();
const smaaImageLoader = new SMAAImageLoader(loadingManager);
return new Promise((resolve, reject) => {
loadingManager.onLoad = () => resolve(assets);
loadingManager.onError = reject;
smaaImageLoader.load(([search, area]) => {
assets.set("smaa-search", search);
assets.set("smaa-area", area);
});
});
}
/**
* Creates the scene.
*
* @param {Map} assets - Preloaded scene assets.
*/
function initialize(assets) {
const smaaEffect = new SMAAEffect(
assets.get("smaa-search"),
assets.get("smaa-area")
);
}
load().then(initialize).catch((e) => console.error(e));