Post-Processing in ThreeJS

_{before and after post-processing – click here for a live demo}

---

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:

• npm to install dependencies
• budo for a fast development server
• browserify to bundle dependencies
• babelify for ES2015 transpiling
• glslify to inline GLSL shaders into our JavaScript bundle

We bring together some of the following modules:

• three-orbit-controls – a modular OrbitControls for ThreeJS camera
• three-effectcomposer – a modular EffectComposer for ThreeJS post-processing
• three-vignette-background – adds a simple gradient background to your ThreeJS application
• three-shader-fxaa – an optimized FXAA shader for ThreeJS
• glsl-lut – a generic Lookup Table GLSL component for color transforms

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.

• pass.vert – a simple "pass through" vertex shader
• lut.frag – a fragment shader which transforms colors with glsl-lut

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

Further Reading

• npm Modules for Frontend JavaScript
• Modular and Versioned GLSL with glslify
• A Browserify Example for Fast Prototyping