ajmas / StuffInSpace

A real-time interactive WebGL visualisation of objects in Earth orbit
https://ajmas.github.io/StuffInSpace/
24 stars 9 forks source link

Explore using asyncReadPixel in place of the ThreeJS raycaster #45

Open ajmas opened 9 months ago

ajmas commented 9 months ago

This was originally suggested in a comment, in issue #20, but felt it would make sense to move to it own ticket:

The original implementation uses GPU picking not raycasting (much faster). The gist of it is that you create different colors for every dot and then write those to a buffer that isn't rendered to the canvas. Each draw call there is a second call to the GPU for the pixel color on that buffer under the mouse.

I added a throttle on my implementation to only run that every 8 or 16 frames to reduce latency without really even noticing.

The more important thing is using an asyncReadPixel call (can't remember if that is WebGl 2.0 only). It might lead you to being slightly behind the mouse, but again it is a non-issue compared to blocking the main thread waiting on the GPU.

Are you set on raycasting for another reason or are you open to sticking with GPU picking?

Edit: The original did use raycasting for determining if you are clicking on the earth and then tried to make that part of the earth follow the mouse. It was another big performance hit that I cut out and replaced.