Getting visual glitch on gltf roughness & light (mobile only)

Questions
1

Hello again!

I’m trying to bring in a GLTF object with one of it’s faces assigned a roughness map. Everything works as expected in my browser:

rough1
rough1456×543 60.6 KB

But this is what I see on my android phone (chrome):

Screenshot_20200314-235145 (1)
Screenshot_20200314-235145 (1)1080×1734 120 KB

Does anyone know why i might be seeing this? It’s pretty basic principled material.

I don’t know what part of my project would be hepful for me to paste here code wise as it does work in browser so i’m not sure what it could be. But i’m active - so if you’d like me to post code i can do.

2

What Android phone are you using?

3

OnePlus 6t - until now everything has worked fine on all devices.

Also tested on OnePlus 6 - about to test on iPhone

Update: It works fine on safari & chrome on iPhone 7.

Both of those OnePlus devices use the Adreno 630 i believe.

However, I noticed that i can view www.cineshader.com on these devices.

4

I have realised it is just a general issue with roughness and not just using a custom map.

Screenshot_20200315-123050 (1)
Screenshot_20200315-123050 (1)713×929 35.2 KB

5

It’s a known issue that the PBR implementation is buggy on devices with insufficient precision in the shader. One issue from github is https://github.com/mrdoob/three.js/issues/9515.

However, it’s unlikely this will be fixed soon since the issue is quite complicated and hard to test. As a workaround, it’s best to use other materials on affected mobile devices like MeshPhongMaterial.

6

Ok thanks @Mugen87 I have succesfully turned my objects material into a MeshPhongMaterial.

My current workflow was simply: Blender (where I have been texturing and applying materials and maps -> GLTF export / import.

What I can’t work out now is:

Am i better off targeting a specific face of a specific mesh in my scene to change it to a meshphong material or to just simply bring in a second object and parent it… that way i can just use

 gltf.scene.traverse( function ( child ) {

    if ( child.isMesh ) { 

        child.material = new THREE.MeshPhongMaterial({
  color: 0xFF0000,
  flatShading: true,
});

for the ‘floor’ object.

My other confusion is how my roughness map outcome is possible with MeshPhongMaterial - would I use envMap and specularMap to control ‘where’ the shininess was happening?

7

I’m not sure I understand what you mean but traversing through the model and replacing the material as demonstrated in your code snippet should be the preferred approach.

Well, you can’t assign a roughness map directly to specular map since both properties (specular and roughness) represent two different things. That makes it of course harder to switch the materials since you need to author a specular map in a different way.

8

Ok, that’s fine - so I can get the same effect as using a roughness map in a standard material, by creating and linking a specular map to a phong material. I’ll have a look thanks.

9

But be aware that the materials will still not look equal because the lighting equations in the shader are different.

10

Would you say that the example i linked: cineshader.com uses a mesh phong to get it’s shiny/non shiny floor? As it works on my device?

11

AFAICS, the website uses a lot of custom shader code so it’s really hard to tell how the floor is implemented.

1 Like