vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.24k stars 284 forks source link

Add BokehShader(2) to post processing #407

Open genox opened 1 year ago

genox commented 1 year ago

Hi,

I am trying to achieve a nice bokeh effect for my 3D graph. I got the "easy" one working based on https://github.com/mrdoob/three.js/blob/dev/examples/webgl_postprocessing_dof.html but I can't manage to get a nice sharp plane based on the viewing distance (camera -> target). Everything is either completely blurry or some parts are sharp but parts of the sprite labels are blurry while others aren't (as if two textures are displayed on top of each other with 0 distance, that kind of random texture flicker). The focal plane needs to change dynamically based on the selected node, too, ideally, and there should be a parametrised fall-off range.

I wanted to try another way and it seems https://github.com/mrdoob/three.js/blob/dev/examples/webgl_postprocessing_dof2.html is more advanced and would probably help me as it provides (I think) better controls but I am struggling to add this to force-graph-3d. Difficult to figure out how to include that in the component lifecycle, especially how to access the uniforms properties etc. I was digging through objects (scene, etc.) but I am not sure if this is actually a smart idea to handle in a useEffect as it gets very complicated.

The second approach also seems to be tied in as a shader, rather than a post processing effect, and I honestly dont know if its possible to add this to force-graph - or how.

I would greatly appreciate some guidance. I think I am in over my head on this one :P

genox commented 1 year ago

I switched to using your excellent lower level library (three-forcegraph). :) Looks like it's easier to handle things on this level for heavy customisation.