More customiseable render loop

[briggsyj]

Is your feature request related to a problem? Please describe. More complex post processing in ThreeJS often requires calling multiple Effects Composers within the render loop in a specific order.

For example, I am attempting to use react-force-graph-3d with this provided ThreeJS example for selective bloom effects. https://threejs.org/examples/#webgl_postprocessing_unreal_bloom_selective

I currently cannot see where I would hook into this part of the render lifecycle using the react bindings, or if there is somewhere I can add further code within the underlying threejs instance. I could add further code to requestAnimationFrame, however I am unsure whether I have assurance that my code would be executed after the internal force graph render loop.

Describe the solution you'd like The ideal solution would be an additional prop to pass a callback that

• is provided the internal force graph Effects Composer as an argument
• is called instead of the internal force graph composer.render() function.

Describe alternatives you've considered

• onRenderFramePre/onRenderFramePost are only available for the 2D force graph (I'm using 3D), so I an unable to use those in any capacity
• I've tried hooking in render calls to different events. These were a bit of a long shot, and produced unstable results (others seems to have come across this too - this example results in the rendered bloom composer producing a ghosting effect. https://github.com/vasturiano/3d-force-graph/issues/390)

Update I was able to achieve my desired functionality by working around the limitations of react-force-graph by using OutlinePass instead of a bloom shader, which can be added to the build-in effects composer.

[vasturiano]

@jdeb9 thanks for reaching out.

The current implementation of the postProcessingComposer prop in this component is actually in this other repo: https://github.com/vasturiano/three-render-objects

This only covers a simple interface into the composer deeper logic, and is only customizable to a certain degree. I would suggest that if you need a more complex renderer setup with different composer integration, you setup your own custom ThreeJS scene/camera/renderer scaffold and consume directly from the lower-level three-force-graph module. This should allow you do all you want since you're in full control of your ThreeJS setup.

Alternatively, we can also consider a PR on the three-render-object repo, if you think that the additional customization options can be added without any breaking changes the current API.

[briggsyj]

Thank you for the reply @vasturiano, much appreciated!

I'll have a look at adding functionality to three-render-object so that perhaps a callback can be provided to further control the post processing render order.

This might be straying from this package, but to avoid creating an unnecessary ticket elsewhere - within three-render-objects, the postProcessingComposer is conditionally called here, but is instantiated within init().

Is there a circumstance where tick() would be called before init(), and the composer would be unassigned?