Post Processing
A post processing library that provides the means to implement image filter effects for three.js.
Demo · Sandbox · Documentation · Wiki
Installation
This library requires the peer dependency three.
npm install three postprocessing
Usage
Please refer to the usage example of three.js for information about how to setup the renderer, scene and camera.
import { Clock, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
const composer = new EffectComposer(new WebGLRenderer());
const camera = new PerspectiveCamera();
const scene = new Scene();
const clock = new Clock();
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect()));
(function render() {
requestAnimationFrame(render);
composer.render(clock.getDelta());
}());
Output Encoding
Simply set WebGLRenderer.outputEncoding
to the desired target color space and postprocessing
will follow suit. Built-in passes automatically encode colors without any unnecessary overhead and internal render operations are always performed in linear color space. It's recommended to enable high precision frame buffers when using sRGBEncoding
:
import { HalfFloatType } from "three";
const composer = new EffectComposer(renderer, {
frameBufferType: HalfFloatType
});
Performance
This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.
All fullscreen render operations also use a single triangle that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders.
Included Effects
The total demo download size is about 60 MB
.
- Antialiasing
- Bloom
- Blur
- Color Depth
- Color Grading
- Color Average
- Sepia
- Brightness & Contrast
- Hue & Saturation
- Depth of Field
- Vignette
- Glitch
- Chromatic Aberration
- Noise
- God Rays
- Pattern
- Dot-Screen
- Grid
- Scanline
- Pixelation
- Outline
- Shock Wave
- SSAO
- Texture
- Tone Mapping
Custom Effects
If you want to learn how to create custom effects or passes, please check the Wiki.
Contributing
Please refer to the contribution guidelines for details.
License
This library is licensed under the Zlib license.
The original code that this library is based on, was written by mrdoob and the three.js contributors and is licensed under the MIT license.
The noise and scanline effects incorporate code written by Georg Steinrohder and Pat Shearon which was released under the Creative Commons Attribution 3.0 License.