TSL: Introduce Chromatic Aberration

[pashaydev]

Description

This pull request adds a new post-processing node for chromatic aberration effect in Three.js WebGPU/TSL.

Implementation Details

The ChromaticAberrationNode provides:

• Strength control: Adjustable intensity of the color separation effect (0-3 range)
• Center point: Customizable origin point for the radial distortion (defaults to screen center)
• Scale factor: Controls the stepped scaling of color channels from the center
• Per-channel processing:
  • Red channel is scaled outward
  • Green channel remains at original scale
  • Blue channel is scaled inward

Example Usage

import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';

// Apply chromatic aberration to render output

// With static values (using uniform nodes)
const caPassStatic = chromaticAberration( outputPass, 1.0, null, 1.1 );

// With procedural nodes
const animatedStrength = sin( time ).mul( 0.5 ).add( 1.0 );
const dynamicCenter = vec2( cos( time ).mul( 0.1 ).add( 0.5 ), 0.5 );
const caPassProcedural = chromaticAberration( outputPass, animatedStrength, dynamicCenter, 1.0 );

postProcessing.outputNode = caPass;

Demo

https://github.com/pashaydev/three.js/blob/ca_node/examples/webgpu_postprocessing_ca.html

PS:
I was looking into that effect build-in TLS but not found, if it will be helpful to someone like me i will be glad)

[WestLangley]

I was looking into that effect built-in TSL but not found

https://github.com/mrdoob/three.js/blob/dev/examples/jsm/tsl/display/RGBShiftNode.js

@Mugen87 Can you experiment and advise as to how to best merge this with RGBShiftNode, which may have a better API.

[Mugen87]

If the effects are redundant I would rather remove one of them and keep the better implementation. I'd like to focus on a few other things right now though. Sorry for overlooking RGBShiftNode. Maybe the OP would already be happy with RGBShiftNode so ChromaticAberrationNode wouldn't be necessary in the first place.