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();
`