BLOOM ADVANCED

by [Twiner]

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;

var params = {
  bloomStrength: 2.5,
  bloomThreshold: 0.1,
  bloomRadius: 0.1
};

var scene = new THREE.Scene( );


camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
camera.layers.enable(1);

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);

//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 );
wall_mesh.layers.set(0);
scene.add( wall_mesh );
wall_mesh.position.x=0;
wall_mesh.position.z=-660;
wall_mesh.position.y=40;


//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);
mesh.layers.set(1);
scene.add(mesh);



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( 1 / window.innerWidth, 1 / window.innerHeight );

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


var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),params.bloomStrength, params.bloomRadius, params.bloomThreshold);
/* bloomPass.renderToScreen = true; */
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
bloomPass.renderToScreen = true;
composer = new...