How to prevent fully occluded objects from being rendered to reduce triangle count in Three.js?

Questions
,
1

I am developing a multiplayer XR (VR/AR) experience in Three.js, where multiple players interact with each other in real-time. Each player has a main object (e.g., a character or avatar) that is rendered in the scene. The issue I am encountering is that when a player’s object is occluded by another player’s mesh, the object continues to be rendered and its triangles are still processed, even though it is not visible.

In my current setup:

Players’ objects are rendered in real-time using Socket.io for multiplayer synchronization.

The occluded objects (e.g., those blocked by another player’s avatar) are still processed by the GPU, leading to unnecessary triangle counts and performance issues.

I am looking for a way to prevent these occluded objects from being rendered so that they do not contribute to the triangle count or processing, thus improving the overall performance of the scene.

image
image1468×949 62.8 KB

image
image1468×947 142 KB

2

The technique is called “occlusion culling” and here’s a demo that demonstrates this:

3

but its WebGPU, im using WebGLRenderer

4

btw thank you for your informations, its a lot informations for me, and thats good, thank you so much