Introduction 00:00

Post-processing also benefits from the React and R3F system, as it got easier to implement but is also optimised in some ways.

In this lesson, we are going to learn how it differs from the post-processing techniques we’ve covered before, implement a bunch of effects and even create our own effect.

Before starting 01:20

In the starter file of this lesson, we are using dependencies that rely on old versions of other dependencies.

When running npm install, you might receive an error about dependencies not being able to be resolved.

Simply ignore this by adding -force at the end: npm install -force

The issue with post-processing 02:41

In the previous lessons, we used post-processing by adding passes.

Those passes had their own code and were completing one or multiple renders in order to get the wanted result.

Then the next pass would do the same, and again, and again.

Those passes all occurred independently and some of them were doing the same renders (depth renders, normal renders, etc.) which resulted in performance issues and limited the number of passes we could add before getting a frame rate drop.

The solution 04:31

And this is exactly what Post Processing is trying to resolve.

The various passes will be merged into the least number of passes possible. Actually we don’t talk about passes anymore, but we talk about “effects”.

Those effects will be merged together into one or multiple passes (if needed) automatically while keeping the order in which we added them.

We can even choose the blending of each effect (more about that later).

And, as you might’ve guessed, we can use Post Processing in R3F with @react-three/postprocessing.

Setup 06:51

In the starter, we have the classic orange sphere, purple cube and green floor.

We also have a directional light source and an ambient light source.

The @react-three/drei dependency is already installed within the project and we are using the OrbitControls helper to be able to move the camera around.

We also have <Perf /> from r3f-perf in order to keep an eye on performance.

Implement 07:50

We need two dependencies, @react-three/postprocessing, and postprocessing.

But for now, the only one we need to install is @react-three/postprocessing since this dependency will also install postprocessing.

In the terminal, use npm install @react-three/postprocessing@2.6 (we force the versions to prevent surprises, you can ignore potential vulnerability warnings).

In Experience.js, import EffectComposer from @react-three/postprocessing:

import { EffectComposer } from '@react-three/postprocessing'

Although it’s the same name as the EffectComposer we used in native Three.js, it’s not the same class.

Now, add it to the JSX:

export default function Experience()
{
    return <>

        <EffectComposer>
        </EffectComposer>

        {/* ... */}

    </>
}

Adding effects is as simple as importing the effect and adding it to the <EffectComposer>.

We don’t even need to add the first render, since Post Processing will take care of that.

Be careful, in the following parts, you might have to reload the page after tweaking or adding an effect.

Multisampling

We can set various attributes to the <EffectComposer>, but the most interesting one is multisample.

As discussed in the previous lessons, multi-sampling is used to prevent the aliasing effect (the little stairs on the edges of geometries).

By default, its value is at 8 and we can lower it down to 0 in order to disable it completely.

<EffectComposer multisampling={ 0 }>
</EffectComposer>

(Note that you will probably not see a big difference in the screenshot above because of the image compression)

Performance should be better when disabling multi-sampling, but we don’t really care about that in this lesson, so let’s remove it and keep the default value:

<EffectComposer>
</EffectComposer>

Finding effects and how to implement them 13:08

In the following part of the lesson, we are going to test a bunch of effects for the sake of learning.

We are going to set very specific values without going too much into detail because it would take ages and be boring.

But you should roam the documentations in order to discover the various effects, test them and see how they work.

Unfortunately, those documentations (though useful) are a bit messy and spread across react-postprocessing and Post Processing, which means you’ll have to dig a little in order to find what you are looking for.

Here are the links that you might need.

Post Processing:

• The repository: https://github.com/pmndrs/postprocessing
• The documentation (generated from the code): https://pmndrs.github.io/postprocessing/public/docs/
• A demo page (you can change the effect within the debug UI): https://pmndrs.github.io/postprocessing/public/demo/

React-postprocessing:

• The repository: https://github.com/pmndrs/reactpostprocessing
• The list of effects implemented from postprocessing to React postprocessing: https://github.com/pmndrs/react-postprocessing/blob/master/api.md
• The documentation (very similar to the repo, but more user-friendly): https://docs.pmnd.rs/react-postprocessing/introduction

Vignette effect 18:01

Let’s start with a very common effect, the Vignette effect.

Vignette will make the corners of the render a little darker.