EffectComposer doesn't seem to have any effect (NextJS & postprocessing)

[miguderp]

👋 Hi everyone!

I have a hard time understanding how/why EffectComposer is supposed to work.
Here's a quick Codesandbox to illustrate: https://codesandbox.io/s/nextjs-react-three-fiber-postprocessing-vc1tt

I'm using NextJS as my framework and I want to hook in r3f with postprocessing

I took the RGBShiftShader from the ThreeJS’ repo and I pimped up the amount value to an audacious "10.0" just so I'm certain I don't miss anything.

I can see my two passes under refComposer.current.passes (src/Effects.js) if I console.log() it in my useFrame() but no effect seem to render on the screen.

Is the EffectComposer being rendered too late in the component’s lifecycle? Do I need to hook myself into the main Canvas’ render?

What am I missing here?
Thanks!

[drcmda]

useFrame needs a priority, otherwise it doesnt hijack the renderloop, you call composer.render but r3f is going to render right over it. with a priority nothing else renders, it would stay black if you dont render yourself.

also shaderpass receives arguments, you were putting the shader into "material"

  useFrame(() => refComposer.current.render(), 1);

  return (
    <>
      <OrbitControls />
      <Stats showPanel={0} />
      <effectComposer ref={refComposer} args={[gl]}>
        <renderPass attachArray="passes" scene={scene} camera={camera} />
        <shaderPass attachArray="passes" args={[RGBShiftShader]} renderToScreen />

[miguderp]

Thanks for the help and sorry for the delay; had a bicycle accident so I didn't touch my workstation for a few weeks 🤕

That being said, it works but I had to specify a priority higher than 1… Any ideas why that would be? It's not super important in the end but I feel it should be working with a priority of 1 as well since useFrame has a default value of 0…?

https://codesandbox.io/s/nextjs-react-three-fiber-postprocessing-vc1tt

[drcmda]

hope you're okay!

this is because of stats: https://github.com/react-spring/drei/#%EF%B8%8F-stats-- it's flagged with useFrame. it's on slot 1. the problem with stats is that it needs a full render, so if you use effects it effectively renders the scene twice.

[miguderp]

Great, thanks for the help :)