Three.js Demos
Three.js Demos

Retro Pass Pipeline (r183-inspired)

CRT-style post-processing chain built with `EffectComposer`, combining scanlines, barrel curvature, chromatic separation, grain, and vignette.

Key topics: three.js retro pass, crt shader, scanlines, chromatic aberration, effect composer, r183

What this code does

- PostFX Pipeline: `EffectComposer` routes the scene through a dedicated retro shader pass after the base render.
- CRT Curvature: barrel distortion bends screen edges to mimic old curved displays.
- Scanline + Grain Layer: animated scanline modulation and film grain add analog texture.
- Chroma Separation: subtle RGB channel offsets emulate lens/convergence artifacts.
- Vignette Framing: darkened corners focus the eye toward the center like vintage monitors.
- Interactive Controls: each effect component is adjustable to tune subtle or heavily stylized retro looks.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
const retroPass = new ShaderPass(RetroShader)
composer.addPass(retroPass)

function animate () {
  requestAnimationFrame(animate)
  retroPass.uniforms.time.value += 0.016
  composer.render()
}
animate()
← Back