Mapping texture to plane with specific uvs

[royibernthal]

I need to be able to map only a portion of a texture to a plane. My end goal is for the texture to be a spritesheet which I can animate by playing with its u and v offsets.

The uvs need to be set dynamically at runtime since different spritesheet textures will be applied to the same mesh, therefore I'm using get/set verticesData and not passing uvs to the constructor via the options argument.

 

This works for a box, following this doc:

https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

 

Which uvs do I need to play with when dealing with a plane?

 

Here's a PG I created that contains both a Box and a Plane. The Box has the desired result, while the Plane needs to be adjusted.

https://www.babylonjs-playground.com/#ICZEXW#63

 

On a sidenote, I'm note using GUI AdvancedDynamicTexture for this for performance reasons.

I need 20 300x300 animations like this at 60 fps on the screen at all times.

Hopefully what I'm trying to do here would be more sane in terms of performance. If not then please feel free to burst my bubble.

[JohnK]

10 hours ago, royibernthal said:

This works for a box, following this doc:

Unfortunately this seems to work but it is only by accident, your assignment of uvs values are wrong. It would be a good idea to read

http://doc.babylonjs.com/resources/facets

http://doc.babylonjs.com/how_to/custom

The way to correctly apply uvs is to find index numbers for vertices by logging position values in the console and remember to apply them in pairs in the uvs

Example https://www.babylonjs-playground.com/#ICZEXW#64

 

 

[royibernthal]

Got it, thanks. It's always interesting to understand better how things work under the hood