Changing sideOrientation when crossing object's boundary

Questions
1

Hello,

I need your help achieving an effect, which at first seems to be simple, but after some time spent on looking for an answer I am not so sure anymore. I need to have a transparent box, which renders the back side when you look at it from outside, but once camera enters inside, the backside should not be rendered.

It will be easier to explain using an example. Here is a transparent red box in front of a blue background
https://playground.babylonjs.com/#4L7M8K

Note that SideOrientation is set to DOUBLESIDE so that you see all 6 sides of the box.

The effect I want to achieve is that once the camera crosses the walls of the box, and gets inside of it (scroll with a mouse or uncomment lines #15 and #16), the backside should not be rendered. So basically once inside, I want just to see the blue background. As if SideOrientation was set back to FRONTSIDE.

Is it possible to achieve? I have read Transparency and How Meshes Are Rendered - Babylon.js Documentation carefully but still I cannot make it work. Please help.

5

Hello,
While waiting for a really adapted solution, here is a proposal of circumvention:
https://playground.babylonjs.com/#4L7M8K#2

I know it doesn’t exactly meet your needs, but I hope it can help you anyway.

1 Like
6

Building on @LeJohn PG, why not using the backfaceCulling property of the material:

https://playground.babylonjs.com/#4L7M8K#3

2 Likes
7

@LeJohn and Evgeni_Popov this is exactly what I needed! Precisely this effect. Thanks to both of you!

I will mark @LeJohn reply as a solution, because it is already satisfying my needs. Thank you @Evgeni_Popov for tidying it up.

1 Like
8

I did more testing and noticed that if you place the camera directly inside the box, there is sometimes a brief moment (like a frame or two) when the back side of the box is drawn.

You could try it here
https://playground.babylonjs.com/#4L7M8K#4

You need to press the Run button quickly a few times and sometimes you notice the red box being drawn. If not, it could be also because just my computer is slow. But anyway, this suggests that actionManager can react sometimes with a little delay. It is a high level solution after all.

In my case it is not a problem, but I am sharing this for you @LeJohn and @Evgeni_Popov to know that it is not ideal. And for anyone who is reading this.

9

@lguminski, thank you for your feedback.
For those who need to avoid this issue, you can try this:
https://playground.babylonjs.com/#4L7M8K#5
(note for those who missed this information in the initial message: scroll with the mouse to move the camera)

2 Likes