Alpha destroys atlas in custom material

Questions
1

Hi,

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?
Thanks

2

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:

1 Like
3

Thank you :bowing_man:

4

@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

5

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:
image

The display is dark because of the direction of the light: try to use (-1,0,0) instead of (10,10,0):

6

@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 )

7

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.

1 Like
8

when you say “coordinates from 0 to 1” , you mean like this?
Imgur: The magic of the Internet

also, just last for today :bowing_man:

why my bounding box becomes clickable if I do double loop? ( line 108) I would like only thininstance to be clickable

Thanks

edit: ok I think something is not right with buffer size, when I changed this
obj.thinInstanceSetBuffer("tileOffset", bufferMatricesTileKiosk, 4, true);
to
obj.thinInstanceSetBuffer("tileOffset", bufferMatricesTileKiosk);

I see in console logs “vertexAttribPointer: bad size” error, how could I fix this? no matter what size I provide it shows that error

9

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 bufferMatricesTileKiosk.

1 Like
10

Thanks a lot @Evgeni_Popov :bowing_man: :heart: :bowing_man:

11

@Evgeni_Popov any idea why the all texture is displaying behind tile, instead only single tile?

https://playground.babylonjs.com/#HPWS4X#8

Thanks

Edit: ok , I figured it was causing if I use emissiveTexture

12

@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.
https://playground.babylonjs.com/#MZMS1C#36

what I am doing wrong?
Thanks

13

The texture coordinates of your object are wrong:

17:51:54.794 Math.min(...scene.getMeshByName("Stand_8_Kiosk.006").getVerticesData("uv"))
17:51:54.798 0.0041176676750183105
17:51:58.570 Math.max(...scene.getMeshByName("Stand_8_Kiosk.006").getVerticesData("uv"))
17:51:58.573 0.11850835382938385

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).

14

@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?
https://playground.babylonjs.com/#MZMS1C#38

after fixing in blender I think its working correctly now as

console.log(Math.min(...scene.getMeshByName("Stand_8_Kiosk.006").getVerticesData("uv")));
console.log(Math.max(...scene.getMeshByName("Stand_8_Kiosk.006").getVerticesData("uv")));

outputs 0,1

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

15

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:

https://playground.babylonjs.com/#MZMS1C#39

1 Like
16

@Evgeni_Popov words are not enough for how much I would like to thank you.

1 Like