Repository files navigation

A post processing library forthree.js.

Demo · Sandbox · Documentation · Wiki

This library requires the peer dependencythree.

npm install three postprocessing

Post processing introduces the concept of passes and effects to extend the common rendering workflow with fullscreen image manipulation tools. The following WebGL attributes should be used for an optimal post processing workflow:

import{WebGLRenderer}from"three";constrenderer=newWebGLRenderer({powerPreference:"high-performance",antialias:false,stencil:false,depth:false});

TheEffectComposer manages and runs passes. It is common practice to use aRenderPass as the first pass to automatically clear the buffers and render a scene for further processing. Fullscreen image effects are rendered via theEffectPass. Please refer to theusage example of three.js for more information on how to setup the renderer, scene and camera.

import{BloomEffect,EffectComposer,EffectPass,RenderPass}from"postprocessing";constcomposer=newEffectComposer(renderer);composer.addPass(newRenderPass(scene,camera));composer.addPass(newEffectPass(camera,newBloomEffect()));requestAnimationFrame(functionrender(){requestAnimationFrame(render);composer.render();});

New applications should follow alinear workflow for color management and postprocessing supports this automatically. Simply setWebGLRenderer.outputColorSpace toSRGBColorSpace and postprocessing will follow suit.

Postprocessing usesUnsignedByteType sRGB frame buffers to store intermediate results. This is a trade-off between hardware support, efficiency and quality since linear results normally require at least 12 bits per color channel to preventcolor 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 precisionHalfFloatType 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 as follows:

import{HalfFloatType}from"three";constcomposer=newEffectComposer(renderer,{frameBufferType:HalfFloatType});

Tone mapping is the process of converting HDR colors to LDR output colors. When using postprocessing, thetoneMapping setting on the renderer should be set toNoToneMapping (default) and high precision frame buffers should be enabled. Otherwise, colors will be mapped to[0.0, 1.0] at the start of the pipeline. To enable tone mapping, use aToneMappingEffect at the end of the pipeline.

Note that tone mapping is not applied to the clear color when using only the renderer because clearing doesn't involve shaders. Postprocessing applies to the full input image which means that tone mapping will also be applied uniformly. Consequently, the results of tone mapping a clear color background with and without postprocessing will be different, with the postprocessing approach being correct.

This library provides anEffectPass 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 ownblend function.

All fullscreen render operations also use asingle 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.

Performance Test

The total demo download size is about60 MB.

• Antialiasing
• Bloom
• Blur
• Color Depth
• Color Grading
  • Color Average
  • Sepia
  • Brightness & Contrast
  • Hue & Saturation
  • LUT
• Depth of Field
  • Vignette
• Glitch
  • Chromatic Aberration
  • Noise
• God Rays
• Pattern
  • Dot-Screen
  • Grid
  • Scanline
• Pixelation
• Outline
• Shock Wave
  • Depth Picking
• SSAO
• Texture
• Tone Mapping

If you want to learn how to create custom effects or passes, please check theWiki.

Please refer to thecontribution guidelines for details.

This library is licensed under theZlib license.

The original code that this library is based on, was written bymrdoob and thethree.js contributors and is licensed under theMIT license.