materialRefractionRatio
Provides access to the current material's `refractionRatio` property, a core physical parameter for achieving realistic refraction effects like glass and water.
Core Advantages
Completely automates underlying Uniform management and seamlessly integrates with the standard material's `.refractionRatio` property, allowing developers to easily control refraction effects in a physically intuitive way.
Common Uses
As the core input to the `refract()` function for calculating refracted light direction in glass or liquids.
As a base value for creating offsets for different color channels when simulating chromatic aberration.
As an intensity controller for simulating heat haze or air distortion effects.
As an artistic parameter to control the strength of 'fisheye' or 'magnifying glass' effects in NPR.
How to adjust
In JavaScript, first set `material.transmission > 0` to activate the effect. Then, adjust by modifying the `material.refractionRatio` property (a number). A value of 1.0 results in no distortion; 1.33 produces a water-like effect; 1.52 creates a glass-like effect; and higher values produce dramatic, diamond-like distortion.
Code Examples
1// Use materialRefractionRatio to calculate the refraction vector
2const refractedDirection = refract( incidentVector, normalVector, materialRefractionRatio );
3
4// Sample the background with the refracted vector to get the distorted color
5const refractedColor = texture( background, refractedDirection );