thinInstance multiple materials

Questions
22

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 tiles have a fixed size, but it’s more general that way, you could use tiles with different dimensions with this code
  • to work correctly, you need that your panel have texture coordinates that encompasses the full (0,0) - (1,1) range. Currently it’s not the case, that’s why the letter appears truncated and too big.
  • I did fx = 1. - fx because else your letter appears reversed. You can avoid this line by fixing your texture coordinates directly in the model
  • you should add some padding around your tiles in the texture (and update accordingly the ofst value in the code), else you can get artifacts because of mip mapping. It’s a known problem when using atlas, see for eg Texture Atlas edge artifacts...how to fix? - OpenGL: Advanced Coding - Khronos Forums
1 Like