Some PNG format images lose transparency as materials?

I have two examples here:

  1. https://playground.babylonjs.com/#1NSKCR
  2. https://playground.babylonjs.com/#1NSKCR#1

Both are png images, why is the transparency lost in the first image as a material?


Unfortunately I cannot manage to get your PG running as loading the model takes forever and ends up with a timeout :frowning:

:frowning: Sorry for the large size of the model, here is the link to it https://legoflow.com/assets/test/model.gltf

Looking forward to your answers.

anyway to share a PG with a simpler model (like a cube)?

Hello and welcome to BJS,
The answer is quite simple. Yes, these are 2 png, BUT 1 has a white background (the one that works with the albedoTexture), the second has a transparent background. Since you are not using your design on top of a t-shirt mesh and texture, but simply as an albedo with a normal texture to create both the front t-shirt and design, the transparent background turns black.
It is in fact black because it’s transparent (but not specified). You can verify this in PG by selecting your ‘blinn3SG’ material and setting the parameters of:

newMeshes[3].material.albedoTexture.hasAlpha = true;
newMeshes[3].useAlphaFromAlbedoTexture = true;

Next, the mesh will render the PNG albedoTexture with its transparent background (but then of course your t-shirt will have a hole in it :wink:

So, the answer is: Edit your PNG and fill-in the transparent background with white color.

2 Likes

:hugs: Thank you very much for your reply! I managed to solve the problem based on your answer.

I have a question, how can I tell that one is on a white background when both png images are on a transparent background?

Why does transparency appear when you look at the side?


:face_with_peeking_eye: I unset useAlphaFromAlbedoTexture and the problem was solved.

I have a question, why does this texture flicker the first time albedoTexture is set to null?

Here is an example and video:

The answer is they are not. Only in (the system) preview they might appear the same, simply because the preview mostly does not render transparency from PNG. You just have to edit your image with an app (i.e. photoshop) and then you’ll know if it has transparency or not.

Else, in BJS, you can use the trick above,
material.albedoTexture.hasAlpha = true;
useAlphaFromAlbedoTexture = true;

If the texture has transparency, it will show.

I believe it’s the time for loading the picture and the rendering the alpha. If so, there are a number of tricks to avoid this. May be I’ll let you just open a new thread wit this, since you marked this one as solved (and is kind of a different question).

You can name it something like ‘how to avoid alpha/texture rendering delay on material change’ and simply copy your question. May be someone else will answer. The question has already some answers in this forum (providing you can find the right post from the search :wink:

:hugs: Thank you very much for your reply, I have just started to learn BJS and your answers are very helpful.

Welcome. I hope you’ll like your experience with BJS :smiley:

Hi, since white color is used as a transparent background, may I ask what colour should I edit the image to be if I need to fill it with real white color?

White color is (in your scenario) not transparent. You could replace the png with jpg and it would work the same. The thing here is that you are applying your design directly on your t-shirt material and mesh (as opposed to having a mesh with the background t-shirt color and, on top of it, a design).
What I would recommend here, assuming the same t-shit model could show different colors AND different design, would be that you create a clone or instance of the mesh parts that should show a design (front and/or back) and apply the design material with a transparent PNG on this cloned or instanced mesh that would be offseted just 0.001 from the background t-shirt mesh.

Two benefits here:
First, the t-shirt ‘base model’ will never brake while the ‘design’ is loading/updating.
Second, you can set whatever color to your t-shirt, independently from the design (again without delay in rendering).
and …actually third, you can also accentuate the effect of depth of the design on the t-shirt (i.e. if it’s an embrodery or flocked) without changing the normal on your base t-shirt.