# Texture is blurry and sampling does not fix

**URL:** <https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685>\
**Category:** Questions\
**Created:** [February 19, 2020, 4:09pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685 "2020-02-19T16:09:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Exper](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/exper/32/5213_2.png) [@Exper](https://forum.babylonjs.com/u/Exper)\
**Post date:** [February 19, 2020, 4:09pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/1 "2020-02-19T16:09:51Z")

</div>

At the moment I am using an image as a texture on the ground however it is extremely blurry, the texture I am using is from a game online that uses the exact same one and also fits the ground size the exact same however mine is blurry there’s is not. They use three.js whilst i use babylon but even though they’re 2 separate libraries shouldn’t there be some functionality for texturing that does the same thing? My problem is this

 ![](https://cdn.discordapp.com/attachments/523980643315613707/679719735981768803/unknown.png)

Mine is the one on the right, the maps are the exact same size however my texture is being rendered bigger meaning the quality should be a little better however they’re rendering it even bigger. I’ve tried all the sampling options but they do not work.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 19, 2020, 4:26pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/2 "2020-02-19T16:26:34Z")

</div>

As your area is bigger, the texture is more stretched: to get the same rendering, you should set the same area sizes.

Also, it seems your u/v scale is off compared to theirs. Looking at the farthest wall, your texture seems “compressed” because of too high u/v scales, or maybe wrong u/v texture coordinates.

Providing a PG would help to diagnose the problem, however.

---

<div class="post-metadata">

**Author:** ![Exper](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/exper/32/5213_2.png) [@Exper](https://forum.babylonjs.com/u/Exper)\
**Post date:** [February 19, 2020, 4:29pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/3 "2020-02-19T16:29:07Z")

</div>

Yes the u/v scales are off however im not too sure on how to match it so it works properly for every size of an object. Also what does PG mean exactly? Also how would i “set the same area sizes” if that’s some functionality in babylon then sure but if u mean the actual mesh size then they are the same as the other game

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 19, 2020, 4:47pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/4 "2020-02-19T16:47:57Z")

</div>

> [@Exper](#):
>
> Also what does PG mean exactly?

PG is Playground: try to recreate your problem in [https://playground.babylonjs.com/](https://playground.babylonjs.com/), that way it’s easier for people to help you.

> [@Exper](#):
>
> but if u mean the actual mesh size then they are the same as the other game

Yes, that’s what I meant. Then it’s an u/v scale problem I think, you should lower one or both of them.

---

<div class="post-metadata">

**Author:** ![Exper](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/exper/32/5213_2.png) [@Exper](https://forum.babylonjs.com/u/Exper)\
**Post date:** [February 19, 2020, 5:21pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/5 "2020-02-19T17:21:12Z")

</div>

I can’t make it a playground but i will upload it to github so that it’s easier for me. [Test/bunnyhop-webgl-master.rar at master · TheJustExper/Test · GitHub](https://github.com/TheJustExper/Test/blob/master/bunnyhop-webgl-master.rar)  
You will have to run it with a http-server as the files are imported as modules

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [February 19, 2020, 5:59pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/6 "2020-02-19T17:59:04Z")

</div>

You have to help us help you 🙂 Asking the community to install a complete project will probably not end up with a lot of people helping you ☹

Here is a doc about having external assets in the PG: [Using External Assets - Babylon.js Documentation](https://doc.babylonjs.com/resources/external_pg_assets)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 19, 2020, 10:00pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/7 "2020-02-19T22:00:23Z")

</div>

The project is simple enough, so:

- you should disable the filtering on the maps. Change line 108 in Game.js:

```javascript
box.material.diffuseTexture = new BABYLON.Texture("../../maps/textures/" + _this.textures[obj.t], scene, undefined, undefined, BABYLON.Texture.NEAREST_SAMPLINGMODE);

```

- you must disable the u/v scaling for the grass and only apply u scaling for the wall. Lines 116 to 120 in game.js must be changed to:

```javascript
    if (obj.s[0] > obj.s[1]) {
      if (_this.textures[obj.t] == 'wall.png') {
        box.material.diffuseTexture.uScale = 5.00;
      }
      //box.material.diffuseTexture.vScale = 5.00;

```

It gives something that seems to match your screenshot:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/6417ddb7240bab1cf233093b6e45ca604b1cdd75.png)

---

<div class="post-metadata">

**Author:** ![alan72320492](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alan72320492/32/25580_2.png) [@alan72320492](https://forum.babylonjs.com/u/alan72320492)\
**Post date:** [July 20, 2022, 10:39am UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/8 "2022-07-20T10:39:29Z")

</div>

excuse me, waht’s the meanging of u/v scale?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 20, 2022, 12:07pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/9 "2022-07-20T12:07:48Z")

</div>

It is the values you give to `texture.uScale` / `texture.vScale`. For values \< 1 the texture will stretch and for values \> 1 it will shrink / repeat.

---

<div class="post-metadata">

**Author:** ![alan72320492](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alan72320492/32/25580_2.png) [@alan72320492](https://forum.babylonjs.com/u/alan72320492)\
**Post date:** [July 20, 2022, 1:01pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/10 "2022-07-20T13:01:20Z")

</div>

thank u,i got it. stretch and shrink, which will be less blurry?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 20, 2022, 1:47pm UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/11 "2022-07-20T13:47:43Z")

</div>

The “blurriness” effect is also deeply related to what texture filtering mode you’re using. I recommend reading up on what are they and their differences:  
[Comparison of texture filtering modes : Shadron (reddit.com)](https://www.reddit.com/r/Shadron/comments/6p0764/comparison_of_texture_filtering_modes/)  
[LearnOpenGL - Textures](https://learnopengl.com/Getting-started/Textures) (You’ll want to read the section on Texture filtering and mipmaps)

---

<div class="post-metadata">

**Author:** ![alan72320492](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alan72320492/32/25580_2.png) [@alan72320492](https://forum.babylonjs.com/u/alan72320492)\
**Post date:** [July 21, 2022, 2:30am UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/12 "2022-07-21T02:30:11Z")

</div>

thanks your reply, i’m using the default mode, it’s linnear

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 21, 2022, 11:19am UTC](https://forum.babylonjs.com/t/texture-is-blurry-and-sampling-does-not-fix/8685/13 "2022-07-21T11:19:20Z")

</div>

You might want to change to nearest then
