How to use HTML occlude when many components are being displayed?

[duranmla]

Use case:
Render a earth globe with markers that occlude the markers while rotates.

Problem:
When I render many markers and set occlude similar to https://codesandbox.io/s/6oei7 the FPS goes really low therefore the animation goes super laggy. I was trying to use a more specific set of the property like the docs explain occlude={[earthGlobe]} but I am not sure what I suppose to use there.

My absurd attempt was to do something like this:

const { scene } = useThree()
const earthGlobeRef = scene.children[1]?.children[0]?.children[0]?.children[0]

But as it expects apparently a useRef veriable it does not match the types and yields error.

Question:
How I properly use occlude prop on Html?

Visual context:
My earth globe looks like this:

I can just turn on the occlude and then from 60FPS I got:

I was looking for a way to achieve something like https://www.fonterra.com/nz/en/campaign/fonterra-globe.html#/home but maybe them don't even use HTML (I think they use THREEJS tho)

[dennemark]

Drei HTML is creating a react renderer for each element, this decreases the performance pretty fast.
I have come up with a solution using tunnels, so each HTML element is using your normal react-dom renderer. It requires to have an Output of the tunnel, as a sibling to your r3f canvas. You can see a codesandbox with proper code for tunnel and HTML component here:
#1077

So far there was no reply to the issue unfortunately.
I am using this approach in react-babylonjs for quite a while in production and it serves me well.
(react-babylonjs own HTML component currently behaves the same as r3f, I am using my custom solution, because it adds zustand as a dependency - though in r3f zustand would be already included)

[duranmla]

Well thanks at least for come up with an answer. I have chosen to render all markers with 3D and while that can be very impractical sometimes I think that way for this use case I can workaround the issue.

[b0j-an]

try occlude = blending or something like that