Postprocessing is a JavaScript post-processing library for three.js that gives WebGL developers a passes-and-effects pipeline for applying fullscreen image effects to a rendered scene in real time.

What it is

Postprocessing extends the common three.js rendering workflow with the concepts of passes and effects, turning image manipulation into a structured pipeline rather than a pile of ad-hoc shader calls. The EffectComposer manages and runs passes; a RenderPass is typically added first to clear the buffers and render the scene for further processing, and fullscreen image effects are drawn through an EffectPass that wraps one or more effects such as BloomEffect and ToneMappingEffect. The library lives in the three.js and WebGL ecosystem and is published on npm as postprocessing, with three as a required peer dependency.

The concrete problem it solves is that three.js by itself leaves developers to hand-roll their own fullscreen quad rendering, framebuffer juggling, and effect ordering whenever they want bloom, tone mapping, or any other screen-space treatment. Postprocessing replaces that manual multi-render-target plumbing with a composer that chains passes, and it encodes the surrounding correctness details: the recommended renderer configuration (powerPreference: "high-performance", with antialias, stencil, and depth disabled), automatic handling of a linear colour workflow when WebGLRenderer.outputColorSpace is set to SRGBColorSpace, and the rule that toneMapping on the renderer should stay at NoToneMapping so HDR values are not clipped to [0.0, 1.0] at the start of the pipeline.

Key capabilities

• An EffectComposer that manages and runs an ordered chain of passes, seeded with a RenderPass to clear buffers and render the scene.
• Fullscreen image effects rendered through an EffectPass, for example composer.addPass(new EffectPass(camera, new BloomEffect())).
• Tone mapping as an explicit pipeline stage via a ToneMappingEffect placed at the end of the pipeline, keeping the renderer at NoToneMapping.
• Automatic linear workflow colour management when WebGLRenderer.outputColorSpace is set to SRGBColorSpace.
• Configurable framebuffer precision: UnsignedByteType sRGB buffers by default, or high precision HalfFloatType buffers via new EffectComposer(renderer, { frameBufferType: HalfFloatType }) for HDR-like desktop workflows.
• Documented renderer setup guidance covering powerPreference: "high-performance" and disabled antialias, stencil, and depth for an optimal post-processing workflow.
• Published documentation, a demo, a StackBlitz sandbox, and a project wiki alongside the npm package.

Who uses it and how

• WebGL and three.js developers adding screen-space effects such as bloom to a scene without writing their own framebuffer chain.
• Teams targeting HDR-like output on desktop devices, who enable HalfFloatType frame buffers and move tone mapping out of the renderer into the pipeline.
• Projects that need colour-managed linear workflows, setting outputColorSpace to SRGBColorSpace and letting the library follow suit.
• Developers prototyping against the hosted demo and the StackBlitz sandbox before wiring the composer into their own render loop, which is driven by a requestAnimationFrame loop calling composer.render().
• Consumers of the npm package tracking the CI workflow, version badge, and open issues (30 at the time of writing) when upgrading.

Getting started

Install the library together with its peer dependency using npm install three postprocessing, then create an EffectComposer, add a RenderPass and an EffectPass, and call composer.render() from your animation loop.

How it compares

This registry lists no comparable or competing tools alongside it, so postprocessing stands alone here.

When to use it — and when not

It assumes you already run a three.js WebGL renderer and are willing to adopt the required configuration: antialiasing, stencil, and depth buffers off, renderer tone mapping set to NoToneMapping, and effects arranged explicitly in the pipeline. Be aware of the stated quality trade-off — the default UnsignedByteType sRGB buffers clamp colours to [0.0, 1.0] and can produce noticeable banding in dark scenes unless you opt into HalfFloatType, which costs hardware support and efficiency. The repository has 30 open issues, and the licence is Zlib.

npm install three postprocessing

import { WebGLRenderer } from "three";

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

import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect()));

requestAnimationFrame(function render() {

	requestAnimationFrame(render);
	composer.render();

});

import { HalfFloatType } from "three";

const composer = new EffectComposer(renderer, {
	frameBufferType: HalfFloatType
});