layer

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/BlendShader.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>


<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

let camera, scene, renderer, composer, composer2, blendComposer;
let target1, target2;

init();
animate();

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 140, 140, 140 );
	camera.lookAt( 0, -10, 0 );	
/*   camera.layers.enable(1);
  camera.layers.enable(2);
   */  
	scene = new THREE.Scene();
  
  target1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat} );        
  target2 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat } );


      
  const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(1,50,60);
//  normalBox.layers.enable(0);
  scene.add(normalBox);

	const bloomBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "blue"}));
  bloomBox.position.set(1,50,80);
//  bloomBox.layers.enable(1);
  scene.add(bloomBox);
  
  const bloomBox2 = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green"}));
  bloomBox2.position.set(1,50,100);
//  bloomBox2.layers.enable(2);
  scene.add(bloomBox2);



//  renderer = new THREE.WebGLRenderer();
  renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
//  renderer.setClearColor( 0xffffff );
	renderer.autoClear = false;  
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 1, 0 );

	setEffect()
}

function setEffect() { 
 const renderPass = new THREE.RenderPass( scene, camera ); 
 
// for layer1 (blue)
 const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth,...