Thin Instanced squares or triangles sharing the same projection texture?

[Julien1]

Hi,
I am not very sure how to handle the situation in BJS.
I would like multiple thin instanced meshes (triangles or quads) to share the same texture.
Ideally a procedural one.

But, my issue is how do I tell BJS to do that? Please have a look at the uploaded picture, it shows what I am trying to achieve.
I let the full texture in the background so that you can see that the position of a shape takes what the texture should be at this place. In 3d, you would only have the two squares.

The squares are on the same plane, like in a 2D world. But that could evolve in the future.

How can I achieve this ? I thought I should take the idea of a triplanar mapping as a base but remove the z part. Not sure… I am asking for opinions here.

Thanks,

[Evgeni_Popov]

You can try to add an offset to the coordinate textures, as in:

Different texture per mesh instance using instance buffers?

I think what you can do is adding an offset to the uv coordinates of each instance: https://www.babylonjs-playground.com/#64K1I1#2 So, you will need to have a single texture that is the merging of the two textures and use an appropriate offset to render the right part of the texture on the 2nd instance.

Or:

thinInstance multiple materials

You can try something like this: https://www.babylonjs-playground.com/#YAWQ2W#18 Notes: you should make all your tiles the same dimension in the texture. It’s currently not the case. I used a tile dimension of 68x75 but given the texture it’s not totally accurate this works by passing to the shaders the (x,y) offset of the tile in the atlas you want to draw for the current instance. In addition to (x,y) I pass the (width, height) dimensions of the tile. You could avoid this because your tile…

[Julien1]

Thanks Evgeni, I will try that