Three.js: How to update the colors of points on a 3D scatter plot while zooming?

user3hex 0
Viewed 22

I have a question and hope that you can help me.

We are trying to display a 3D point cloud with about 200K points like the one below, with a colorbar.

enter image description here

When the user zooms in we would like to update the colorbar to match the new min/max of the points still visible to get more contrast on the details important to the user.

Therefore we need to find the new min/max of the points still visible and we need to assign the new color to the points.

If we just iterate through the array in JS and assign the colors manually this feels quite laggy. Do you have an idea on how this could work, maybe using three.js functions that run on the GPU.

In short:

  • How to get the points still visible, is there an event?
  • Fastest way to get the min / max of the points visible after user interaction?
  • How to adjust the colors of the points without iterating in JS?
d3.js three.js javascript
1 Answers

How to get the points still visible, is there an event?

No, there isn't. You have to iterate through all points, transform each one into world space and check whether the point lies within the camera's view frustum or not.

Fastest way to get the min / max of the points visible after user interaction?

You have to iterate through all points and then check for min/max values.

How to adjust the colors of the points without iterating in JS?

If you know the min/max values, you can pass them into the shaders as uniforms and use them to update the vertex/point color.

Mugen870
Related