JohnK

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.

 

Capture.PNG.8808c0deaffa5f3d2dbbc81bc43d

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Capture3.PNG.a3a9ef925edfb6750a72231cc8d

 

this would be the results I was after.

Capture2.PNG.d0efe3540c1dc1d6c2425b60887

 

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.