frontUvs and backUvs on instances

How would I go about manipulating the frontUvs and the backUvs on mesh instances?

I currently have a plane with a StandardMaterial with a DynamicTexture onto which I draw 4 images.
The goal is to create 4 instances of that plane, each with different frontUvs, so I can have a different image per instance, while still maintaining a single draw call.

I’ve had success registering and using a instancedBuffer for the ‘uv’ attribute (though I’m unsure what this would accomplish), but not ‘frontUvs’.

I’m very new to 3D in general so hopefully I’m missing something obvious.

Thanks in advance!

Pinging @sebavan

Hello would be amazing if you could share a playground containing your first tests :slight_smile:

Also in your case, why not simply creating one mesh as you want ? you would not save much in this particular case I am even thinking it might be a bit slower (but gut feeling only) as you d only save a couple positions in one buffer for a harder pipeline setup

A bit hectic with commented code as I was trying a lot of things, but here goes a “functional” playground - Babylon.js Playground

If I was going to render this few images I would probably not mind having just simple meshes with different materials and textures, but what I have in mind might scale to about 1k meshes, with some animations. I see this being a bottleneck for lower end devices, so I wanted to try and use instances.

I dabbled a bit in writing shaders as well with the node material editor (awesome btw!) but couldn’t figure out how to wire up an input to my code (imagine an Input Block that just adds to the mesh.uv to change which part of the texture gets shown).

Thanks for the quick reply :smiley:

I actually found a way to do it, using CustomMaterial - https://playground.babylonjs.com/#NICGSS#6

I’ll be leveraging this solution for now, do you guys see any issue that may arise with this?
I mean I probably don’t want to have 1k images drawn on a single texture as that might reveal other problems…

1 Like