FadeInOutBehavior problem with edges and colors overlapping

Questions
1

Hello, I ran into a problem when trying to animate node (with meshes inside) using FadeInOutBehavior and I’m not sure if there is a way to solve this problem.
I’ve created playground with the issue - https://playground.babylonjs.com/#Q8MIGE#1

In my app I have a meshes that are occluded, have edges rendering enabled and materials are half way transparent to see image in the background through mesh. Sometimes I need to hide the node with all colliders inside but I want to add a smooth animation to it.
When fade animation is not playing then everything looks fine. But when I run fadeInOutBehavior.fadeIn(true) then, for the time when animation is playing, edges that shouldn’t be visible are visible and materials from 2 boxes in not occluded part are overlapping.

Is there any possible solution for this or any simple alternative?

2

Hello! When the alpha of a material is less than 1, the edge renderer will render all edges, and blending will occur, making the materials appear overlapped: Edges renderer and alpha | Babylon.js Playground (babylonjs.com) :slight_smile:

1 Like
3

Hey, thanks for answer. Yeah I just though that there is a way to prevent that.

I’ve solved my problem with just css opacity transition on canvas, and after opacity transition is done, then I’m changing isEnabled state of container node to false. It’s pretty simple solution (that I didn’t think about before asking the question) and it was good enough for me.

2 Likes