Blur only selective objects

Hello,

I have a scene that has plane objects behind some imported Objects. Now my goal would be to have the objects in the front blurred and only the planes visible, but when hovering the objects (i.e. when a ray from camera intersects at mouse position) the entire scene becomes blurred and only the hovered object becomes sharp. The effect is visualized in some mock ups I attatched as images below.

Basically achieving something like this using the blur shaders provided by three (horizontal & vertical blur) instead of bloom would already be great:

https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html

Another idea would be to use actual depth of field like in this example and just shift the focus point: three.js webgl - postprocessing - depth-of-field

Here I wouldn’t be sure how to achieve that the all the planes are in focus simultaneously at first tho.

Another trick I could use would be a plane or other object in front of the planes but I wouldn’t know how to blur the objects in the front and not the planes.

Generally I’d be interested in applying a post processing effect only to a subset of objects in a scene so let me know if you have any tricks or examples that do that and of you think my desired effect is achievable using post processing in three. :slight_smile:


here is an open source auto dof, this is based on pmndrs/postprocessing, a vanilla postprocessing alternative and a much better alternative to jsm/effectcomposer. it is maintained, a lot faster and has better effect selection. the demos and that component are react but auto dof is basically just mouse tracking plus a depthpicking pass, the code is on github and it’s not much.