Correct roughness coefficient. Three js by default too shiny

Hello there,

I was wondering if there is an way to tweak the roughness factor in the renderer like it is mentioned here: https://github.com/mrdoob/three.js/issues/13107

I think the library has changed a lot since then, so I couldn’t find the specific file to change.

Screenshot%20from%202018-08-28%2010-59-35

But in this image you can see, that there are clearly differences between three js and other applications (here substance painter - exported as gltf directly to three.js)

Thank you in advance for your help and time!

No, you can only change the roughness property for materials of type MeshStandardMaterial and MeshPhysicalMaterial. The other more complicated approach would be a change of the related shader code.

If you think that the materials of three.js are too reflective compared to other engines, I suggest you post a comment to the mentioned issue at github.

1 Like

How are you exporting your environment map from Substance Painter to Three.js? It looks like the environment on the left has a radiance filter, which gives it that blurry “frosted” look, giving the impression that it’s rougher. Maybe SP performs this filter automatically? The one on the right looks sharper, like it hasn’t been filtered, which makes it feel more reflective.

Additionally, the color range on the right also has a lot less contrast, affecting the way it looks. Maybe the left envMap is an HDRI image, and the right one has been converted to an 8-bit JPEG?

radiance

The two spheres above both have the same roughness factor, but the way the env. map has been filtered has a big effect on their apparent roughness.

Hi,
I use this workflow from the examples folder that automatically creates a cubemap from a panorama .exr.

https://threejs.org/examples/webgl_materials_envmaps_exr.html

where exactly do I have to assign the filter? At the export, before or after the cubemap generation, or at the material itself?

edit:
I implemented the exr workflow just yesterday, so here i an updated image. Looks way better now, but the roughness factor seems to be not the same as in painter. I also added a light to the scene (I think in substance is a light as well). Screenshot%20from%202018-08-28%2016-57-00

It does look a lot better now! In my humble opinion, your ThreeJS version looks like it has a better “roughness” range because you can see a fully reflective version on the top left corner, which is exactly what a roughness of 0 should look like. The top left sphere in the Substance Painter screenshot still looks a bit diffuse, not fully reflective.

I’ve never used Substance Painter before, but maybe you can dig somewhere in here to find out how to turn off any blurs or filters to the environment map? https://support.allegorithmic.com/documentation/display/SPDOC/Environment+Settings

1 Like

I think the top left sphere is not completely reflective in my setting. I think it is not a problem from the filtering of substance. If I create a complete shiny sphere in substance, you can see that the environment is not blurry filtered.
I also have to admit another mistake in my scene. Substance didn’t has a light in the scene. The reason my lighting looks so dark was a wrong exported environment map (it was too flat) so here an updated version without a light:
Screenshot%20from%202018-08-30%2008-18-30