# Texture get blur

**URL:** <https://discourse.threejs.org/t/texture-get-blur/55304>\
**Category:** Questions\
**Tags:** textures\
**Created:** [August 24, 2023, 8:42am UTC](https://discourse.threejs.org/t/texture-get-blur/55304 "2023-08-24T08:42:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tam\_La](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tam_la/32/38895_2.png) [@Tam\_La](https://discourse.threejs.org/u/Tam_La)\
**Post date:** [August 24, 2023, 8:42am UTC](https://discourse.threejs.org/t/texture-get-blur/55304/1 "2023-08-24T08:42:59Z")

</div>

I have an image using for texture like this

 ![design](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/1/b1a81ee079d507a00513869e27e6e3835e52d395.png)  
Here is my code:

```javascript
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(65, 300 / 300, 0.1, 1000);
    camera.position.z = 450;
    const renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true,
    });
    renderer.setSize(490, 490);
    renderer.setClearColor("#eee");

    // light
    scene.add(new THREE.AmbientLight(0xbbbbbb));
    const spotLight = new THREE.SpotLight(0xeeeeee, 1);
    spotLight.position.set(+200, 200, 20);
    scene.add(spotLight);
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(-300, 200, 50);
    scene.add(light);

    const designTextureLoader = new THREE.TextureLoader();
    designTextureLoader.load(
     /texture dara url/,
      function (texture) {
        texture.colorSpace = THREE.SRGBColorSpace;
        texture.format = THREE.RGBAFormat;
        var material = new THREE.MeshStandardMaterial({
          map: texture,
          transparent: true,
        });
        const geometry = new THREE.CylinderGeometry(180, 180, 420, 50, 1, true);
        const positions = geometry.attributes.position;
        for (let i = 0; i < positions.count; i++) {
          const x = positions.getX(i);
          const y = positions.getY(i);
          const z = positions.getZ(i);
          positions.setY(i, y + Math.abs(z * z) * (1 / 2500));
          positions.setX(i, -Math.abs(z * z) * (1 / 1000));
        }
        positions.needsUpdate = true;

        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        mesh.position.y = -40;
        mesh.position.z = 40;
        mesh.scale.x = 0.7;
        mesh.scale.y = 0.7;
        mesh.rotation.y = -(Math.PI / 180) * 90;
        mesh.scale.z = 0.7;
      },
      undefined,
      function (error) {
        console.error("An error occurred while loading the texture:", error);
      }
    );

    const controls = new OrbitControls(camera, renderer.domElement);
    // Render the scene
    const render = () => {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
    render();

```

And this is the result

 ![result](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/2/1225d26aa90a3edd9335437f98f9421bd6623a33.png)

You can see that the texture getting blur. I don’t know why and how to fix it?  
Can anyone help me with this?  
Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 24, 2023, 8:53am UTC](https://discourse.threejs.org/t/texture-get-blur/55304/2 "2023-08-24T08:53:48Z")

</div>

Try it with anisotropic filtering. Configure your texture like so:

```js
texture.colorSpace = THREE.SRGBColorSpace;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

```

BTW: There is no need for the line `texture.format = THREE.RGBAFormat;`. Textures use the RGBA format by default in recent `three.js` versions.

---

<div class="post-metadata">

**Author:** ![Tam\_La](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tam_la/32/38895_2.png) [@Tam\_La](https://discourse.threejs.org/u/Tam_La)\
**Post date:** [August 24, 2023, 9:00am UTC](https://discourse.threejs.org/t/texture-get-blur/55304/3 "2023-08-24T09:00:04Z")

</div>

> [@Mugen87](#):
>
> `texture.anisotropy = renderer.capabilities.getMaxAnisotropy();`

It work perfectly, thank for helping.