I am using custom material in thin instances, my custom material has 3 images atlas, here is a JPG version, which works fine
I want to use a transparent image PNG for atlas, so when I use PNG image it doesn’t take alpha values, instead transparent it shows black
when I set
entranceDoorsTextMaterial.diffuseTexture.hasAlpha my atlas doesn’t work, I have 3 images on atlas, it shows all 3 instead 1 on each thin instance
How to make custom material take PNG alpha values, to make it transparent?
When you set
hasAlpha = true you enable alpha testing, meaning all alpha values from the look in the texture with the original uv (meaning not the ones you updated to work with the atlas) < alpha_cutoff will discard the corresponding pixels.
You should either set
alphaCutOff = 0 or set
transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND to only enable alpha blending and not alpha testing.
Note that if you use
useAlphaFromDiffuseTexture=true you should also set the
alpha variable with the value read from the texture lookup:
@Evgeni_Popov I am facing an issue with JPG
my uv coordinates are set properly but still image is not showing correctly, I have setup uv in blender, and also tried with your snippet to set uv, but no success, the confusion is I am using custom material on other models and it works perfectly except this one.
a PG here
secondly why image display darker?
to overcome this, I am using
emissiveTexture = stand8Banner5Material.diffuseTexture
.diffuseColor = new BABYLON.Color3(4.1, 4.1, 4.1);
edit, for uv seems something is wrong with calculating atlas, if I set tiles to 1024 width/height I am able to hack it, which is wrong as my tile is 512/512
You must use a tile width/height two times bigger than it should because your uv coordinates are wrong, they range from 0 to 0.5:
The display is dark because of the direction of the light: try to use (-1,0,0) instead of (10,10,0):
@Evgeni_Popov thanks you are the best,
For UV coordinates I am a bit confused, I have set this in blender for other meshes, which works great, just this one was causing issue… please see this image Imgur: The magic of the Internet
what am I doing wrong in blender? shouldn’t I uv map it to 1/4th of 1024/1024 to get my 512 texture?
p.s this only happens when I use custom material, if I don’t use custom material it shows that region correctly (if I remove custom material it shows normally 1/4th of 1024/1024 region https://playground.babylonjs.com/#MZMS1C#16 )
No, the uv coordinates should range from 0 to 1. The remapping to the right range is done by the custom fragment code, depending on the atlas offset and the atlas tile dimensions. When your texture is applied to the quad in Blender, you should see the whole texture and not a part of it.
when you say “coordinates from 0 to 1” , you mean like this?
Imgur: The magic of the Internet
also, just last for today
why my bounding box becomes clickable if I do double loop? ( line 108) I would like only thininstance to be clickable
edit: ok I think something is not right with buffer size, when I changed this
obj.thinInstanceSetBuffer("tileOffset", bufferMatricesTileKiosk, 4, true);
I see in console logs “
vertexAttribPointer: bad size” error, how could I fix this? no matter what size I provide it shows that error
Sorry, I know nothing of Blender, I can’t tell if it’s ok or not in your screenshot. Use the code from my screenshot above to get the min and max values of the uvs.
Your arrays (bufferMatrices and bufferMatricesTileKiosk) are not sized correctly:
You must pass the stride to the
thinInstanceSetBuffer call, else the default value is 16 which is not right for
@Evgeni_Popov any idea why the all texture is displaying behind tile, instead only single tile?
Edit: ok , I figured it was causing if I use emissiveTexture
@Evgeni_Popov sorry encountered issue with alpha again, no matter what I set I am unable to apply alpha texture to another mesh, I have checked uv and all looks fine.
on this mesh its working properly https://playground.babylonjs.com/#MZMS1C#33
But using same material settings with other mesh, Please see this PG: https://playground.babylonjs.com/#MZMS1C#37
in above PG I removed
alpha = baseColor.a; from
Fragment_Custom_Diffuse which made mesh appear in dark, but if I add alpha again, it makes mesh disappear.
what I am doing wrong?
The texture coordinates of your object are wrong:
With an atlas, we should probably have a max value = 1. Here, your uvs are targeting the upper left part of the texture (that 0,0 => 120,120 part of the 1024x1024 texture), and because you set the tiles to be 128x128, in the shader the uvs will be remapped to 0,0 => 15,15.
You should either correct the uvs in your modeling software or set tiles to be 1024x1024 (but that would defeat the purpose of using an atlas).
@Evgeni_Popov thanks a lot, I have always been stuck on this coordinates thing, finally I think I understand how it works and setup in blender, could you please once confirm if these coordinates are fine now?
after fixing in blender I think its working correctly now as
ps , those artefact/lines around object in above PG, are those also from modal? cause even if I set ofset to more value, I could still see those shadows on corner of object
Yes, uvs are now ok as they encompass the whole 0-1 range.
It seems the border problem comes from wrong alpha values in the albedo picture: if you enable alpha testing and set 0.8 as the alpha cuttoff, the problems disappear:
@Evgeni_Popov words are not enough for how much I would like to thank you.