CODEWITHSUNDEEP
three.js3dwebglgltf
Mentalist
Mentalist

Reputation: 1689

How to implement KHR_materials_dispersion?

I see this GitHub page. Sadly, Khronos Group has provided no documentation on how to actually use it, as far as I can tell.

The Three.js Editor has a slider for Dispersion listed for type MeshPhysicalMaterial.

material type drop-down selector in the threejs.org editor
Dispersion slider in the threejs.org editor

I don't know if the slider is supposed to be making use of KHR_materials_dispersion, or if it's some other implementation. Either way, moving the slider appears to do nothing.

How are people getting this nice dispersion effect, like in the demo?

screenshot of a part of the glTF + KHR_materials_dispersion demo, showcasing the successful implementation of dispersion in a material

Upvotes: 2

Views: 43

Answers (1)

Mentalist
Mentalist

Reputation: 1689

It turns out it's really easy. The functionality is already built into the editor.

All that is needed is some Thickness value (along with Dispersion).

animated GIF showing the effect of changing both Dispersion and Thickness values in the threejs.org editor

Dispersion allows a range of 0.00 ~ 10.00

Thickness allows negative and positive values, with the useful range varying, depending on what the Dispersion value is. (Generally you probably won't need values lower than -1.00 or higher than 1.00, but you're free to take this slider to extremes if you want an unrealistic/stylized effect.)

Adding an environment map to help light the scene is not necessary, but it generally improves results. The scene in the GIF above was lit with both lights and an environment texture.

Upvotes: 2

Related Questions