ThreeJS Using post-processing

Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical effects like Depth-Of-Field, Bloom, Film Grain or various types of Anti-aliasing. Post-processing is a widely used approach to implement such effects. First, the scene is rendered to a render target which represents a buffer in the video card's memory. In the next step one or more post-processing passes apply filters and effects to the image buffer before it is eventually rendered to the screen.

Workflow

Importing all essential files from the examples directory is the initial stage in the procedure. The following instructions presume you're using the official three.js npm package. The following files are required for our basic demonstration in this article.

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

After all files are successfully imported, we can create our composer by passing in an instance of WebGLRenderer.

const composer = new EffectComposer( renderer );

When using a composer, it's necessary to change the application's animation loop. Instead of calling the render method of WebGLRenderer, we now use the respective counterpart of EffectComposer.

function animate() {


	requestAnimationFrame( animate );


	composer.render();


}

Our composer is now complete, allowing us to configure the post-processing pass chain. These passes are in charge of creating the application's final visual output. They are handled in the order in which they were added or inserted. The instance of RenderPass is executed first, followed by the instance of GlitchPass in our case. The final enabled pass in the chain is shown to the screen automatically. The passes are put up as follows:

const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );


const glitchPass = new GlitchPass();
composer.addPass( glitchPass );

RenderPass is typically placed first in the chain to offer the rendered scene as an input to the following post-processing phase. GlitchPass will apply a wild glitch effect to these image data in our situation. Take a look at this live demonstration to see how it works.

Custom Passes

You may want to develop your own post-processing shader and include it in the chain of post-processing passes on occasion. ShaderPass can be used in this situation. You can use the following code to set up the pass after importing the file and your custom shader.

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';


// later in your init routine


const luminosityPass = new ShaderPass( LuminosityShader );
composer.addPass( luminosityPass );

CopyShader is a file in the repository that can be used as a starting point for creating your own custom shader. Without applying any effects, CopyShader simply replicates the picture contents of the EffectComposer's read buffer to its write buffer.