Texture is blurry and sampling does not fix

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

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.

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.

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

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.

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

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

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:

2 Likes