Low resolution texture is very blurry, how can I get around this issue?

ItzArty · September 15, 2021, 10:43am

Hey everyone, I am trying to render a minecraft skin, but for some reason, when I load my texture, which logically is low resolution, it is veeeeeeery blurry, is there any way to get around this?

Usnul · September 16, 2021, 12:13am

Could you provide some more detail? What’s the texture and how does it look like in the application?

felixmariotto · September 16, 2021, 6:39am

If you don’t want any interpolation with your texture sampling ( aka no blur ), you must set Texture.magFilter to THREE.NearestFilter.

From the Minecraft example :

github.com

mrdoob/three.js/blob/e62b253081438c030d6af1ee3c3346a89124f277/examples/webgl_geometry_minecraft.html#L145

    
      
          						}
          
          
					}
          
          
				}
          
          
				const geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
          				geometry.computeBoundingSphere();
          
          
				const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
          				texture.magFilter = THREE.NearestFilter;
          
          
				const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
          				scene.add( mesh );
          
          
				const ambientLight = new THREE.AmbientLight( 0xcccccc );
          				scene.add( ambientLight );
          
          
				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
          				directionalLight.position.set( 1, 1, 0.5 ).normalize();
          				scene.add( directionalLight );