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:
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.
