How to use the postprocessing.EffectComposer function in postprocessing

To help you get started, we’ve selected a few postprocessing examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github moxuse / Kusabi / src / RenderView.ts View on Github external
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_,
github ronik-design / love.ronikdesign.com / src / webgl / WebGLApp.js View on Github external
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();
  }
github Jeremboo / scribble-lab / scribbles / blob&metaballs / organism / app.js View on Github external
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);
github Jeremboo / scribble-lab / scribbles / codevember2017 / 27_metaballsandbloom / app.js View on Github external
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({
github Jeremboo / scribble-lab / scribbles / codevemenr2017 / maskedLines / app.js View on Github external
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);
  }
github Jeremboo / scribble-lab / scribbles / app.js View on Github external
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
github luan007 / libao / three-helper.js View on Github external
export function threeComposerEx(renderer, scene, camera) {
    renderer = renderer || _cache.renderer;
    scene = scene || _cache.scene;
    camera = camera || _cache.camera;
    var composer = new post_pss.EffectComposer(renderer, {
        depthTexture: true
    });
    composer.setSize(renderer.width, renderer.height);
    renderer.onResize((width, height) => {
        composer.setSize(width, height);
    });
    _cache.composer = composer;
    return composer;
}
github typpo / spacekit / src / Simulation.js View on Github external
height: 240,
      luminanceThreshold: 0.2,
    });
    bloomEffect.inverted = true;
    bloomEffect.blendMode.opacity.value = 2.3;

    const renderPass = new RenderPass(this._scene, camera);
    renderPass.renderToScreen = false;

    const effectPass = new EffectPass(
      camera,
      /*smaaEffect, godRaysEffect*/ bloomEffect,
    );
    effectPass.renderToScreen = true;

    const composer = new EffectComposer(this._renderer);
    composer.addPass(renderPass);
    composer.addPass(effectPass);
    this._composer = composer;
  }