dispersion
Creates a float property named `dispersion` on a TSL material, exposing an easy-to-control parameter, often used to control the intensity of effects like chromatic dispersion.
Core Advantages
Provides an extremely clean and intuitive `material.dispersion = value` API, completely abstracting the underlying Uniform mechanism and giving custom materials the same excellent developer experience and readability as built-in Three.js materials.
Common Uses
Controlling the intensity of chromatic dispersion in materials like glass or diamond.
Adjusting the strength of a chromatic aberration filter in post-processing.
Serving as a generic intensity or mix factor for any custom effect (e.g., dissolve, wetness).
As an animatable parameter that can be directly driven by animation libraries like GSAP.
How to adjust
Directly modify the `material.dispersion` number value in JavaScript. A value of 0 has no effect; a small value (e.g., 0.1) produces subtle, realistic color fringing; a large value (e.g., 0.8) creates an exaggerated, stylized spectral separation.
Code Examples
1// Sample R, G, B channels at different offsets based on the dispersion value
2const r = texture( sourceTexture, uv.sub( dispersion * 0.01 ) ).r;
3const g = texture( sourceTexture, uv ).g;
4const b = texture( sourceTexture, uv.add( dispersion * 0.01 ) ).b;
5
6// Recombine the channels for the final dispersed color
7const finalColor = vec3( r, g, b );