Fading between two photodomes + transparent meshes

Questions
1

So I’m building a virtual tour-like app - 360 photos, and the user can move between them.
I would like to fade between the two photodomes, which I achieved by setting the domes’ visibility below 1: dome.mesh.visibility = 0.99 and then tweening the dome.mesh.material.alpha value up and down - and this works fine.
But now I wanted to add other transparent meshes to the scene (clickable hotspot with unique shapes, modelled in blender), but I can’t seem to get the transparencies play nice with each other… :frowning_face:
The modells does not render in front of a transparent photodome
Heres a playground demonstrating this: https://www.babylonjs-playground.com/#WGZLGJ#1407
Move the mouse up and down to fade between the two photodomes - the boombox disappears as the dome fades up.

What am I missing here?
Is this a sorting issue? I tried to play with alphaIndex, but has no luck.

How can I fade between the two domes and also keep the transparent object visible?

2

You can use the renderingGroupId property to have the plane/boombox displayed after the photo domes:

https://www.babylonjs-playground.com/#WGZLGJ#1411

1 Like
3

Ohh, cool, thank you!
I didin’t try the rendering groups, just the alphaIndex… I guess because this problem involves alphas… :-/ Should’ve taken a step back :slight_smile:

Thank you!