Fading between objects using visibilities that sum to 1.0

[jdurrant]

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?

Thanks!

~Jacob

[RaananW]

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.

[JohnK]

Does just fading the one on top from 1 to 0 work for you. 

[dbawel]

I'm not certain what isn't working for you. As @RaananW mentioned:

On 9/11/2017 at 2:50 AM, RaananW said:

I am not sure what your final goal is, so it is hard to suggest a different path.

Perhaps if you can define your goal so we might understand, we can help you find a solution.

DB

[jdurrant]

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