How to use postprocessing - 10 common examples

this.defer.then(() => {
      const pass = new RenderPass(this.scene, this.camera.native);

      // TODO: Support for effects.

      this.composer.addPass(pass);
      this.currentPass = pass;
    });

this.defer.then(() => {
      const pass = new RenderPass(this.scene, this.camera.native);

      // TODO: Support for effects.

      this.composer.addPass(pass);
      this.currentPass = pass;
    });

this.scene.background = new Color(
      parseInt(config.renderView.backgroundColor)
    );

    this.scene.add(this.rotateScene);

    this.intiLight();

    window.addEventListener("resize", this.onResize.bind(this), false);
    this.onResize();

    const postEffects = [];
    let postEffects_;
    if (config.renderView.postProcessing) {
      this.effectComposer = new EffectComposer(this.renderer);
      // observer for postEffects changes
      postEffects_ = postEffectsPortProxy(postEffects, (target, length) => {
        if (0 < length) {
          this.updatePostProcessing();
        }
      });

      // timer for postEffects
      window.d3.timer(elapse => {
        this.elapse = elapse;
      });
    }
    return {
      targets: [],
      scene: this.rotateScene,
      postEffects: postEffects_,

this.time = 0;
    this._running = false;
    this._lastTime = rightNow();
    this._rafID = null;

    this.scene = new THREE.Scene();

    // fog
    this.scene.fog = new THREE.Fog(0x000000, 0, 60);

    // handle resize events
    window.addEventListener('resize', () => this.resize());
    window.addEventListener('orientationchange', () => this.resize());

    this.composer = new EffectComposer(this.renderer);
    this.composer.addPass(new RenderPass(this.scene, this.camera));

    const pass = new BloomPass({resolution: 0.2, kernelSize: 1, intensity: 2.5, distinction: 0.1});
    pass.renderToScreen = true;

    this.composer.addPass(pass);
    this.clock = new Clock();

    // force an initial resize event
    this.resize();
  }

import rm from 'RayMarcher';
import Organism from './Organism';

import { Clock } from 'three';

import {
  EffectComposer, RenderPass, BlurPass, BloomPass,
} from 'postprocessing';

// https://gitlab.com/Jeremboo/watermelon-sugar/blob/develop/src/js/webgl/index.js
const organism = new Organism();
organism.initGUI();

// Post processing
const clock = new Clock();
const composer = new EffectComposer(rm.renderer, {
  // stencilBuffer: true,
  // depthTexture: true,
});
composer.setSize(window.innerWidth, window.innerHeight);
const renderPass = new RenderPass(rm.scene, rm.renderCamera);
// renderPass.renderToScreen = true;
composer.addPass(renderPass);

const bloomPass = new BloomPass({
  intensity: 5,
  resolution: 5,
  kernelSize: 3,
  distinction: 0.9,
});
bloomPass.renderToScreen = true;
composer.addPass(bloomPass);

initPostprocessing() {
  this._composer = new EffectComposer(this.renderer, {
    // stencilBuffer: true,
    // depthTexture: true,
  });

  // *********
  // PASSES
  const renderPass = new RenderPass(this.scene, this.camera);
  // renderPass.renderToScreen = true;
  this._composer.addPass(renderPass);

  // TODO add new custo pass (MASK PASS)
  const incrustationPass = new MetaballPass();
  // incrustationPass.renderToScreen = true;
  this._composer.addPass(incrustationPass);

  const bloomPass = new BloomPass({

initPostprocessing() {
    this._composer = new EffectComposer(this.renderer, {
      // stencilBuffer: true,
      // depthTexture: true,
    });

   // *********
   // PASSES
    const renderPass = new RenderPass(this.scene, this.camera);
    // renderPass.renderToScreen = true;
    this._composer.addPass(renderPass);

    const incrustationPass = new IncrustationPass();
    incrustationPass.renderToScreen = true;
    this._composer.addPass(incrustationPass);
  }

initPostprocessing() {
    this._composer = new EffectComposer(this._renderer, { depthTexture: true });

    const render = new RenderPass(this.scene, this.camera);
    // render.renderToScreen = true;
    this._composer.addPass(render);

    // const savePass = new SavePass();
    // this._composer.addPass(savePass);


    // BLUR
    // const blurPass = new BlurPass();
    // blurPass.renderToScreen = true;
    // this._composer.addPass(blurPass);

    // horizontal blur shader
    const blurFactor = 3 // make it an even integer

scene.add(camera);
  // set up controls
  if (CONTROL_DEBUG) {
    // eslint-disable-next-line
    const controls = new OrbitControls(camera);
  }

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  /** POST PROCESSING ( BLOOM EFFECT ) * */
  composer = new EffectComposer(renderer);
  const renderPass = new RenderPass(scene, camera);

  const bloomPass = new EffectPass(camera, new BloomEffect({
    distinction: 0.1,
  }));
  bloomPass.renderToScreen = true;
  composer.addPass(renderPass);
  composer.addPass(bloomPass);

  /** BASIC SCENE SETUP * */

  // add a point light to follow the dog
  light = new THREE.PointLight(0x6eabfb, 0.7, 8);
  light.position.y = 5;
  scene.add(light);
  bottomLight = new THREE.PointLight(0xff0000, 0.7, 8);
  bottomLight.position.y = -5;
  scene.add(bottomLight);

initPostprocessing() {
    this._composer = new EffectComposer(this.renderer, {
      // stencilBuffer: true,
      // depthTexture: true,
    });

   // *********
   // PASSES
    const renderPass = new RenderPass(this.scene, this.camera);
    // renderPass.renderToScreen = true;
    this._composer.addPass(renderPass);

    const incrustationPass = new IncrustationPass();
    incrustationPass.renderToScreen = true;
    this._composer.addPass(incrustationPass);
  }