Repolode
Submit
pmndrs

pmndrs/postprocessing

A post processing library for three.js that chains fullscreen image effects such as bloom, SSAO and color grading on WebGL scenes.

View on GitHub
Stars
2,957
Forks
258
Open issues
30
Last commit
6 days ago

What is it?

postprocessing is a JavaScript library for adding fullscreen post-processing effects to three.js scenes. Post-processing runs after a scene is rendered, applying image-space effects to the final frame. The library is organized around an EffectComposer that runs a sequence of passes, with a RenderPass to draw the scene and EffectPass to apply effects.

EffectPass merges any combination of effects into as few render operations as possible, so many effects can be combined without the cost of chaining a separate pass for each one. Each effect can define its own blend function. Fullscreen operations use a single triangle covering the screen rather than a quad. The library also supports high-precision HalfFloat frame buffers for HDR-style workflows and includes a ToneMappingEffect for converting HDR colors to displayable output.

The package includes built-in effects such as bloom, blur, depth of field, glitch, god rays, outline, SSAO, pixelation, LUT-based color grading and vignette. Custom effects and passes can be written, and the project wiki documents the process.

Key features

  • 01Composes many effects into a single EffectPass to reduce render operations.
  • 02Ships built-in effects including bloom, SSAO, depth of field, outline and color grading.
  • 03Supports per-effect blend functions.
  • 04Offers high-precision HalfFloat frame buffers for HDR-style rendering.
  • 05Includes a ToneMappingEffect for HDR-to-LDR conversion.
  • 06Allows custom effects and passes.

Use cases

  • Adding bloom or glow to a three.js product visualization or game scene.
  • Applying retro looks such as scanlines, pixelation or glitch to a WebGL scene.
  • Color grading a 3D scene with LUT files.
  • Building interactive effects like shock waves or outlines on selected objects.

Topics

#threejs#webgl#post-processing#graphics#shaders#real-time#image-effects#2d-filter-effects#composer#effects

FAQ

What is postprocessing?
A post processing library for three.js that chains fullscreen image effects such as bloom, SSAO and color grading on WebGL scenes. postprocessing is a JavaScript library for adding fullscreen post-processing effects to three.js scenes. Post-processing runs after a scene is rendered, applying image-space effects to the final frame. The library is organized around an EffectComposer that runs a sequence of passes, with a RenderPass to draw the scene and EffectPass to apply effects.
Is postprocessing free to use? What license does it have?
postprocessing is open source under the Zlib license. Check the license terms before using it in commercial products.
Is postprocessing still maintained?
Actively maintained. The last commit to postprocessing was on Nov 1, 2026.
What can I use postprocessing for?
Adding bloom or glow to a three.js product visualization or game scene. Applying retro looks such as scanlines, pixelation or glitch to a WebGL scene. Color grading a 3D scene with LUT files. Building interactive effects like shock waves or outlines on selected objects.
Where can I get postprocessing?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/postprocessing

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects