CODEWITHSUNDEEP
three.jswebglshaderblurtexture-mapping
user1866818
user1866818

Reputation:

Textures blur far from camera Three.js

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

Upvotes: 3

Views: 3573

Answers (4)

xu chenn
xu chenn

Reputation: 1

you can set this Texture.anisotropy is a number, detail you'can see https://threejs.org/docs/#api/zh/textures/Texture.anisotropy, I'm from chinese, hope help u ^_^

Upvotes: 0

David Lucid
David Lucid

Reputation: 56

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.

Upvotes: 3

vals
vals

Reputation: 64174

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

Upvotes: 1

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 2

Related Questions