How to hide part of meshes that are intersecting with not visible mesh

Questions
1

Hello, everyone!

I’m new with Babylon so it might be easy thing to do, but I couldn’t figure out how to do it.
Here is a playground that I’ve prepared: https://playground.babylonjs.com/#V9HGX4#1

I’m loading a scene that was exported from Unity. I want to have buildingMesh fully transparent and make parts of other meshes that are inside and behind builingMesh not visible. When I’m changing visibility of building mesh then all parts of meshes that are inside or behind the building mesh are displaying. Just can’t figure out what I should add to code to make it work how I want.

Thank you in advance :slight_smile:

2

Adding @MackeyK24 the unity exporter daddy

3

The problem is that all other meshes have intersections with buildingMesh - https://playground.babylonjs.com/#V9HGX4#4
I don’t know the way to hide just a part of mesh (except complex camera frustum tricks).
Much easier to do it by mesh names which you can define at model level.

4

On stackoverflow I’ve found similar problem as mine but in three.js, is there an equivalent of this feature in babylon?

I’ve edited the fiddle to look similar to my problem. The blue mesh is like mine buildingMesh that should be invisible: Edit fiddle - JSFiddle - Code Playground

And after making the mesh transparent the result should look like this: Edit fiddle - JSFiddle - Code Playground

5

You can use Material.disableColorWrite = false to draw an invisible object that will still occlude other objects and Mesh.renderingGroupId = X to order the meshes.

In the below PGs I have used renderingGroupId = 0 for all objects that should not be occluded, renderingGroupId = 1 for occluders and renderingGroupId = 2 for meshes that should be occluded. Also, you need to call:

scene.setRenderingAutoClearDepthStencil(1, false);
scene.setRenderingAutoClearDepthStencil(2, false);

so that the zbuffer is not cleared between the rendering groups.

In this PG, the occluder (mesh C) is located in front of the green mesh, so this green mesh is not visible.

In this PG, the occluder is located behind the green mesh, so this green mesh is visible.

[EDIT] A more similar example to the jsfiddle:

7 Likes