Fix material reflections in Forge Viewer

Overview

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

Details

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:

this.viewer.getSettingsPanel().addCheckbox(
	"appearance",
	"Fresnel Reflection",
	"Turn off all fresnel reflection effects",
	false,
	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:

video