THREE.js How to increase texture quality

Question

What are the possible and good ways/best practices/etc to improve texture quality in THREE.js?

I have a scene where I have planes(cards) with 512x512px textures. How it looks you can see on images below. My problem is that textures looks blurred. I have tried to change filters and value of anisotropy and it helps, but just a little and texture still blurred. The only one way that I found when texture looks like I want - increase render size x2 and keep canvas size the same. It is bad way because of performance issues, but I don't find another way to get good texture quality.

The best quality - render size x2

Normal quality - magFilter = minFilter = THREE.LinearMipMapLinearFilter /anisotropy = 16

Bad quality - no filters

I hope for any help, thanks in advance

Garmon

It seems like you're on a "retina" screen since smashing the rendersize in x2 made an improvement. Have you attempted higher values with setPixelRatio on the renderer? – Derogatory

My pixelRatio = 1. I have default 1920x1080 screen :/ – Garmon

Answer 1

You hardly can do better than trilinear filtering with 16x anisotropic (and not all hardwares can achieve 16x anisotropic filtering).

However, you say your textures are 512x512, while (if your snapshots are real-size) it appear clear that:

• they are rendered way smaller thant 512x512. It mean this is currently a lower mipmap level that is used to render your cardes, a mipmap generated by WebGL.

• Your cards are rectangular while your textures are square. Depending how you mapped texture on your shape, this could mean the aspect-ratio change, so the sampler need to do some more interpolation (so filtering, meaning more blur)

So what you can try to do, is to:

• use smaller base texture, 256x256 for example, which you done yourself with the best sharpness you can, so no min-filter is needed while WebGL sample the texture.

• Adapt the mesh texture coordinates to your texture or vice versa to avoid aspect-ratio changes during texture sampling.

Fong

I tried disable mipmap/used 256x256 texture and it doesn't helps. Also on my scene I tried to create a plane 256x256 and put 256x256 texture on it but texture looks blurred too :( – Garmon

I think there is nothing you can do. Also think this can be your hardware that cannot render "better" than that. When you disable filtering, you should have pixelated textures, is it the case ? – Fong

No, If filtering is disabled I have blurred texture, but if I set Nearest filter I have pixelated textures. By default THREE.js for texture minFilter = THREE.LinearMipMapLinearFilter, magFilter = THREE.LinearFilter. I could believe that hardware cannot render "better", but why I'am getting good quality if I created x2 render size? However now I think that there are no way to do it better too :( – Garmon

Nearest filter ~= filtering disabled... Except mipmap issue, I think you get better quality when you render in double size because the whole image has better resolution (and the textures are sampled at better resolution) and then is reduced dynamically by the browser, which produce an overall best result but, this is a kind of "illusion". – Fong

Also, i just think about it now... Are sure your canvas 'html' size always fits the canvas resolution ? Because there is a subtlety lying here: webglfundamentals.org/webgl/lessons/… – Fong

Yes, I know about this subtlety, my canvas size is 512x512 and I set it on canvas creation via JS) It could be a good reason, but unfortunately, not my case :( – Garmon

Well, so, I don't know. try several size of texture, change camera angle to verify how and when the texture is more or less "blurred"... That's all i can advice. – Fong