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
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 installNow you can run either demo:
# with post-processing
npm run start
# without post-processing
npm run no-postOr build the static site:
npm run buildFor an optimized Fast Approximate Antialiasing (FXAA) shader, we use three-shader-fxaa.
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.
