I’m having some trouble in mixing a render overlay on top of effect composer in R3F, the following is an (updated) example ( by @prisoner849 ) as to what i’d like to achieve but in R3F using postprocessing…
it’s not the exact same effects chain as i’m using in R3F but should be in essence a similar process, are there any examples of making this happen in R3F or any leads on how this would be done in @react-three/fiber with @react-three/postprocessing?
In practice this works but feels like it has performance implications, when using dev tools to record a snapshot of the performance it looks like everything doubles up plus adds other processes to the main thread, would anyone know what sort of performance implications doing this in R3F has and if internal rendering would need to be bypassed if doing this? @drcmda does this seem like the correct way of achieving this?
no performance implications for useframe. }, 1 basically switches off the default render and that’s all, now the contents of your useFrame will run 120 times/sec and you have to render yourself. if something doubles that is something else, perhaps a side-effect, an object created twice etc.
Not bloom in totality, I have a scene i have affected by composer which has a chain of effects, bloom, depth of field and noise, I’m rendering some objects into this scene, i’m then using another overlay scene with some custom text shaders that i don’t want to be affected by composer so it’s just clean, the above seems to be working but the performance is unusable on some laptops and even mobile devices, it’s around 8fps tops even removing bloom and noise passes just rendering depth of feild the performance is pretty much too low, as well as adding <AdaptiveDpr/><AdaptiveEvents/> inside the canvas which don’t seem to have an effect
as it stands I’ve done some profiling, optimizing and testing, on mobile the performance is pretty all over the place, one second it’ll be smooth next it will be choppy then maybe smooth again, if i close the browser and reopen it everything (sometimes) looks pretty smooth until about 20 seconds in and then back to chopy which would indicate a memory leak but i can’t tell how or where, i’ve followed all the pointers on react-three-fiber/advanced/scaling-performance and react-three-fiber/advanced/pitfalls using useMemo where necissary, reusing materials where possible and mutuating useRef.current values in useFrame. if i remove <DepthOfFeild/> it runs rapid but loses the nice aesthetic