Drei's "Html" component is not performant for large numbers

[SrinivasPrabhu794]

In my r3f scene, I have a lot of text (sometimes more than 2500). Initially, I rendered them using Drei's Text component but the performance was really bad.

After that, I switched over to using Drei's Html component as div +

tags to show my text labels. For small number's the Html component works fine but for large numbers of Html component's the performance is not good at all.

Is there a way to optimize the performance of 2000+ Html components in an r3f scene ? Make them display: "none" at run-time also does not help. Or should I work with CSS3DRenderer directly ?

[PeterMRichards]

Posting my experience about this, in case it's useful for people.
I have a use case where I have around 3000 html annotation, most of them are static.

My data is grouped in a way where I can do some shallow spatial partitioning with AABBs.
And then check if the AABBs are in the view of the camera.
Then I set the HTML's parent group to not be visible & set the HTML style to display none.
And I did a custom patch on the useFrame of the HTML component to skip the calculations if any group ancestor is not visible.
So in effect it will hide & not calculate the HTML components the camera cannot see.
Which culls a lot of the performance hit.

I also commented out the matrix updates, since most of my data is static they are redundant.
I can still update the positions if I manually call updateWorldMatrix when I need.
In general I've found updateWorldMatrix to kill performance.
So after the scene is loaded I call it once on the root & then turn off auto updates.

There is another issue though where the load time of the 3000 HTML element is really slow.
I think that might be a general issue in react which is solved by virtualization.
I couldn't find any library suitable.
So I wrong a pooling system to only mount a small pool & bind visible annotations to the pool to make them visible.

This approach has worked well for my needs.
I don't mind posting some code snippets if people ask.

I did try using the billboard component, but it's seemed even more expensive than the HTML component.
Because of it's matrix transformations.

I think a shader driven billboard which wraps the Drei text component might better for performance.
But using HTML is quite nice also because of flexibility of styling.