Skip to content

Experience-Monks/threejs-post-process-example

Repository files navigation

Post-Processing in ThreeJS

images

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:

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

About

a tutorial on ThreeJS post processing

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published