Material using image with transparent background and keeping transparency

[JohnK]

What I would like to do:

Take an image with a transparent background and use it as a material  so that on a mesh you only see the foreground on a face and so when you look through a face you also see the foreground image on a back face. You can see the sort of effect I wish for below. At the moment not concerned about orientation just transparency.

 

When I try it in  a playground  http://www.babylonjs-playground.com/#YDO1F#4 the transparency is lost. Is there a way I should be doing it so that the transparency remains or do I need to write a new shader?

EDIT tried with gif - same result.

 

 

[NasimiAsl]

i can make it with shader  fast

 

http://www.babylonjs-playground.com/#YDO1F#6 with discard

http://www.babylonjs-playground.com/#YDO1F#8 with alpha (2 box needed to see correct)

click Run After loading 

 

[JohnK]

Thank you. That is just what I wanted. Looking forward to eash being in MaterialBuilder. I have added an s.onload function() (to #6)  so that the playground should run on loading. A trick I learnt from one of  @jerome playgrounds http://www.babylonjs-playground.com/#2KSQ1R#39

[NasimiAsl]

4 days

[jerome]

another direct way to do it would be to :

• use a diffuseTexture
• tell that this texture has alpha
• tell the material to use the alpha from this texture

http://www.babylonjs-playground.com/#YDO1F#12

 

But NasimiAsl's solution seems better anyway

[JohnK]

Another request to develop this further. Suppose now I wanted to spread the image over the six sides rather like @jerome does in http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors. I know it is a bit strange to split the dog up but it was just an handy image. Now orientation matters.

If this was the image I started with

 

this would be the results I was after.

 

 

[jerome]

yep, so everything is almost explained here : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors#textures

Have you any kind of problem ?

[JohnK]

@jerome  thank you for that. Your solution does not appear to show the images behind the others whereas @NasimiAsl solution does so.

[adam]

1 hour ago, jerome said:

But NasimiAsl's solution seems better anyway

I don't understand how it is better.  It doesn't seem to be affected by the lights.  Maybe I'm missing something

[adam]

1 hour ago, JohnK said:

thank you for that. Your solution does not appear to show the images behind the others

I missed that.

Edit:

If you turn off back face culling it shows the images behind.  The light looks a little off though.  

http://www.babylonjs-playground.com/#YDO1F#13

I just looked again and the z-sorting doesn't look quite right to me.

This one looks better:

http://www.babylonjs-playground.com/#YDO1F#14

[JohnK]

@adam z-sorting in #13 might not be right but it is fun. Now I will have to see which solution is most suitable for me. Could come down to the lighting.

[NasimiAsl]

hi adam we havent any question about lights But your talking is correct for now 

[JohnK]

@NasimiAsl @adam comment about lighting is just because I noticed in one all faces have the same lighting and in the other it depends on face position. The main question I have at the moment is splitting the images over the faces.

[NasimiAsl]

with light 

http://www.babylonjs-playground.com/#YDO1F#16 

[adam]

It would be cool if there was a function in the new MaterialBuilder that could automatically sync it with the existing lights.

[NasimiAsl]

yes i have it in my mind

like this   importLights({  [] })

 

[Vousk-prod.]

7 hours ago, adam said:

I don't understand how it is better.  It doesn't seem to be affected by the lights.  Maybe I'm missing something

Not sure NasimiAsl's solution is better here, because jerome's one uses the standard material, which shader is compiled in an optimised way inside BJS, so in terms of performance I think the standard method may be better. But I can be wrong.

[JohnK]

My original idea was, once I saw how the transparency could happen, to see if there was any mileage  in using a tree type image to create background trees. However the result is too sphere like. Need to keep thinking http://www.babylonjs-playground.com/#YDO1F#17

[NasimiAsl]

@Johnk : I make that a few days ago http://melyon.ir/preview/index/40426 it use two texture 

 

[JohnK]

Great minds think alike. Unlike me you had the skills to have developed the idea so it works. A more irregular mesh and two textures. Perhaps when you have time you could put it into demos and projects and a playground to show how is done. I can see a usable extension.