Updated:
I have one million 2D circles spanning the X,Y axes with their Z value as 0 (like a scatter plot). I'm using THREE.PointCloud and WebGL shader programs in hope of it improving performance (seems to work). They are made using a 256x256px PNG image of a ball (even though the points never reach 256x256px when scaling?). I'm also using raycasting to hover over and click on the circles (which are of varying colours and sizes).
I'm trying to add text labels for the points, which scale and are anchored to the circles when the user zooms and pans the scene.
I've tried creating a 2D THREE.TextGeometry object for each point and adding them into a Object3D and adding it to the scene. The performance is expectedly poor, but everything else is great.
I'm currently in the process of creating a 2D canvas texture for each point's label, adding the textures to an object and then adding that to the scene (seems fast, but font-size, pixelation and coordinates are giving me a headache).
I'd like to think there's some sort of 2D plane that I can add lots of text labels to, which don't pixelate when zooming on the Z axis. THREE.PlaneGeometry sounds good, but I got an error when trying to add an object to it.
Another option would be to only show labels for the points that are visible. I understand that a PointCloud is considered a single object and so FrustrumCulling doesn't apply to individual points. So I'd have to implement my own culling detection. If I did this though, I could go down the route of using HTML elements for the labels, or even the TextGeometry approach.
Old question:
Has anyone had any success labelling points/particles in THREE.js?
Ideally a non-pixelated text label, able to scale and rotate with the pointcloud.
Regarding pixelation, I'm thinking of using TextGeometry() to make a 2D text label. And then adding the labels to an object and then to the scene using the same coordinates as the points.
But then in the case of 1 million points, would adding a separate object of 1 million text labels be too much?
