Jump to content

Material using image with transparent background and keeping transparency


Recommended Posts

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.



Link to comment
Share on other sites

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.




Link to comment
Share on other sites

1 hour ago, JohnK said:

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

I missed that.


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


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

This one looks better:


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...