Occlude Scene with Skybox or PhotoDome

Questions
1

Hello,

I have a scene that has t a PhotoDome, a ground box and a Wall. The wall is transparent using “setColorWrite”.

https://playground.babylonjs.com/#14KRGG#771

As we can see on the following picture, the wall has a transparent mask and shows the PhotoDome.

image
image1464×1101 98.6 KB

As you can see the “transparency” of the wall, make the PhotoDome visible instead of the Ground.
I am looking a way that this transparency also removes the pixels, so the canvas is transparent in the area of the wall.

Any guidance how to achieve this example is appreciated.

Thanks

2

Hi @nicoraf , welcome aboard!
I’m not sure I understood but I tried something. No ground, no photoDome, only canvas backgroud image (for demo purpose)

1 Like
3

Hi @MarianG ,

I would like that the transparency also clears the PhotoDome and show the HTML dom element that is under the canvas that babylon is rendering…

The reason I would like to show the HTML dom element that is under the canvas.
Imagine that the background color is black. Then the result I want to achieve is :

image
image1328×1000 74 KB

Not that that I assumed that the content is a single color as an example but the content of the HTML dom element can be anything

Thanks

4

This is what above pg is doing, no?

1 Like
5

I think @MarianG’s PG is what you need?

If you want it to work even when using renderingGroupId=1, you can do it like this:

2 Likes
6

Hi @MarianG @Evgeni_Popov thanks for your answer!

I think what @Evgeni_Popov is what I need but I want to check. As the underneath element I want to show a youtube video. Similar as this example:

https://playground.babylonjs.com/#1DX9UE#3

Do you know the reason that they use there:

    maskMesh.onBeforeRenderObservable.add(() => engine.setColorWrite(false))
    maskMesh.onAfterRenderObservable.add(() => engine.setColorWrite(true))

instead as your example:

    const mat = new BABYLON.StandardMaterial("mat", scene);
    mat.alpha = 0.0;
    mat.needAlphaBlending = () => false;

Thanks!

7

They use setColorWrite(false) to avoid writing to the canvas and keep the current color as it is. As they have nothing else in the scene, the current color is the clear color so it’s fine (clear color has alpha=0).

But in your example, you draw the “transparent” box after the photodome, so we have the photodome colors in the canvas. Doing it my way will draw the box with alpha=0, meaning we will see the canvas instead.

1 Like
8

I confirm @Evgeni_Popov it was what I was needing! Thanks!

9

@Evgeni_Popov following up your answer, I am curious, Do you know if there a resonable easy way to make the wall render first to the canvas before the photodrome so that can be also achieved using setColorWrite ?

10

I think it’s the @MarianG solution? Don’t set renderingGroupdId=1 on the wall and it will be rendered before the photodome.

1 Like
11

Ah, I see, I am new to this forum, I didn’t notice that @MarianG provided also a solution!