Implementing SMAA (from pmndrs) into three js

[tabetVercetti]

Hello all :D I am getting myself familiar with this wonderful postprocessing library. I went over the demo codes, but to be honest, i am struggling to understand how to implement some of these effects. I created a simple three js case in order to practice. So far i have managed to add selective bloom, but i would like to add anti-aliasing (SMAA). I would appreciate it if anyone can guide me on how i can add smaa into this simple three js case im working on:
`//Imports for standard Threejs
import * as THREE from 'three';

//Imports for pmndrs post processing library
import { WebGLRenderer } from 'three';
import {
SelectiveBloomEffect,
BlendFunction,
SMAAEffect,
EffectComposer,
EffectPass,
RenderPass
} from "postprocessing";

// Create scene
const scene = new THREE.Scene();

// Create red GLOWING cube BASIC
const redGeometry = new THREE.BoxGeometry();
const redMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color().setRGB(1, 0
, 0) });
// color is set to 10 in order to go out of glow threshold
const redCube = new THREE.Mesh(redGeometry, redMaterial);
redCube.position.x = -2; // Position to the left
redCube.material.toneMapped = false;
scene.add(redCube);
console.log(redCube)

// Create green cube (NON-GLOWING)
const greenGeometry = new THREE.BoxGeometry();
const greenMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const greenCube = new THREE.Mesh(greenGeometry, greenMaterial);
greenCube.position.x = 2; // Position to the right
scene.add(greenCube);

// Create camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;

// Create renderer
const renderer = new WebGLRenderer({
powerPreference: "high-performance",
antialias: false,
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//Create Effects
const bloomEffect = new SelectiveBloomEffect(scene, camera, {
intensity: 5,
mipmapBlur: true,
luminanceThreshold: 0,
luminanceSmoothing: 0.2,
radius : 0.618,
resolutionScale: 4
});

bloomEffect.selection.add(redCube);

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloomEffect));

// Animation function
const animate = () => {
requestAnimationFrame(animate);

// Rotate cubes
redCube.rotation.x += 0.01;
redCube.rotation.y += 0.01;
greenCube.rotation.x += 0.01;
greenCube.rotation.y += 0.01;

composer.render(scene, camera);
};

// Handle window resize
window.addEventListener('resize', () => {
const newWidth = window.innerWidth;
const newHeight = window.innerHeight;

camera.aspect = newWidth / newHeight;
camera.updateProjectionMatrix();

renderer.setSize(newWidth, newHeight);
});

// Start animation
animate();
`

[vanruesc]

Hi, the manual (WIP) contains up-to-date examples that are a easier to follow. Also note that composer.setSize should be used instead of renderer.setSize.

[tabetVercetti]

Thanks @vanruesc for your helpful reply. I followed the manual demo and was able to implement smaa. I have a few questions though:

Firstly, i noticed that the demo in the manual does not mention anything related to "area" and "search". These were present in other demos i saw. From what i could understand, they were textures. How come this demo does not include them?

Also, I tried implementing SMAA with and without the debugging lines and noticed no significant difference. To be honest i didnt really understand what theyre doing but i am guessing its recommended that i also have them in my code?

Lastly, one of the reasons why i was struggling at the beginning was because i was also wrapping my head around the load function and the loadmanager from three js. Previous demos required these in order for smaa to work but the demo in the manual doesnt. Just curious how come the methodology has changed.

Thanks again for your support! Heres how its looking so far:
Codesandbox

[vanruesc]

The search/area textures are data textures that can be loaded automatically by the SMAAEffect itself. The code was changed a while ago so that the user doesn't have to worry about it anymore.

The debugging code is not needed for SMAA. You only need the effect.

The LoadingManager is just a tool that helps with managing multiple parallel downloads. It fires a callback when all downloads have finished which is useful for loading scene assets before starting the render loop. The following sandbox uses it as well to provide a place where assets could be loaded if needed: https://codesandbox.io/p/sandbox/postprocessing-25rts?file=%2Fsrc%2FAssets.js%3A8%2C1

[tabetVercetti]

Once again thank you for your reply! its helping me learn more about this topic.
I have also noticed that i can get anti aliasing through msaa simply by changing this line
const composer = new EffectComposer(renderer);
to this
const composer = new EffectComposer(renderer, { multisampling: Math.min(4, renderer.capabilities.maxSamples), frameBufferType: HalfFloatType });
but i understand that this has limitations for devices that dont support webgl 2. Is it recommended that i have both msaa and smaa implemented in my project, or since i already implemented smaa, then theres no point in using msaa?

[vanruesc]

MSAA and SMAA both smooth jagged lines but they work very differently. SMAA is image-based and fast but suffers from shimmering. MSAA renders additional fragments along geometrical edges for stable smoothing but suffers from artifacting when used with depth-based effects like SSAO.

WebGL 1 is deprecated at this point so it's fine to just use WebGL 2. I recommend using MSAA as the default and SMAA for weaker devices or when MSAA produces artifacts.