Textures blur far from camera Three.js

Question

I have a threejs scene, with my camera like this:

var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH  / SCREEN_HEIGHT , NEAR = 0.1, FAR = 8000;

camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);

and i create the material like this:

var floorTexture = new THREE.ImageUtils.loadTexture( 'Images/floor62.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
floorTexture.repeat.set( 3, 105 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
                    var floorGeometry = new THREE.PlaneGeometry(250, 10500 );

and then I create the road you see in the pic. it goes far in z-axis and it is made of rectangles dressed with good-quality textures.

The problem is it blurs very close to the camera (as you can see in the pic). This is not normal and it gives a taste of cheap unreal graphics in the scene.

How can I fix this?

thanks in advance!

enter image description here

You probably don't need `side: THREE.DoubleSide`. I assume you don't go under the road. — gaitat, Sep 23 '14 at 13:07

David Lucid · Answer 1 · 2019-04-18T00:34:12.193

When it comes to issues with anisotropic filtering, have two options: modify the algorithm entirely or (most likely) turn up the sampling rate.

Modify Texture.minFilter to change how a texture is sampled when a texel covers less than one pixel. Modify Texture.magFilter to do the opposite: change how the texture is sampled when a texel covers more than one pixel.

To turn up the sampling rate, modify Texture.anisotropy.

In both cases, if you are modifying the texture after you initially load your scene, remember to set Texture.needsUpdate = true; afterwards.

score 2 · Answer 2 · answered Sep 23 '14 at 13:06

2

Use floorTexture.generateMipmaps = false;. The default setting is true in which case the renderer uses lower resolution textures for polygons far from the camera. Mipmaps are generally a good thing. Less memory on the graphics card.

answered Sep 23 '14 at 13:06

gaitat

12,449
4
52
76

I used this line and it made my mesh dissapear! I don't know why. – Sep 23 '14 at 14:42
2

can you create a jsfiddle? – gaitat Sep 23 '14 at 15:53

score 1 · Answer 3 · answered Sep 23 '14 at 13:25

Probably you are in a situation where the resolution of the texture is lower than needed.

In this case, you have 2 posibilities. From the three.js doc:

.magFilter

How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.

So, you can try to set magFilter to Nearest, where the `pixelation of the texture is kept

the textures are good quality. I tried to do what you said with magFilter nothing got better. — , Sep 23 '14 at 14:48

Textures blur far from camera Three.js

3 Answers3