Tiled texture -

Questions
1

Hi,
I am referring to the problem described by @ceejay at Changing the uScale and vScale of the texture on an object-by-object basis - Questions & Answers - HTML5 Game Devs Forum

This is a old post. I would like to know if a solution is built in BabylonJS Api or we need to implement our own solution?

Hi @Wingnut,
In that post, you said…

“Perhaps… mesh.materialWrapPerMeshScale = true/false ? Or maybe mesh.allowMaterialScaling = false ? (neither exist, yet)”.

Do they exist now?

Thanks in advance.

2

this is called UV’s :slight_smile:

Mesh.getVerticesData(BABYLON.VertexBuffer.UVKind)

I was actually theorising how to implement a simple solution for this yesterday,
like meshA.setUvs(0,0,1,1) to display entire texture,
meshB.setUvs(0, 0, 0.5, 0.5) to display a 1/4 size square of the texture (bottom left).

But it’s slightly more complicated than that behind the scenes, i’ll pick up where i left it and see if i can make it work :slight_smile:

Update;
First attempt, works only for ground meshes, (mesh.CreateGround)
But works exactly how i imagine it should, you set x,y,z,w aka (u, v, u2, v2) and they are updated.
This was quite simple to do as we have the information needed, easily available, (subdivisions)
https://playground.babylonjs.com/#QFRJ7K#1 (inspired by VertexData.CreateGround)

Second attempt
Big Issue: Expanding the function to be used on any type of mesh, including custom meshes.
Solution: Hope and assume the meshes are created with 0,0,1,1 (full texture) uvs.
Then edit existing uv’s instead of creating new, now works for any type of mesh.
https://playground.babylonjs.com/#QFRJ7K#4 (inspired by custom mesh docs & SPS particle uv’s)

Protential issue:
If a custom mesh is made without full texture uvs, to avoid issues, manually setting

mesh.__uvsCache = new BABYLON.Vector4( u, v, u2, v2);

with the used uvs (at creation) is required before calling mesh.setUvs().

Any smart people out there who might have an idea how to avoid using a “uvsCache” please do give it a go, it annoys me greatly :smile:

5 Likes
3

Great. But my new question is, how do I compute the values to be passed to the setUVS function?

4

You would have to look at your texture,
the range is generally 0 to 1,
u = Horizontal starting point, 0 = Left, 0.5 = Center, 1 = Right, etc
v = Vertical starting point, 0 = Bottom, 0.5 = Center, 1 = Top…
u2 = Horizontal ending point,
v2 = Vertical ending point.

image
say you have a texture with 4 tiles, and you want the top left tile, e.g. orange on picture.
u = 0; // start at 0 on horizontal axis
v = 0.5; // start at center on vertical axis
u2 = 0.5; // end at center on horizontal
v2 = 1; // end at top on vertical
setUvs( u, v, u2, v2 )

4 Likes
5

I found this thread and the playground very helpful. Thank you! Am surprised something like this setUVs function hasn’t been added as a native Mesh method.

2 Likes
6

Short answer,
it’s incomplete and uvs are complex when you have to support any imagineable scenario :smile:

1 Like
7

Aye I can only imagine. Thinking about it too much would turn my hair grey. :grinning: