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

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.