Renderer.isOccluded() returns null - is my setup correct?

Questions
, ,
1

So currently I am trying to boost the performance of a scene with a building with hundreds of objects (I hope I will be able to showcase this soon). The geometry isn’t really detailed, and since buildings have tons of objects which are not always on screen, occlusion culling seems like the perfect solution.

I have tried to create a minimalistic example to showcase the issue (using Angular), see StackBlitz link below. Instead of using a node and it’s update method like three.js/examples/webgpu_occlusion.html at 7a4f6b6637fbf10f1f36c9bb1f34b32452e516c6 · mrdoob/three.js · GitHub does, I thought I could perhaps use Renderer.isOccluded(obj) while traversing the scene in my animate() loop. Unfortunately, this always results in null, instead of true or false.

Am I using the functionality as intended and is it just a bug? Or is my implementation incorrect?
The example uses WebGPURenderer and r181.

2

Here is a example in plain three.js:

3

The problem is you can’t call isOccluded() outside of a render context. So similar to the official example, evaluate call isOccluded() in a custom node class during one of the lifecycle methods.

2 Likes
4

Thank you @Mugen87 , that makes sense!

I created a new example, with a custom node class as you mentioned, and at least visible objects will now become invisible when occluded, as isOccluded() finally returns true or false within the node’s update() method.

Only one issue remains which I am stuck on at the moment. The node’s update() method will not be called with objects that are visible = false, so they will remain not visible. I tried changing the NodeUpdateType, but they all require the mesh to be visible to trigger a update.

Is there a way to still trigger the node update() method, even if mesh visible is set to false? Or what would be best-practice? Thanks!

5

I’m afraid what you a trying to do does not work. The object must be rendered first to make an occlusion query possible. If you set visible to false, nothing gets rendered and the occlusion query does not have any data to work on.

Keep in mind that occlusion queries and occlusion culling are two different things. In order to use occlusion queries for culling, you must render something (the object itself or a raw representation like a bounding volume representation) so a query is possible.

1 Like
6

Thank you for clarifying @Mugen87 . I think I mixed the two up and didn’t understand the concept that well.

With your explanation I was able to finally create a working example, using a raw representation of each object.

For anyone needing pointers for the concept, I have a final working jsfiddle: