BLOOM ADVANCED

by blackInk

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.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/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>

CSS

body {
			background-color: #000;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

//var camera, scene, renderer;
var geometry, material, mesh;
var composer, depthRenderTarget, depthShader;

var scene = new THREE.Scene( );


camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
// Light
var ambientLight = new THREE.AmbientLight(0xFFFFFF,0.9);
scene.add(ambientLight);
//Red Geometry (Glow)
geometry = new THREE.ConeGeometry( 200, 400, 10 );
	    var geo = new THREE.EdgesGeometry( geometry );
	  	var mat = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );

mesh = new THREE.LineSegments(geo, mat);
scene.add(mesh);
//White Wall


var wall_geometry = new THREE.BoxBufferGeometry( 1000, 500, 20 );
var wall_mat = new THREE.MeshBasicMaterial( { color: 0xFFFFFF} );
wall_mesh = new THREE.Mesh( wall_geometry, wall_mat );
scene.add( wall_mesh );
wall_mesh.position.x=0;
wall_mesh.position.z=-660;
wall_mesh.position.y=40;



controls = new THREE.OrbitControls( camera, renderer.domElement );
renderScene = new THREE.RenderPass(scene, camera);

var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(0.2 / window.innerWidth, 0.2 / window.innerHeight );

var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;

depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth,  window.innerHeight );
depthRenderTarget.texture.format = THREE.RGBFormat;
depthRenderTarget.texture.minFilter = THREE.NearestFilter;
depthRenderTarget.texture.magFilter = THREE.NearestFilter;
depthRenderTarget.texture.generateMipmaps = false;
depthRenderTarget.stencilBuffer = false;
depthRenderTarget.depthBuffer = true;
depthRenderTarget.depthTexture = new THREE.DepthTexture();
depthRenderTarget.depthTexture.type = THREE.UnsignedShortType;
    

composer = new...