Feature Request: Anisotropic Mip Map handling

[hybridherbst]

Description

I think this topic has appeared briefly a few times (e.g. #724) but I think quality is still not "good enough" for some use cases (e.g. we have issues with text).
Modelviewer either has a very aggressive mip map bias (resulting in blurry textures) and/or no option to specify anisotropic handling of mipmaps (resulting in blurry textures).

Left: Rendering in Unity with Bilinear filtering and anisotropy 1, Right: rendering in model-viewer with what looks like anisotropy 0

Bilinear texture in model-viewer: clearly shows mipmap borders

Difference between Aniso 0 and 1

Long story short, the quality difference is very noticeable and performance impact should be neglectible on today's mobile/desktop hardware; would be great to get an option for anisotropic textures or just have it turned on by default.

Live Demo

https://glitch.com/edit/#!/shell-talented-seagull

[elalish]

Regarding your middle video, that looks like a common glTF exporter problem, where it specifies a non-default texture minification mode. We have to respect it to be spec compliant, but if you remove that line, we'll go back to using LINEAR_MIPMAP_LINEAR which should fix the sharp transitions.

I'm not very familiar with texture aniso, but I believe three.js supports it. Do you have a sense of what a good default is and what the tradeoffs are?

[elalish]

As we use the defaults here, I believe we already have anisotropy = 1: https://threejs.org/docs/index.html#api/en/textures/Texture.anisotropy

[hybridherbst]

Currently I'm pretty sure you're using anisotropy = 0 (which just means "do not blend mipmap levels").

For my understanding, in "unity terms" to "gltf terms" we have this
(and that's what the GLTF exporter does, I double-checked):
Point filtering = NEAREST
Bilinear filtering = LINEAR_MIPMAP_NEAREST
Trilinear filtering = LINEAR_MIPMAP_LINEAR

In Unity, for both bilinear and trilinear there's aniso 0 (which means, don't do it) and levels up to 15. Usually there's a HUGE difference between 0 and 1 (which can be seen in the bottom GIF) and then hard to notice differences from 1 to 15, unless you have very large floor planes or so.

If I set Unity to "bilinear" and "aniso 0" it looks exactly identical to the model-viewer result. If I set Unity to "trilinear" and "aniso 0" it still looks identical to model-viewer but already better (since the mips are faded). However, that "aniso" slider in Unity has a much bigger quality impact than just toggling from bilinear to trilinear, and I'd think that correlates to three.js aniso setting, but I'm not sure.

So, currently with neither bilinear nor trilinear I can achieve the filtering quality that I see inside other renderers, so that's what this feature request is about :)

[elalish]

Did you check your glTF sampler? I'm willing to bet (since I've seen this so often) that you have sampler.minFilter = 9985, when it should be either not present, or equal to our default: 9987. Please verify this before we get further into aniso.

[hybridherbst]

Yes I did verify, that's those three different files I uploaded in the sample –
Point Filtering = Nearest = 9728
Bilinear Filtering = LinearMipmapNearest = 9985
Trilinear Filtering = LINEAR_MIPMAP_LINEAR = 9987

Also, one point of this Issue is that even with bilinear filtering, the quality is GREATLY improved with anisotropy on (in other softwares), there's usually no need to use trilinear filtering.

• 9985 should look much better with anisotropy on
• 9987 already looks better but will also look much better at steep angles with anisotropy on

[elalish]

Hmm, I'm not 100% sure, but I believe anisotropy is applied on top of trilinear filtering, not instead of. I'm guessing Unity may just override bilinear if anisotropic is requested. So, I still think you should always stick with 9987. Three.js is defaulting to anisotropy = 1, but as I read I think that means "off". You were referring to a difference between aniso 0 and 1, but I'm not actually sure what that means. I may just need to push aniso up to 2 or 4.

[hybridherbst]

Yep, anisotropy is applied on top of bilinear/trilinear filtering, and makes a huge difference there. And the results are certainly different between bilinear with aniso and trilinear with aniso. My guess is that Unity just starts the reading at "0", with "1" already meaning "on" (1 additional sample), and three starts with "1" meaning off (1 sample in total).

If that's the case then bumping to 2 should result in something looking similar to Unity (and better than default). Mind pointing me to the right place where I can try that out? I can report back here.

[elalish]

I think you'll want to add texture.anisotropy = 2 here. I've only seen anisotropy as being 2x, 4x, 8x, 16x, so maybe Unity has mapped it differently. While you're at it, would you mind checking if #1506 solved your other problem?

[hybridherbst]

I played around with the anisotropy setting but it almost certainly didn't change anything, neither for bilinear nor trilinear texture filtering. Even at 16 (what renderer.capabilties.getMaxAnisotropy() reports) there's no noticeable change, so I think there might be something else going on as well.

This is the kind of improvement I'm looking for: https://threejs.org/examples/webgl_materials_texture_anisotropy.html

I also looked in the three.js docs and can confirm that for Three, "aniso:1" means "off".

[elalish]

Thanks for looking into it; can you link a good GLB test model with trilinear filtering? That will help me investigate.

[hybridherbst]

Yes sure, here you go: https://cdn.glitch.com/8a6c572e-cd16-4e8d-be6a-d71bd5445cd5%2FAnisotropy_trilinear.glb?v=1599160095045
It's the trilinear model from https://glitch.com/edit/#!/shell-talented-seagull

Note that another common game engine approach to improve texture clarity is negative mipmap bias, but the only discussion I found around is from 2016 and still open (mrdoob/three.js#10482).

[hybridherbst]

@elalish in case you want to chime in:

• Ability to control texture.anisotropy from GLTFLoader mrdoob/three.js#25010
• Added Texture.DEFAULT_ANISOTROPY mrdoob/three.js#25015

In my tests the quality difference is very noticeable! Makes a huge difference and increases clarity of textures a lot. For model-viewer I would argue that a default of 2 or 4 would be good.

[elalish]

Awesome, thank you @hybridherbst! If you'd like to do the upgrade to r147 and add this, you're more than welcome to.

[elalish]

See #4005.