[SOLVED] One texture per face with repeat

Questions
1

With ThreeJS, i could create a mesh with a texture by face and a repeat for each.

I try to do the same thing with Babylon.js but unfortunately, i haven’t yet found a concrete example.

The only example I found is “Apply Material to Individual Faces” but it doesn’t work with a texture repetition (uScale / vScale): Babylon.js Playground

Is there a simpler way to do that?

2

not sure to understand what you trying to achieve exactly ?

3

For example, with ThreeJS, i can do this:
j27232

So, 1 texture per face and i can scale each texture as i want.

My objective is to do the same with BabylonJS :slight_smile:

4

custom faceUV’s should work just fine with with the scaling parameters.

5

Curious to see how you build it with 3.js
In our case as @Pryme8 mentioned everything can be done with the faceUV:
https://www.babylonjs-playground.com/#L7AS3S#1

image
image.jpg941×859 162 KB

1 Like
6

Hum, that’s not what I meant.:disappointed_relieved:

https://www.babylonjs-playground.com/#L7AS3S#2

In this case, the texture on the vertical faces is stretched. I would like them to be repeated (4 times, verticaly).

7

I think what is being asked is to have a specific portion of a texture to be repeated on a face, rather than the whole texture itself.

8

mmh…
When you repeat the texture on one face and use the same texture on another face (with a different crop area with faceUV), the texture is stretched on the whole surface.
Actually, this is the expected behavior : a texture is stretched (whatever the repetition number) on the whole surface of a face.

So, unless you add some vectors on one face (please search the forum, someone solved the same issue a month ago in my memory) so they can hold some extra UV coordinates (this means a different mesh geometry finally), you could :

  • either use the MultiMaterial feature with two different textures (different scales) from the same image, but this would be a draw call per texture,
  • either still use faceUV but by modifying your initial image : put in the same image both scale versions (the stones and twice the stones twice tinyer) with your favorite picture editor, then use faceUV to crop the right texture part and to stick it on the right mesh face.

I would do the second option as it’s easy, light and will be only one draw call.

9

and like that?
https://www.babylonjs-playground.com/#L7AS3S#3

10

@Deltakosh : Not really, no :slight_smile:

I use the MultiMaterial feature with 3 different textures and i got almost the expected result:
https://www.babylonjs-playground.com/#L7AS3S#4

Have to work on the orientation of the faces. Normally, i should have used 2 textures and not 3.

11

you can achieve all of this with 1 texture if you set up your UV correctly on your mesh.

1 Like
12

Can be, but the use of Multimaterial+subMeshes is what i need to do for my project (a map editor for my game) and is very close to what i was doing with ThreeJS. :slight_smile:

13

OK as long as you are happy:)

1 Like