THREE.Points use GPU Picking is not work

Hello, everybody.
I’m using https://threejs.org/examples/webgl_custom_attributes_points for 3 cases. It’s beautiful!!!
but when I use the method of picking points with GPU in my article, I get the color ID ID when I combine it with https://threejs.org/examples/webgl_interactive_cubes_gpu. Always scene background color, I do not know why, I do not know if anyone has encountered this situation, hope to help me, thank you!

Hi!
Would be great to provide an editable live code example (codepen, jsfiddle etc., at last a repo on github) that shows the problem.

It seems this (unofficial) demo with three.js does demonstrate GPU picking with points.

1 Like
//set the view offset to represent just a single pixel under the mouse,When THREE.Points is used in scenarios, it cannot be picked up correctly.
self.camera.setViewOffset(self.renderer.domElement.width, self.renderer.domElement.height, mouse.x * window.devicePixelRatio | 0, mouse.y * window.devicePixelRatio | 0, 1, 1);
self.renderer.setRenderTarget(self.pickingTexture);
self.renderer.render(self.pickingScene, self.camera);
self.camera.clearViewOffset();
self.renderer.readRenderTargetPixels(self.pickingTexture, 0, 0, 1, 1, pixelBuffer);

//Use the following code GPU to picking the normal work
self.renderer.setRenderTarget(self.pickingTexture);
self.renderer.render(self.pickingScene, self.camera);
self.renderer.readRenderTargetPixels(self.pickingTexture, mouse.x, self.pickingTexture.height - mouse.y, 1, 1, pixelBuffer);

THREE. Points picked up invalid when I used the latest improved camera. setViewOffset offset to get 1 pixel, and other models were normal. I don’t know what’s wrong with using the old full screen rendering to picking Texture.

Some context:

1 Like

Just want to chime in here with a couple observations from my own experimentation with GPU picking with THREE.Points.

  1. The Points object autoscales the point size based on the height of what’s being drawn, see refreshUniformsPoints in WebGLMaterials.js. When you reduce the target to a 1px by 1px size, it messes up the size of the points you’re drawing and you likely won’t see it, hence a miss. You can try and correct this by adjusting the size uniform when picking, but it’s not enough to get it to work (see #2).

  2. Additionally, it’s my experience that when the center of a point is off canvas, the entire point doesn’t get drawn. Say you had point size > 1. If a point was at [-1,-1] you wouldn’t see it rendered at all, but if it were at [0,0] you would. This means that when you zoom into a 1px by 1px size, unless you are focused exactly on the middle of the point, your point won’t render and it will be a miss.

It seems the simplest solution is to just draw the full size screen in the picking texture as Douglas Duhaime’s block above does, this will ensure you’re picking from the same points as what the user sees on screen, even if it is more expensive.