Three.js Demos
Three.js Demos

FXAA/SMAA Antialiasing

Advanced antialiasing techniques (FXAA and SMAA) to reduce jagged edges in post-processing.

What this code does

- FXAA (Fast Approximate Anti-Aliasing): single-pass screen-space technique that blurs edges based on luminance gradients.
- SMAA (Subpixel Morphological Anti-Aliasing): multi-pass technique that provides sharper results than FXAA by analyzing edge shapes.
- EffectComposer: applies these techniques as post-processing passes after the main scene render.
- High-Frequency Detail: the demo uses thin wireframes and a dense grid to show aliasing more clearly.
- Performance: FXAA is extremely fast; SMAA offers higher quality but is more computationally intensive.

JavaScript Implementation

ES6+ 
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x111111)
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(2, 2, 5)

const renderer = new THREE.WebGLRenderer({ antialias: false })
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

// Effect Composer Setup
const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))

// SMAA Pass (Higher quality than FXAA)
const smaaPass = new SMAAPass(width * pixelRatio, height * pixelRatio)
composer.addPass(smaaPass)

// Scene content
scene.add(new THREE.GridHelper(10, 50, 0x444444, 0x222222))
const mesh = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.5, 0.15, 200, 32),
  new THREE.MeshStandardMaterial({ color: 0xff4400 })
)
scene.add(mesh)

scene.add(new THREE.AmbientLight(0xffffff, 0.5))
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(5, 5, 5)
scene.add(light)

function animate() {
  requestAnimationFrame(animate)
  mesh.rotation.y += 0.01
  composer.render()
}
animate()
← Back