0

If I have a shader that discards (or makes otherwise transparent) portions of a mesh, this (understandably) does not affect the behavior of the raycasting. It should be possible to sample the Z buffer to obtain raycast positions, though of course we'd have other side-effects such as no longer being able to get any data about which object was "found".

Basically though if we can do a "normal" raycast, and then have the ability to do a z-buffer check, we can then start combing through the complete set of raycast intersections to find out the one that really corresponds to the thing we clicked that we're looking at...

It's unclear if it is possible to sample the Z buffer with three.js. Is it possible at all with WebGL?

gman
  • 100,619
  • 31
  • 269
  • 393
Steven Lu
  • 41,389
  • 58
  • 210
  • 364

1 Answers1

2

No, Raycaster cannot sample the depth buffer.

However, you can use another technique referred to as "GPU-Picking".

By assigning a unique color to each object, you can figure out which object was selected. You can use a pattern like this one:

//render the picking scene off-screen

renderer.render( pickingScene, camera, pickingTexture );

//create buffer for reading single pixel
var pixelBuffer = new Uint8Array( 4 );

//read the pixel under the mouse from the texture
renderer.readRenderTargetPixels(pickingTexture, mouse.x, pickingTexture.height - mouse.y, 1, 1, pixelBuffer);

//interpret the pixel as an ID

var id = ( pixelBuffer[0] << 16 ) | ( pixelBuffer[1] << 8 ) | ( pixelBuffer[2] );
var data = pickingData[ id ];

renderer.render( scene, camera );

See these three.js examples:

http://threejs.org/examples/webgl_interactive_cubes_gpu.html http://threejs.org/examples/webgl_interactive_instances_gpu.html

three.js r.84

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Thanks for the answer. GPU picking isn't very satisfactory to me. I see that we should be able to read the depth buffer [as seen here](https://stackoverflow.com/a/33581014/340947). Can three.js do this? – Steven Lu Sep 21 '18 at 05:41
  • Seems like [this depth buffer example](https://github.com/mrdoob/three.js/blob/master/examples/webgl_depth_texture.html) should be enough to provide me with a way to achieve the retrieval of the depth (and thus re-compute world space first impact of rays cast from the camera) – Steven Lu Sep 21 '18 at 05:52