Post Processing via 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'

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

The EffectComposer manages and runs passes. It is common practice to use a RenderPass as the first pass to automatically clear the buffers and render a scene for further processing. Fullscreen image effects are rendered via the EffectPass.

import { BloomEffect, EffectComposer, EffectPass, RenderPass } from 'postprocessing'