search

pmndrs / react-postprocessing

📬 postprocessing for react-three-fiber
https://docs.pmnd.rs/react-postprocessing
MIT License
1.1k stars 101 forks source link

Add DepthPickingPass #288

Open alouis-jpg opened 2 months ago

alouis-jpg commented 2 months ago

Thanks for this great library, it enhances so much 3d renderings on the web and brings many interestings layers of information to the models. With the depth's visualization already available it would be very useful to have a DepthPickingPass component useable in the EffectComposer scope so as to read depth at a specific screen position.

Would love to this work in react-postprocessing!

alouis-jpg commented 2 months ago

Based on DepthPickingPass implementation in the react-postprocessing Autofocus component (see source code here), I was able to implement DepthPicking in my r3f project. Here is a sandbox demo.

However, having a drei PerspectiveCamera in my r3f scene seems to tamper with the use of the depth buffer and compromise react-postprocessing DepthOfField and Autofocus as well as DepthPicking. It is visible by uncommenting <PerspectiveCamera/> in the sandbox demo. As I would like to use both drei's camera and postprocessing's effects, insights on why drei's camera does not work with DepthPickingPass are very much welcome!

Also, would it make sense to have a react-postprocessing DepthPickingPass component?