How glTF Simulates Chromatic Fringing in Optics
Simulating chromatic fringing in glTF requires splitting transmitted
light into its constituent wavelengths as it passes through a
transparent medium. By combining physical extensions such as
KHR_materials_transmission, KHR_materials_ior,
KHR_materials_volume, and specifically
KHR_materials_dispersion, glTF allows real-time and
ray-traced engines to accurately reproduce wavelength-dependent
refraction. This produces the distinct optical aberration seen in camera
lenses and the vibrant "fire" found inside faceted gemstones.
The Role of
KHR_materials_dispersion
The primary mechanism for chromatic fringing in the glTF ecosystem is
the KHR_materials_dispersion extension. In real-world
physics, a material's index of refraction (IOR) varies depending on the
wavelength of the light traveling through it—a phenomenon known as
material dispersion. Shorter wavelengths (blue light) bend more sharply
than longer wavelengths (red light).
The KHR_materials_dispersion extension quantifies this
behavior by adding a dispersion property to the PBR
material model. This property defines the difference in the index of
refraction between the red and blue spectrums (specifically measured
between standard Fraunhofer lines, or simplified via an Abbe number
formulation).
The Underlying Material Stack
Dispersion cannot function in isolation within glTF; it relies on a stack of interconnected PBR extensions:
KHR_materials_transmission: Defines the percentage of light that passes through the surface rather than reflecting or diffusing.KHR_materials_ior: Sets the base index of refraction (such as 1.5 for basic glass or 2.42 for diamond), determining the default angle at which light bends according to Snell's Law.KHR_materials_volume: Gives the mesh a physical thickness, establishing an interior medium where light travels, attenuates, and separates into spectral bands.KHR_materials_dispersion: Modifies the base IOR dynamically per color channel, splitting incoming light rays into discrete paths based on wavelength.
How Renderers Compute the Effect
When an engine renders a glTF model configured with dispersion, it translates the glTF dispersion value into channel-specific refractions:
- Ray Tracing and Path Tracing: High-end engines
trace individual light paths through the mesh. The ray is split into
multiple spectral samples (or split across the primary red, green, and
blue color channels). Each channel calculates its own refraction vector
using an adjusted IOR:
- \(IOR_{red} = IOR_{base} - \Delta\)
- \(IOR_{green} = IOR_{base}\)
- \(IOR_{blue} = IOR_{base} + \Delta\) In gemstones, internal reflections repeatedly bounce these separated rays, causing wide, bright flashes of spectral color to exit through different facets.
- Real-Time Rasterization: For performance-constrained real-time renderers (such as WebGL or WebGPU applications), full spectral tracing is often approximated using screen-space refraction (SSR). The renderer samples the background scene texture three separate times—once for red, once for green, and once for blue—each offset by a distance proportional to the dispersion strength and surface curvature.
Optical Results in Gemstones and Lenses
In optical lenses, this process simulates chromatic aberration, resulting in subtle purple, red, or cyan fringing around high-contrast edges and out-of-focus highlights. In gemstones, the combination of a high base IOR, dispersion, and complex geometric geometry causes total internal reflection to fan out white light into distinct rainbow highlights, recreating the characteristic sparkle and fire of diamond cuts.