Threejs Postprocessing

Automate and integrate Three.js Postprocessing for advanced visual effects pipelines

Category: productivity Source: cloudai-x/threejs-skills

Three.js Post-Processing is a community skill for applying visual effects after rendering in Three.js, covering bloom, depth of field, color grading, screen-space effects, and custom shader passes for cinematic 3D visuals.

What Is This?

Overview

Three.js Post-Processing provides guidance on applying image effects to rendered 3D scenes using the EffectComposer pipeline. It covers bloom that adds glow to bright areas creating cinematic lighting effects, depth of field that simulates camera focus with background blur, color grading that adjusts tone, saturation, and contrast for visual style, screen-space effects that add ambient occlusion and reflections without ray tracing, and custom shader passes that implement unique visual effects through GLSL fragment programs. The skill helps developers create polished 3D visuals.

Who Should Use This

This skill serves web developers adding visual polish to 3D scenes, creative coders building artistic visual experiences, and product teams enhancing 3D viewer aesthetics.

Why Use It?

Problems It Solves

Raw rendered output looks flat without cinematic post-processing effects. Implementing bloom and blur from scratch requires understanding multi-pass rendering pipelines. Combining multiple effects needs careful ordering and performance management. Custom visual effects require writing shader passes that integrate with the render pipeline.

Core Highlights

Effect composer chains multiple post-processing passes. Bloom pass adds glow to bright areas of the scene. Bokeh pass creates depth-of-field blur effects. Color pass adjusts tone mapping and color balance.

How to Use It?

Basic Usage

// Post-processing setup
import * as THREE from
  'three';
import {
  EffectComposer
} from 'three/addons/'
  + 'postprocessing/'
  + 'EffectComposer.js';
import {
  RenderPass
} from 'three/addons/'
  + 'postprocessing/'
  + 'RenderPass.js';
import {
  UnrealBloomPass
} from 'three/addons/'
  + 'postprocessing/'
  + 'UnrealBloomPass.js';

function setupPost(
  renderer, scene,
  camera
) {
  const composer =
    new EffectComposer(
      renderer);

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

  const bloom =
    new UnrealBloomPass(
      new THREE.Vector2(
        innerWidth,
        innerHeight),
      1.5, 0.4, 0.85);
  bloom.threshold = 0.2;
  bloom.strength = 1.0;
  bloom.radius = 0.5;
  composer.addPass(bloom);

  return composer;
}

// In render loop:
// composer.render();
// instead of:
// renderer.render(
//   scene, camera);

Real-World Examples

// Custom shader pass
import * as THREE from
  'three';
import { ShaderPass }
  from 'three/addons/'
  + 'postprocessing/'
  + 'ShaderPass.js';

const VignetteShader = {
  uniforms: {
    tDiffuse: {
      value: null },
    uIntensity: {
      value: 0.5 },
    uSmoothness: {
      value: 0.8 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position =
        projectionMatrix
        * modelViewMatrix
        * vec4(
          position, 1.0);
    }`,
  fragmentShader: `
    uniform sampler2D
      tDiffuse;
    uniform float
      uIntensity;
    uniform float
      uSmoothness;
    varying vec2 vUv;
    void main() {
      vec4 color =
        texture2D(
          tDiffuse, vUv);
      float dist =
        distance(
          vUv, vec2(0.5));
      float vignette =
        smoothstep(
          uSmoothness,
          uSmoothness
          - uIntensity,
          dist);
      gl_FragColor =
        color * vignette;
    }`
};

function addVignette(
  composer, intensity
) {
  const pass =
    new ShaderPass(
      VignetteShader);
  pass.uniforms
    .uIntensity.value =
    intensity;
  composer.addPass(pass);
  return pass;
}

Advanced Tips

Order passes carefully since render pass must come first and tone mapping should be applied last. Use selective bloom by rendering emissive objects to a separate layer. Reduce effect resolution for performance by passing a smaller render target to the composer.

When to Use It?

Use Cases

Add bloom glow to neon signs and emissive materials in a night scene. Apply depth of field to focus attention on a product model. Create a cinematic color grade with vignette for stylized presentation.

Important Notes

Requirements

Three.js with EffectComposer and pass addons for the effect pipeline. GLSL knowledge for writing custom shader passes beyond built-in effects. Sufficient GPU performance since each pass adds a full-screen render operation.

Usage Recommendations

Do: profile frame rate after adding each effect to measure performance impact. Use render targets with appropriate resolution for the display size. Chain passes in logical order with render first and output correction last.

Don't: stack many effects without considering cumulative performance cost. Forget to resize the composer when the window changes size. Use post-processing for effects that could be achieved more efficiently with material properties.

Limitations

Each post-processing pass adds a full-screen render operation that impacts frame rate. Some effects like screen-space reflections produce artifacts at screen edges. Mobile GPUs may struggle with multiple passes at full resolution.