For some kind of Mahjong game I need to create blocks with all kinds of different images on it.
I made a nice tileblock in Blender and gave it a wood-texture. I import this mesh with SceneLoader.ImportMeshAsync.
I then use const blockinstance = blockmesh.createInstance('block'). This way I can create hundreds of nice wooden blocks. I even managed to give the blocks different colors with :
blockinstance.instancedBuffers.color = BABYLON.Color3.FromHexString(hexcolor);
But the blocks also need an image. There are about 100 different images possible, so I’m wondering what is the most efficient way to do this.
I tried using decals, but I couldn’t get it to work. The decal does work when I use pointerInfo and hit the ground, but it doesn’t appear correctly on the block itself when I hit that (the decal is created off-center, somewhere else on the ground). Also, I can’t find out how to use decals without pointerInfo correctly. And the blocks also need to be animated, and setting parent of the decal seemed to mess up the coordinates.
Another way is maybe creating a child-mesh and place it above each instance, and a material for each different image? But this seems too much overhead to me.
Maybe create a material with the wood-texture that contains all different images and use an offset on each instance, with
blockinstance.instancedBuffers.uvc = new BABYLON.Vector2(col, row);
This looks efficient, as it would reduce the number of draw-calls, but I can’t use the coloring technique I mentioned before, since the images would also get colored.
I’m wondering what’s the easiest and most efficient way to achieve this?