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 will see a problem in the previous PG, which is that tile + color displayed on a panel changes when you move!
That’s because the instances are culled, and when not visible they are not drawn. However, as we provide a full buffer for colors and tileOffsets and this buffer does not change from frame to frame, when one instance is not displayed anymore, another instance gets the parameters of this instance. For eg, if instance 0 that uses values from colors[0] and tileOffsets[0] is not visible anymore, it’s instance 1 that now uses colors[0] and tileOffsets[0] for its display.
To correct this problem you should use the 2nd possibility described in Use Instances - Babylon.js Documentation to set the instance attributes. Namely, you should set the attribute values on each instance directly:
I am going through all your points and clearing my doubts, I will create a PG with 2nd alternative method as you mentioned, meanwhile I noticed this doesn’t display texture in Safari (Version 13.1.2 (14609.3.5.1.5)) but it display texture in Chrome,
ah just noticed you had a pg already with registerInstancedBuffer
I think the problem is that the texture is redimensionned as it is not a power of 2 texture. You should replace the 1083 and 1200 constants in my code to values retrieved from the texture (myMaterial.diffuseTexture.getSize()). Make sure however that the texture is loaded before doing this, else you will get 0 results.
can this be done in BJS or I have to update mesh in 3d software?
ok thanks, still reading on this.
I created a new texture with dimension 340X375, it has 25 tiles, each 68X75
so when I am in Chrome myMaterial.diffuseTexture.getSize() returns me {W: 340, H: 375} which is already set in code, but in Safari myMaterial.diffuseTexture.getSize() returns different {W: 256, H: 256} here is PG https://www.babylonjs-playground.com/#YAWQ2W#23
Power of 2 you mean double sized texture? so I increased sizeX2 , and here texture is 680X700 , but Safari gives different result myMaterial.diffuseTexture.getSize() {W: 512, H: 512} and still not able to show texture
here is PG with it https://www.babylonjs-playground.com/#YAWQ2W#24
can this be done in BJS or I have to update mesh in 3d software?
Yes, but you would need to locate in your mesh the vertices corresponding to where the texture is applied and update the uv coordinates. If you can use a 3D software I think it would be a lot easier.
Power of 2 you mean double sized texture?
No, in WebGL1 all textures must have a power of 2 width and height so Babylon will rescale your texture so that it is a power of 2 texture. That’s why 340x375 becomes 256x256.
The problem is that now your tiles are not 68x75 anymore but 68 * 256/340 and 75 * 256/375…
If you want it to work with WebGL1 it would be a lot easier that your texture is a power of 2 right from the beginning, that way you would not need to perform those corrections.
ok I created a new texture 256X256 dimension, it has 9 tiles, 80X80 and between them is 10px space, what should be value of ofset? and how can I keep one tile to each stand, right now its showing randomly on refresh page.
Regarding the uvs, the panel on which the texture will be applied should have a (0,0) texture coordinate for the top left corner and (1,1) for the bottom right corner (and the right coordinates for all the other vertices making of the panel). That way, when the texture is applied on the panel, u is going from 0 to 1 and v is going from 0 to 1 too.
Regarding your picture it won’t work: you need that each tile be exactly the same size. The 1 and 2, for eg, have not the same size because 1 has no top/left borders.
For eg, if you make a 4x4 tiled atlas in a 256x256 texture, each tile will be 64x64. Then, in each of these 64x64 blocks, you can make a border of 5 pixels on each side (top/right/bottom/left), leaving you 54x54 pixels usable for your number/character. The border should be the same color than the background of the tile.
In the code, set ofst = size of border (5 in the example above).
Thank you so much @Evgeni_Popov I learned a lot from this and wouldn’t have reach here without you.
I was also thinking if its possible to download fixed stand object and than replace my model with this fixed one, it will load without custom code, I found Save Your Scene - Babylon.js Documentation , but I see couple of issues here.
It save as .babylon file, is their something to save it as .obj?
as you see I have like 36 meshes in task.loadedMeshes, but the doDownload function provided in above link download single mesh, to fix I was thinking to maybe create a new TransformNode or object and all meshes as children of it, and than download parent mesh. or is there any better way?
@jerome wow, that’s really at right time, I need to populate the scene with a crowd of people, each person using different texture…and I was thinking how to use maybe createInstance but I see SPS will definitely help there. Thanks for that info
The obj = obj.replace(/^o.*/gm, ""); is because the exporter will generate both a g XXX and o XXX line in the file, which makes the importer generate two meshes (the first one being empty).
I managed to show 1,2,3,4 on first stand, now on the next stand it should be 5,6,7,8 and for next stand 9,0,A…so on
I am a bit confused on where to increase value of tileY and tileX
p.s if possible to revert the “3” green image to show correct flipped with coding, I tried RotationYawPitchRoll and .rotation methods but they just mess up its locations but doesn’t reverse it.
I am going through all your points and clearing my doubts, I will create a PG with 2nd alternative method as you mentioned, meanwhile I noticed this doesn’t display texture in Safari (Version 13.1.2 (14609.3.5.1.5)) but it display texture in Chrome,
that’s just too handy little tool, I performed the download on UV custom code and removed UV custom code after that, it should save some performance now…