Three.js Demos
Three.js Demos

Chromatic Aberration

Simulate lens distortion effects where colors bleed at the edges of high-contrast objects.

What this code does

- RGBShiftShader: a post-processing pass that shifts the red, green, and blue channels independently.
- Chromatic Aberration: mimics a common camera lens imperfection where different wavelengths of light focus at different points.
- Amount & Angle: controls the magnitude and direction of the channel shift.
- High-Contrast Scene: the effect is most visible on white edges against dark backgrounds (like wireframes).
- Pulse Effect: the demo includes an optional animated shift for extra stylistic flair.

JavaScript Implementation

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

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

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

const rgbShiftPass = new ShaderPass(RGBShiftShader)
rgbShiftPass.uniforms.amount.value = 0.005
composer.addPass(rgbShiftPass)

const geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 32)
const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

scene.add(new THREE.AmbientLight(0x404040))
const light = new THREE.PointLight(0xffffff, 2)
light.position.set(5, 5, 5)
scene.add(light)

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