Textures are blurring when in the distance in 0.6.0

[pushmatrix]

Description

0.6.0 added improvements to fix issues like the Moiré issue: https://github.com/GoogleWebComponents/model-viewer/issues/632

It does a pretty good job:

However on the left hand photo above, you notice some banding happening.

Looking at it closer, it looks as though the texture is blurring the further away from the camera it is. Seems like anisotropic filtering issue.

Here's a gif of it happening (notice the detail in the stitching and zippers)

Live Demo

Compare both new and old viewers here: https://saber-soup.glitch.me/

Browser Affected

• [ x ] Chrome 76.0.3809.100
• [ x ] Safari (desktop and mobile) 12.1.1 (14607.2.6.1.1)

OS

• [x ] iOS (12.3)
• [x ] MacOS (10.14.5)

Versions

• model-viewer: v0.6.0
• three.js: r105

[elalish]

Thanks for filing this; I was already aware, but It's nice to have clear repro cases. I'm actively working on improvements for this. The basic problem is that as the normals get smoothed at deeper mip levels, we're not increasing the roughness to make up for it.

[pushmatrix]

Mip levels! That's the word I was looking for. Thanks for tackling this 😄

[pushmatrix]

@elalish I see you have a PR up. If it helps with testing, try the fabricball glb: https://cdn.glitch.com/da3e3c43-6b19-47cf-88d3-58c2cab4f291%2F64ad5c74-536a-487f-a10b-8f52b0e89317_fabricball.glb?v=1568827109696

You can see the mip artifacts really well with that one:

[pushmatrix]

This is not fixed: https://github.com/GoogleWebComponents/model-viewer/pull/750#issuecomment-539492253

[cdata]

Sorry about that @pushmatrix this shouldn't have been closed off yet.

[elalish]

@pushmatrix Okay, so this'll be a little tricky because there are a bunch of separate issues conflated in this bug. The fabric ball error is a side effect of the quick fix I did to get rid of the moire shown in 0.3 above. I'm working on solving that in a better way. However, the detail banding you're seeing on 0.6 I believe I just found the cause of. It's actually in your bag.glb! When I converted it to glTF it includes this:

"samplers": [
    {
      "magFilter": 9729,
      "minFilter": 9985,
      "wrapS": 10497,
      "wrapT": 10497
    }
  ],

That corresponds to a minFilter of LinearMipmapNearest, when to get rid of the banding we need LinearMipmapLinear (which is our default, so omitting it will also suffice). I'd love to understand what authoring tool put that in there and why!

[pushmatrix]

@elalish Very interesting....

Substance Painter is what we used to export it.

[pushmatrix]

Would you like me to email them and ask why they do that?

[elalish]

@pushmatrix Yes, definitely. If the person using that program didn't specify it explicitly, then I'm pretty sure it's a bug.

[elalish]

If you ever want to check a particular model, I use the SpectorJS Chrome plugin. It may look daunting, but if you click on MeshStandardMaterial, you can scroll down in the side pane to see all the textures associated with the object and their settings. That's where I first noticed LINEAR_MIPMAP_NEAREST.

[elalish]

@pushmatrix One other thing I noticed with that bag model: The shadow plane is much larger than it needs to be and ends up dominating the bounding box calculation, which results in the model being pretty zoomed out by default. You may want to pay some attention to that in your export pipeline as well.

[pushmatrix]

@elalish That's a good tip on Specter.

Re: Bag shadow, that's back when we were doing shadow planes. We aren't anymore. Some viewers we used in the past had support for not using the shadow plane as part of the bounding box calc, which was handy.

[pushmatrix]

@elalish Hmm seems to still be happening even without those mip settings:

https://pacific-repair.glitch.me/

[elalish]

Hmm, I think we need to be more specific about what "it" is. To me the issue I was referring to appears fixed, as compared to this:

[pushmatrix]

@elalish I guess this issue ended up being two separate things. What you pointed out above is indeed fix, but the original banding is still present:

Compared to Don's viewer:

[elalish]

Actually, I do see the same thing in Don's viewer, just from a larger distance: It looks like those lines are actually triangle edges, but i'm not sure what's making them visible. Might be good to take a close look in the editing tool and see if that turns anything up. Maybe something about the interpolation of vertex normals?

[pushmatrix]

Very interesting. Thanks for digging into that. We will take a look to see if anything fishy is on our end. Maybe substance is doing something strange again with the export

[pushmatrix]

@elalish I remember you saying that one of the drawbacks of this fix is that it introduced a loss of detail.

I can confirm that with one of our products, where it used to look like:

And now looks like this at the same distance:

Lost all the details in the leather.

[NEONFIVE]

normalmap details are blurred since v0.6, also in v0.7.1. Compared v0.5 with v0.7.1, i think it's just the normalmap - any albedo, ORM textures are looking fine and similar in both versions. please take a look to the image:

[elalish]

@NEONFIVE Yes, this is a known issue, as stated above. Really it was a hack to reduce aliasing. I'm currently working on a better fix so that the normal maps can go back to full resolution.

[elalish]

@pushmatrix Could you give me a more recent version of your bag model (or any others that demonstrate these problems)? I know you've done some work on it, and it would also be great if I could get a gltf with separate textures so I can inspect it more easily.

[pushmatrix]

Scrape the model from the src here: https://best-deltadromeus.glitch.me/

That one is very pronounced with the stitching.