Chromatic aberration

Red and cyan fringes that grow near the frame edges, faking the imperfect color alignment of a real camera lens.

red and blue edges like 3d glassescolors separating near the corners of the screenwhy do objects have a red shadow on one siderainbow outline around bright edgesthe glitchy vhs color smearmake it look like it was shot on a cheap lensrgb splitchromatic aberation

See it

Live demo coming soon

What it is

Chromatic aberration is the colored fringe a lens makes when different wavelengths do not land in exactly the same place. A WebGL post effect fakes the lateral version by sampling the red and blue channels at slightly different positions while leaving green centered. The offset grows toward the frame edges, leaving thin red and cyan outlines on high-contrast shapes, the same color pair anaglyph 3D glasses use. Photographers meet the real version as purple fringing along backlit branches near the corners of a shot.

Reach for it when a perfectly clean render needs to feel as though it came through a physical or damaged camera. Keep it to a pixel or two at the corners for a lens cue, or push it farther for the VHS glitch look. A radial falloff matters: shifting whole channels by the same amount across the frame, which is what the three.js RGBShiftShader addon does, is an RGB split rather than a convincing lens defect.

Gotcha: the effect attacks the exact edges viewers use to read detail. Large offsets make small geometry and text look out of focus, while samples pulled from beyond the frame can create colored borders. Clamp the sample coordinates, leave the center nearly untouched, and apply the pass to the 3D render before compositing the HUD or HTML interface.

Ask AI for it

Add restrained chromatic aberration to this three.js render as a custom ShaderPass inside EffectComposer. In the fragment shader, set vec2 delta = uv - vec2(0.5), take dir = length(delta) > 0.0001 ? normalize(delta) : vec2(0.0), and scale the offset by smoothstep(0.15, 0.75, length(delta)) so the strength is zero through the center and reaches 1.5 pixels at the corners. Sample red outward along dir, green at the original uv, and blue the same distance inward. Clamp every sample coordinate to the frame, pass the render resolution as a uniform so the offset stays pixel-sized, and composite the HUD after this pass so text remains aligned.

You might have meant

post processing render passshaderrender target framebuffer objectdepth of field bokehtone mapping

Go deeper