24 Sep 2022

Fix material reflections in Forge Viewer


Have you ever noticed that texture materials change color to white as you move the camera ?  That's because of Fresnel reflection.  Here's an extension that helps work around that problem. 

Live Demo



With PBR materials, material can reflect the sky and horizon background at sheering angles, called Fresnel reflection.  Rasterizers like Forge Viewer, and three.js are generally not very accurate, compared to ray-tracing.

This lack of accuracy can get distracting at certain camera angles.  One camera angle, at ground level, highlights the problem.  If you are viewing a Navisworks file of an infrastructure project, in walking mode, you will notice roads and the sides of buildings, all appear white, instead of colored.

Thankfully, there's a workaround in Forge Viewer v7.59 (and above), that turns off the fresnel reflection effect, by setting the material reflectivity to zero, like this:

materialObject.reflectivity = 0;

I've created a simple extension that demonstrates this.

The 'no lit material' extension:

  • - Adds a toggle option in 'settings' under 'appearance'
  • - clicking this will set all the materials in the scene to have zero reflectivity
  • - clicking it a second time, will restore the reflectivity, using browser's local storage

Adding a checkbox item to the settings panel:

	"Fresnel Reflection",
	"Turn off all fresnel reflection effects",
	e => {this.toggleCheckbox(e)}

The extension iterates through all of the three.js materials in the scene, and sets their reflection value, like this:

const listOfMaterials = this.viewer.impl.matman()._materials;
Object.keys( listOfMaterials ).map( materialName => { 
	listOfMaterials[materialName].reflectivity = 0;


Finally, here's a video of the extension demonstrating the reflection toggling on and off:



Turning off reflection will also work with three.js objects, like a Textured Square/Quad, and fix the same lighting problem you might notice.


You can find the source code here:   https://github.com/wallabyway/nolitmaterial-ext

Live Demo here: wallabyway.github.io/nolitmaterial-ext/


Follow me on twitter for more tricks and tips:  @micbeale

Related Article