materialDispersion
Provides the material's dispersion strength, a float value that controls the rainbow-colored separation effect when light passes through a transparent medium.
Core Advantages
Abstracts the complex physics of dispersion into a standardized material property and seamlessly integrates with `material.dispersion`, greatly simplifying the workflow for creating advanced optical materials like diamonds and crystals.
Common Uses
Simulating the 'fire' effect in diamonds or crystals.
Adding subtle realism to the refraction of thick glass or prisms.
Creating sci-fi or artistic effects with psychedelic colors.
As a driving factor for other effects like shimmering.
How to adjust
Modify the `material.dispersion` property (a number) in JavaScript. A value of 0 has no effect. As the value increases, the edges of transparent, refractive objects will exhibit an increasingly pronounced rainbow-colored separation (chromatic aberration).
Code Examples
1// Conceptually, dispersion is achieved by applying slightly different IORs per color channel
2const iorR = ior.sub( materialDispersion.mul( 0.05 ) );
3const iorB = ior.add( materialDispersion.mul( 0.05 ) );
4
5const finalColor = vec3(
6 refract( incident, normal, iorR ),
7 refract( incident, normal, ior ),
8 refract( incident, normal, iorB )
9);