Jump to content

Fading between objects using visibilities that sum to 1.0

Recommended Posts

I want to seemlessly fade between two meshes with very similar materials. My thinking was that if the sum of the visibility values on each was always 1.0, there would be no transparency visible through the both of them together. But in practice that's not the case.

I made this playground to illustrate: https://playground.babylonjs.com/#69K17Z#2

Note that the visibility on one of the grass planes goes down exactly as the visibility on the other plane goes up, such that the two visibilities always sum to 1.0. However, during the transition, the fire plane in the background can briefly be seen through the two grass textures.

Does anyone know how to fade between two meshes without briefly revealing what's in the background?



Link to post
Share on other sites

Hi @jdurrant,

I think there is a misconception regarding the visibility variable. Setting the visibility to less than 1 will trigger transparency (as expected). Seeing through two transparent surfaces (doesn't matter that level of visibility) will make the background visible.

You could try morphing between the two meshes, but I am not sure what your final goal is, so it is hard to suggest a different path.

Link to post
Share on other sites

@JohnK , you had the right idea. @RaananW , I see now that visibility wasn't the right tool. I was thinking that two meshes, each with 0.5 transparency, should not let any background through when viewed aligned, since 0.5 + 0.5 = 1.0. But it makes sense that it would be multiplicative rather than additive. 0.5 * 0.5 = 0.25, so 25% of the background should go through.

Perhaps the effect I was looking for is like Photoshop's "overlay" filter. Not sure...

@JohnK , your solution wasn't perfect for my actual case because, unlike the playground scene I created, my actual scene involves transparent meshes. The mesh in front has a transparent region through which you can see the mesh in back. Inspired by your idea, though, I ended up sequentially fading the mesh in back completely in, and then fading the mesh in front completely out. I'd hoped to do the fading of both meshes simultaneously, but that's pretty close to what I was looking for.

Thanks, guys! Great game engine, by the way!

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.

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