Low quality texture glb but gets sharper when zooming out

Questions
1

Hi, when my glb model is loaded, the textures appear somewhat blurry. When I zoom out from 75% to 67% in my browser, the texture gets significantly sharper. What could be the problem here?

var sceneContainer = document.getElementById('canvas');    
//canvas dimensions width : 500px; height : 950px;
camera = new THREE.PerspectiveCamera(40,
sceneContainer.offsetWidth / sceneContainer.offsetHeight);

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( sceneContainer.offsetWidth, sceneContainer.offsetHeight );
sceneContainer.appendChild( renderer.domElement );

window.addEventListener( 'resize', onWindowResize, false );
  function onWindowResize() {
    renderer.setSize( sceneContainer.offsetWidth, sceneContainer.offsetHeight );
    camera.aspect = ( sceneContainer.offsetWidth / sceneContainer.offsetHeight );
    camera.updateProjectionMatrix();
}
  // I have applied the following to the glb's material
 //object.material.map.anisotropy = maxAnisotropy;
 //object.material.map.minFilter = THREE.LinearFilter;

The texture quality is 2048x2048 power of 2. Thanks in advance!

2

If you change minFilter to THREE.LinearFilter, you have a worse texture filtering quality than the default setting THREE.LinearMipMapLinearFilter which uses mipmapping.

3

Thanks for replying. If I use the default, the texture quality looks just as bad as it did when I zoomed out.

4

A live example that demonstrate the issue would be helpful now.

5

Hi,

How was this issue resolved?

I have the same issue where the .glb is loaded and rendered in my scene but the 3D model(.glb) is pixelated. When I zoom in or out it instantly appears sharp and clear and never returns to the pixelated state, until I restart the application.

6

As mentioned above a live example would be helpful to debug the issue.

7

How would we go about setting up a such a live example?

8

E.g. modify the following live example to demonstrate the issue: Edit fiddle - JSFiddle - Code Playground

9

Thank you for the feedback. Its seems what was missing on my side is that I did not set the size of the renderer. After adding this: “renderer.setSize( window.innerWidth, window.innerHeight )” the 3D model is no longer pixelated.