Selective BLOOM

by [Twiner]

HTML

<script src='https://www.airtightinteractive.com/demos/selective-fx/lib/three/three.min.js'></script>
<script src='https://www.airtightinteractive.com/demos/selective-fx/lib/three/OrbitControls.js'></script>
<script src="https://www.airtightinteractive.com/demos/selective-fx/lib/three/shaders/CopyShader.js"></script>
<script src="https://www.airtightinteractive.com/demos/selective-fx/lib/three/shaders/RGBShiftShader.js"></script>
<script src="https://www.airtightinteractive.com/demos/selective-fx/lib/three/postprocessing/EffectComposer.js"></script>
<script src="https://www.airtightinteractive.com/demos/selective-fx/lib/three/postprocessing/RenderPass.js"></script>
<script src="https://www.airtightinteractive.com/demos/selective-fx/lib/three/postprocessing/ShaderPass.js"></script>

<script src="https://www.airtightinteractive.com/demos/selective-fx/AdditiveBlendShader.js"></script>

CSS

body {
  font-family: sans-serif;
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#info {
  color: #fff;
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;

}

JavaScript

/* global THREE */

/*

  Selectively apply Post-Processing (PPO) to 1 object.

  We render 2 scenes with the same camera, then Additively Blend the 2 scenes.

  1st scene (ppoRGB.scene) contains a testcard plane. ppoRGB applys RGBShift FX.
  2nd scene (ppoFinal.scene) contains a wireframe cube.  ppoFinal has no effects and additively blends the results of 1st scene.

  Using THREE.JS v79

  @author @felixturner | http://airtight.cc/

*/

var camera, renderer;
var boxMesh;
var controls;

var ppoRGB = {};  //testcard + rgbshift
var ppoFinal = {};	//wireframe + blend

init();
animate();

function init() {

  //INIT RENDERER + CAMERA
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set(0,200,500);

  //controls
  controls = new THREE.OrbitControls( camera, renderer.domElement );

  //INIT RGB SCENE
  ppoRGB.scene = new THREE.Scene();

  //add testcard plane
  var tl = new THREE.TextureLoader();
  var map = tl.load( 'https://www.airtightinteractive.com/demos/selective-fx/testcard_1024.jpg');
  var cardMaterial = new THREE.MeshBasicMaterial( { map: map , side: THREE.DoubleSide} );
  var planeGeom  = new THREE.PlaneGeometry( 500, 500 ,5,5);
  var cardMesh = new THREE.Mesh( planeGeom, cardMaterial );
  ppoRGB.scene.add( cardMesh );

  //INIT FINAL SCENE
  ppoFinal.scene = new THREE.Scene();

  //add wireframe box
  var boxMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true , wireframeLinewidth: 3} );
  var boxGeom  = new THREE.BoxGeometry( 300, 300, 300);
  boxMesh = new THREE.Mesh( boxGeom, boxMaterial );
  ppoFinal.scene.add( boxMesh );


  //INIT RGB PPO
  //init ppoRGB (render testcard + RGB shift)
  ppoRGB.renderPass = new THREE.RenderPass( ppoRGB.scene, camera );
 ...