Description of the problem
MeshStandardMaterial when adding an envmap with linear mipmap sampling (default values) appears to behave like if nearest sampling was set. Black parts are rigid.
sphereMaterial = new THREE.MeshStandardMaterial( { envMap: textureCube } ); sphereMaterial.metalness = 1; sphereMaterial.roughness = 0;
When using MeshBasicMaterial the black parts are smooth.
sphereMaterial = new THREE.MeshBasicMaterial( { envMap: textureCube } );
When viewing in Chrome and turning on the extension “WebGL Inspector” the problem strangely goes away.
Three.js version
- Dev
- r81
Browser
- Chrome
- Firefox
- Opera
OS
- Windows
- OS X
Sample code:
https://drive.google.com/file/d/0B_ATy2nyBnzcQ21kUGlyRGFoc3c/view?usp=sharing
WebGL Inspector disables most extensiosn to WebGL, not sure why. But the extension causing the difference is likely: https://www.khronos.org/registry/webgl/extensions/EXT_shader_texture_lod/
It is because we set the LOD of the cube texture explicitly in standard material in order to simulate roughness. 0 is maximum sharpness. When this extension isn’t present I believe we do not override the LOD of the cube texture, thus it gets the default level.
By overriding the LOD of the cube texture we override the mipmap selection of LOD level. This is the trade off we have to take if we want to use basic cube textures for representing roughness.
The solution we take with Clara.io is to use the PMREM generator as demonstrated in this example: https://threejs.org/examples/#webgl_materials_envmaps_hdr