Mask material for photodome

Hi.

Is there a material “preset” or some easy way to make a material or object act as a mask for another material or set of objects. I set up a small PG to demonstrate;
https://www.babylonjs-playground.com/#14KRGG#109

What I need is for the wall and ground to be “invisible” and show only the photoDome but not the part og the blue sphere that is obscured by the wall or ground, pan around to see the sphere.

I am trying to make a photodome based architectual visualisation, so my vantidge point will be a single point in 3D space, and I should easily be able to set up a “dummy” mesh to obscure my different vantage “indicators”/“buttons”.

Uploaded an image to try and make it clearer, so I want to get rid of the area marked in read so the photodome would be seen through where the door frame is overlapping my vantage point “button” outside.

Any help or pointing in the right direction would be highly apreciated apreciated. And please feel free to ask if any of this was unclear.

Something like that?
https://www.babylonjs-playground.com/#14KRGG#110

Here I’m forcing all meshes but the dome to render on renderingGroupId 1 so the dome is always rendered first

Then I turn off color write for wall and ground;)

2 Likes

Sweet. That looks perfect. Thanks Deltakosh :slight_smile:

@Deltakosh just wondering if it’s possible to make this work with an alpha texture? It seems to work great with geometry but when I add a texture it doesn’t. I was hoping I could achieve a more feathered mask.

https://www.babylonjs-playground.com/#14KRGG#191

Related to my recent question: Apply alpha mask texture to water material?

Be default, alpha-enabled materials don’t write to the depth buffer, that’s why it does not work.

You can make those materials write to the depth buffer by setting needDepthPrePass to true:

https://www.babylonjs-playground.com/#14KRGG#192

1 Like

Do not know what I am doing but here is a result of playing around https://www.babylonjs-playground.com/#14KRGG#193

1 Like

Great help! Thanks @Evgeni_Popov and @JohnK.

Which prompts the next question: can we achieve gradients in the mask (soft feathering) or is it a binary on/off?

My mistake, alpha-tested materials do write to the depth buffer.

It did not work because alpha-tested materials (like alpha-blended materials) are drawn after opaque objects, so too late to be able to occlude the sphere.

You won’t be able to have soft gradient because alpha blending needs both objects to be drawn, so that colors are properly mixed. If you don’t draw the ground/walls (as currently), they won’t be blended with the sphere.

[…] You can try with stencil buffer, though.

The PG without stencil buffer enabled: https://www.babylonjs-playground.com/#14KRGG#194
Same with stencil enabled: https://www.babylonjs-playground.com/#14KRGG#195

The stencil is used to draw the ground/wall only where the sphere is displayed.

One thing worth mentioning: for some reason, the stencil buffer is automatically disabled by the engine before drawing the sprites / particle systems / transparent objects. So I had to reenable it before drawing the wall/ground objects.

2 Likes

Thanks @Evgeni_Popov but the stencil PGs aren’t quite the effect I was looking for. I’m trying to achieve the same result as the original poster i.e. mask the sphere so that the photodome shows only through the masked geometry, but preferably with a soft/feathered/antialiased edge rather than a hard/pixelated/aliased edge.

If that’s not possible with an alpha gradient I’ll just need to work with a binary mask or use a combination of other techniques to blend elements.

Cross posting here as this solved a combination of challenges for me:

2 Likes