How to Occlusion Culling properly

Yes, if the occlusion query concludes that the mesh is occluded then it is not displayed.

See Occlusion Queries | Babylon.js Documentation for more info and a working PG.

Important thing: the meshes that must be occlusion queried must be displayed after the meshes that can (potentially) occlude them! The PG in the doc is working because the wall is created before the sphere, so will be displayed before it. In your PG, you should load the wall before the buggy for it to work (or set a renderingGroupId on the buggy meshes which is greater than the renderingGroupId of the wall).

In your case, your buggy is made of a lot of small meshes (250+), so creating an occlusion query for each one will be sub-optimal. I think you should instead create a fake mesh and set its bounding info = bounding info of the buggy and apply the occlusion query on this mesh alone. If the mesh is occluded, call setEnabled(false) on the Buggy root node. Something like:

In this PG, the clear color is green when the buggy is hidden, blue else.

4 Likes