How to stencil the canvas background to the scene?

Hey there!

I recently faced a problem with one of our old features on the project. Basically it was used to show the iframe inside of the scene on a plane. The implementation was technically copied&pasted from this particular playground https://playground.babylonjs.com/#1DX9UE#523.

Long story short: it broke after one of babylon dependency updates (somewhere between 5.1.0 and 5.6.0). The problem is that I can’t stencil the canvas background through the scene and it seems like the mask implementation is not relevant anymore. Currently I’m looking for another approach and I hope someone of you folks can suggest me something cool.

Can you demonstrate the problem in a playground, maybe by modifying the PG you linked? I’m not sure to understand what you mean by “stenciling the canvas background through the scene”?

If you want to see “what’s behind” in the HTML page, you can put your content at the body level. For eg, you can change the body background color/image:

Thank you for replying me @Evgeni_Popov.
I’m not sure that I can reproduce the same case in the pg, but I was trying to describe the situation, when the scene is completely covered with different kind of objects and you are not able to see the scene background. In other words - I wont to make a “window” in such an environment to see the scene background, event if there are other objects behind this “window” plane.
Then I’ll be able to add a new element directly to the body and place it according to the plane position.

Do you mean you want to set some transparencies on some objects so that we can see the other objects that would be behind (farther) them? If so, you can do it at the material level.

When you say “scene background”, do you mean some 3D objects that are part of the scene but occluded by other objects, or do you mean some elements of the HTML page that would be behind the canvas?

@Evgeni_Popov Will be better if I show you some screenshots:
This is the current behaviour. The plane itself just transparent.
Screenshot 2022-10-31 at 20.29.07

And this is the expected result. What you can see here is the scene background(you can see it through other objects behind the plane), and if I’d add the scene.clearColor = new Color4(0, 0, 0, 0); I will be able to see the dom elements placed behind the canvas.
Screenshot 2022-10-31 at 20.29.42

So, adding some transparency to the blue material which is used for the frame doesn’t fix the problem?

I’m not sure that I got your suggestion. Do you mean this plane material on the second screenshot? It’s not a plane material, but an actual scene background. I think what you suggested is displayed on the first screenshot.
To be clear I need to create a mask that will show the scene background even if there are other objects behind the mask.

Maybe this solution (taken from this thread) can help display an iframe on a plane: