Antialiasing

Multisampled Render Targets

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 antialias to false when creating a WebGLRenderer for a post processing setup.

Subpixel Morphological Antialiasing

The SMAA technique implements efficient antialiasing for post processing pipelines. The postprocessing library provides the SMAAEffect as a default antialiasing solution.

SMAA Lookup Tables

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

How to load the SMAA images

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(console.error);