React-Three-Fiber custom PostProcessing render target solution (Without using the EffectComposer)

Do you want to use a simple fragment shader to spice up your scene without loosing a lot of performance? Or simply want to avoid big imports that you just don’t understand on what they actually do?

Well I got news.

First, save this PostFX file in the src/ folder:

(Shoutout to Luigi for that code)

Keep in mind that this works well, but it isn’t react hooks yet. If someone wants to convert it to react hooks, I’m happy to help :)

Then we have to decouple the renderer from React and pipe the scene and camera through PostFX. We are doing this with a component:

function Effect() {
  const { gl, scene, camera, size } = useThree()
  const renderer = new PostFX(gl)
  return useFrame((state) => {
    renderer.render(scene, camera)
  }, 1)
}

After that, simply put the Component inside your Canvas.

<Canvas>
  <Effect />

Final result:

Now you can simply push some mousemovement values or time values to the PostFX component.