September 24, 2022

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

Summary

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

Posted by

Michael Beale

Autodesk

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next...

Related Posts