Home

Awesome

Post-Processing in ThreeJS

images

<sub>before and after post-processing – click here for a live demo</sub>


This is an example of post-processing effects in ThreeJS, including FXAA and Lookup Table color transforms.

This example also provides some insight into the development workflow at Jam3, and how we scale and re-use code across some of our WebGL experiences.

To build this demo, we used the following tools:

We bring together some of the following modules:

Running from Source

You can git clone this repo to run from source.

git clone https://github.com/Jam3/threejs-post-process-example.git
cd threejs-post-process-example

# install dependencies
npm install

Now you can run either demo:

# with post-processing
npm run start

# without post-processing
npm run no-post

Or build the static site:

npm run build

Effects

FXAA

For an optimized Fast Approximate Antialiasing (FXAA) shader, we use three-shader-fxaa.

Color Lookup Transforms

We use glsl-lut for the efficient color lookup transforms.

The images/ folder includes various lookup table examples, including the "identity" lookup table, which can be adjusted for your own effects.

Further Reading