How to improve glb texture quality?

Questions
,
1

I have a glb loaded in three.js but the quality of the jpeg texture is poor/blurry (much poorer than it should be). How can I fix this? Thanks in advance.
EDIT: I’ve added a gamma output of 2.2 as instructed but i’ve noticed that decreases the quality of the image with non-glb/gltf formats (I can’t confirm if gamma output decreases the quality of the glb/gltfs as well since I’m unable to see what it looked like without the 2.2 factor). Just adding this in case this might be the source of the issue…

2

In general, you should at least share some screenshots that show the actual and expected visual result. Additionally providing a live demo would make your report perfect :wink:

Adjusting the gamma settings of your app has nothing to do with the sharpness of your textures. There are severals ways to improve texture quality:

  • Increase the resolution of your textures.
  • Use lossless compression formats like PNG or use only a moderate compression rate in context of JPEG or texture compression formats like S3TC, ASTC, PVRTC or ETC1
  • Ensure you export your glb with proper texture filtering. You should at least use linear or better mipmap filtering. Also ensure your textures are POT (power of two) in order to avoid automatic resizing by three.js. Apart from that, you might want to increase the anisotropy property of your textures like so:
const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
texture.anisotropy = maxAnisotropy;

GLTFLoader does not set this property so you have to do this manually. One approach is presented here:

Check out the noticeable difference of anisotropic filtering right here:

https://threejs.org/examples/webgl_materials_texture_anisotropy.html

2 Likes
3

^In addition to @Mugen87’s comment’s, I’d suggest comparing in a couple viewers…

… to know whether the problem is part of the model itself, or something about the application code.

3 Likes
4

@Mugen87 @donmccurdy It looks good now; max anisotropy was the solution. Thanks for the help!

1 Like