Texture is blurry and sampling does not fix

Questions
1

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

1905×656

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.

2

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.

3

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

4

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

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

5

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
You will have to run it with a http-server as the files are imported as modules

6

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

Here is a doc about having external assets in the PG: Using External Assets - Babylon.js Documentation

7

The project is simple enough, so:

  • you should disable the filtering on the maps. Change line 108 in Game.js:
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:
    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
image2548×1244 112 KB

2 Likes
8

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

9

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.

10

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

11

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)
LearnOpenGL - Textures (You’ll want to read the section on Texture filtering and mipmaps)

2 Likes
12

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

13

You might want to change to nearest then

1 Like