How to scale and orient PBR material textures?

Questions
1

Hi there,

I am trying to get a PBR material onto an object - keeping the aspect ratio correct and also scaled equally on all sides and oriented like I want. Here is the texture I am using:

The result I am getting looks like this:

But what I want to get is this (simulated with Photoshop):

The box is defined height: 100, width: 50, depth: 200
https://playground.babylonjs.com/#AYXLNF

Now I have the following issues:
1.) Each side only uses 1 of the texture image which completely distorts the texture, but I want that all sides are covered keeping the aspect ratio.
2.) All sides should take the same “amount” of textures, so the circles are equally sized on all sides
3.) I want to control the direction of the textures, so that they flow like shown (triangle)

Many questions - who can help me with that?

1 Like
2

Does anyone have a Playground link to a similar project where I can see how it’s done? I am still searching for a solution.

3

I think you will have to modify the uv coordinates of each face to tile the textures the way you want.

Another and easier way would be to create your object from 6 separates planes, because for each plane you can change the uv scale of the texture to achieve the number of repeats you want.

2 Likes
4

@Evgeni_Popov

I think you will have to modify the uv coordinates of each face to tile the textures the way you want.

Yes, that sounds like exactly what I need:

  • modifying the uv scale
  • shifting the uv coordinates
  • changing the uv rotation
  • possibly inverting the w (normal) direction

of each face of the geometry. But this is exactly where I got stuck - because what I found was this:

https://doc.babylonjs.com/how_to/more_materials#tiling

But this is related to the material/texture. What I need would be related to the geometry/face itself. Could you please tell me where I can find an explanation or an example in the playground? Or - if you have time do one face of the box in my playground project?

https://playground.babylonjs.com/#AYXLNF

5

You can get and set the uvs by using the mesh.getVerticesData and mesh.setVerticesData:

https://playground.babylonjs.com/#AYXLNF#1

I have updated the uvs for the visible faces, I will let you do the same thing for the 3 other faces :wink:

6

@Evgeni_Popov Thanks for providing a solution to the problem. I have played with the playground example a little, turning the face 1 as in my Photoshop screenshot. So yes… your solution works in this simple example.

https://playground.babylonjs.com/#AYXLNF#2

But - isn’t there a better solution? For example - if you extrude a text, then you know the length of the extrusion, but you don’t know the length of the “curve” that makes the outer shape of the characters. But anyhow you want a texture to be correctly sized on the extruded faces in u and v while matching the size of the front and back faces of the characters.

7

It’s a problem with u/v generation, so either in the modeling package if you use one to create your objects, or with the function that generates the u/v if they are auto-generated.

I’m not sure I can help more here, maybe someone with more knowledge about modeling could.

8

I am trying achieve the same result. I was able to adjust the uvs more dynamically: https://playground.babylonjs.com/#IR9BL6#59

Unfortunately I am stuck at determining the uv orientation to know in which direction I have to scale the uvs.

Maybe one of you has an idea how to solve this problem?