Three.js: MeshPhysicalMaterial with roughness property not looking proper on IE and Android Phones

[atul-mourya]

I'm getting some weird shader issue on internet explorer, microsoft edge, and on some major android chrome including nexus 5.
I'm getting this warning : THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported.
Is that a bug, or something else?

(https://imgur.com/a/ulE7E)

I'm using physical material with cube environment map.

However, with this same model on threejs editor and physical material and environment map , that warning or misbehaviour is not there.

Thanks and in advance.

Three.js version

• [x] Dev
• [x] r88
• [ ] ...

Browser

• [ ] All of them
• [ ] Chrome
• [ ] Firefox
• [x] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [x] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

The WebGL extension EXT_shader_texture_lod is not supported by all devices, see https://webglstats.com/webgl/extension/EXT_shader_texture_lod. So it's not a bug in the library.

BTW: This extension is a standard feature in WebGL2. So over time, more and more devices will support direct texture LOD access.

[atul-mourya]

Thanks @Mugen87 for the insight.
However, Threejs Editor don't seems to have this problem with same model, material and texture on internet explorer and ms edge. Is there any fallback method or something applied to avoid this issue with the editor.

(preview on threejs editor)

I tried changing changing threejs build from r88 to r87, still the issue persist to be there.

[Mugen87]

How do you load the environment map in your app? Besides, can you provide a live demo with your code and model?

[mrdoob]

I bet he is using MeshStandardMaterial in his code and MeshPhongMaterial in the editor.

[atul-mourya]

@mrdoob actually not. I'm using Physical material in both the places. I wish I could sent my code base to you but, I'm bound with some NDA. I'm trying to recreate this issue in jsfiddle and will share it soon.

Just for a brief for now, I have importing the geometry with object loader along with a equirectanglar image as envMap. After its loaded, I'm immediately disposing the equirectangular map and adding a cube map in place of it.

With the same method if I'm using any material other then physical and standard, there's no issue. It only happens with the Physical and Standard Materials.

[atul-mourya]

Hi @Mugen87 and @mrdoob as I mentioned earlier, I have recreated this issue on the following link.
https://jsfiddle.net/atulmourya/gdzj7ju8/13/

( here's the preview on MS Edge )

( Here's the preview on Chrome - Android )

Hope you would find this useful.

[Mugen87]

Yes, i can see the warning and the visual artifacts in Edge. Maybe there is a problem in getLightProbeIndirectIrradiance() or getLightProbeIndirectRadiance() in lights_pars.glsl when TEXTURE_LOD_EXT is not defined?

[WestLangley]

I'm getting some weird shader issue
Threejs Editor don't seems to have this problem
It only happens with the Physical and Standard Materials.

What is "it"?

[atul-mourya]

@WestLangley I can't guess a proper name for "it". If you closely look at the very first image and compare it with the second image created in threejs editor, you may get some idea. The reflection of car body mesh is not interpolating properly between faces. As a result, the visual for the body is patchy ( similar to flatshading = true situation ). I can't figure out what went wrong. This issue is visible on MS Edge, Internet Explorer, and most of the android devices I tested. Please review jsfiddle url. I guess this could be a bug in Threejs.

[atul-mourya]

I just figured out that this issue of patchy visual is only there when roughness value is not "Zero". When I set the roughness value to zero, the visuals are correct on all the devices. Any thoughts?

[atul-mourya]

Any thoughts on this issue yet?

[WestLangley]

Sorry, I do not have access to those devices, so I am not able to reproduce the issue.

[mrdoob]

This may have something to do with the PMREMGenerator code. I've noticed that some of the levels it creates have "ghost" layers. See the level on the top-left here:

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

/cc @bhouston @spidersharma03

[mrdoob]

Disregard my previous comment, it's an unrelated issue.

I can replicated on Windows/Edge:

roughness: 0.0 https://jsfiddle.net/gdzj7ju8/15/
the cubemap is a bit confusing but the result is correct.

roughness: 0.5 https://jsfiddle.net/gdzj7ju8/16/
things get "patchy" indeed.

[atul-mourya]

@mrdoob You got it absolutely right this time.

[bhouston]

Is it related to this Edge bug with regards to PNGs?

I first brought this up here:
https://github.com/mrdoob/three.js/issues/6915#issuecomment-127336788

It has been discussed a few times since:
https://github.com/mrdoob/three.js/issues/10977

[bhouston]

@atul-mourya should be asking stack overflow, this is not a bug. It isn't using PMREM, it is just using the fallback CubeLOD method that is low quality.

[atul-mourya]

@bhouston I think this issue is different. No where I'm using PNGs. Also this issue is not just visible on EDGE or IE but also on so many android devices I tried. You can certainly test the JSfiddle you'll get the better insight.

[bhouston]

@atul-mourya You are just not using Three.JS correctly. Please refer to the examples. See my second comment.

[atul-mourya]

Thank you everyone for giving important insights for this problem. Using PMREM does solves the problem for some devices, but the performance turns out to be an overkill. Also, for some devices the though the patchy visuals are not visible anymore but color changes to some different shades of green ( no matter whatever color I implement ).
I'm sure that with the later revision there will be some better way to tackle these issues. I'm not sure if its required to close this issue. I would leave that to you guys to decide.

Thanks once again @Mugen87 @mrdoob @WestLangley @bhouston You guys are really awesome. Cheers!!

[pailhead]

I think i got these artifacts when using TextureCube with bias instead of TextureCubeLOD

[WestLangley]

I think i got these artifacts when using TextureCube with bias instead of TextureCubeLOD

That sounds like a reasonable conjecture...

@atul-mourya Closing. Feel free to open another issue later if you feel it is warranted.

[atul-mourya]

Ms Edge is now supporting EXT_shader_texture_lod. Tested it on Ms Edge version 42+
The visible artifacts are no longer an issue.

Internet Explorer is still lacking behind.

[bhouston]

This extension is just not well supported: https://webglstats.com/webgl/extension/EXT_shader_texture_lod It is only at 55% adoption.

[atul-mourya]

True. Most of the Android device I tested still lacks this extension. And since android devices shares a big market in browsing, no wonder that percentage is so less.