This library requires the peer dependency three. Check the release notes for supported versions.

npm install three postprocessing

To get started, pick a bundler of your choice:

• esbuild
• swc
• rollup
• webpack
• parcel

This list is not exhaustive, so feel free to look around for another tool that best suits your needs. For more information about configuration, features and plugins, see the official documentation of your chosen bundler.

The following example uses esbuild for bundling.

package.json

{
	"scripts": {
		"build": "esbuild src/app.js --bundle --minify --outfile=dist/app.js"
	},
	"dependencies": {
		"postprocessing": "x.x.x",
		"three": "x.x.x"
	},
	"devDependencies": {
		"esbuild": "x.x.x"
	}
}

src/app.js

import { RenderPipeline } from "postprocessing";
console.log(RenderPipeline);

Install node.js and use the command npm run build to generate the code bundle. Include the bundle in an HTML file to run it in a browser.

Postprocessing extends the common rendering workflow with fullscreen image manipulation tools. The following WebGL attributes should be used for an optimal workflow:

import { WebGLRenderer } from "three";

const renderer = new WebGLRenderer({
	powerPreference: "high-performance",
	antialias: false,
	stencil: false,
	depth: false
});

RenderPipelines are used to group passes. Common setups will only require one pipeline that contains a ClearPass, a GeometryPass and one or more EffectPass instances. The latter is used to render fullscreen Effects. Please refer to the three.js manual for more information on how to setup the renderer, scene and camera.

import {
	BloomEffect,
	ClearPass,
	EffectPass,
	GeometryPass,
	RenderPipeline
} from "postprocessing";

const container = document.querySelector(".viewport");
container.prepend(renderer.domElement);

const scene = new Scene();
const camera = new PerspectiveCamera();

const pipeline = new RenderPipeline(renderer);
pipeline.addPass(new ClearPass());
pipeline.addPass(new GeometryPass(scene, camera, { samples: 4 }));
pipeline.addPass(new EffectPass(new BloomEffect()));

function onResize(): void {

	const width = container.clientWidth, height = container.clientHeight;
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	pipeline.setSize(width, height);

}

window.addEventListener("resize", onResize);
onResize();

requestAnimationFrame(function render(timestamp: number): void {

	requestAnimationFrame(render);
	pipeline.render(timestamp);

});

New applications should follow a linear workflow for color management and postprocessing supports this automatically. Simply set WebGLRenderer.canvasColorSpace to SRGBColorSpace and postprocessing will follow suit. Built-in passes automatically encode colors when they render to screen and internal render operations are always performed in the most appropriate color space.

Postprocessing uses UnsignedByteType sRGB frame buffers to store intermediate results due to good hardware support and resource efficiency. This is a compromise because linear results normally require at least 12 bits per color channel to prevent color degradation and banding. With low precision sRGB buffers, colors will be clamped to [0.0, 1.0] and information loss will shift to the darker spectrum which leads to noticable banding in dark scenes. Linear, high precision HalfFloatType buffers don't have these issues and are the preferred option for HDR-like workflows on desktop devices. You can enable high precision frame buffers like so:

import { HalfFloatType } from "three";

const geoPass = new GeometryPass(scene, camera, {
	frameBufferType: HalfFloatType
});

See three's color management manual for more information on the topic.