CodePen Embed - three.js unselective bloom

<div class="world" id="world">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script type="x-shader/x-vertex" id="vertexshader">

    varying vec2 vUv;

    void main() {

      vUv = uv;

      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }

  </script>

  <script type="x-shader/x-fragment" id="fragmentshader">

    uniform sampler2D baseTexture;
    uniform sampler2D bloomTexture;

    varying vec2 vUv;

    void main() {

      gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );

    }

  </script>
 <script src="https://threejs.org/build/three.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/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/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>
  <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
</head>

html,
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(#266F92, #111214);
}

import Stats from 'https://unpkg.com/[email protected]/examples/jsm/libs/stats.module'
//postprocessing
let materials, bloom_pass, bloom_composer, render_scene, final_pass, bloom_layer, dark_material, final_composer;

var enemy = [];
var floor;
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const renderer = new THREE.WebGLRenderer({
	antialias: true,
	alpha: true,
});
renderer.setClearColor(0x01010d, 1);

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 4, 1, 0.1);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x020C26, 0, 250);

const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 0, 20);
camera.lookAt(0, 0, 0);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 1;
controls.maxDistance = 100000;
// controls.addEventListener('change', render);
// camera.addEventListener('change', render);

var stats = new Stats();
stats.domElement.style.left = '12px';
// stats.domElement.style.position = 'relative';
// stats.domElement.style.top = '50px';
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.domElement);

scene.add(new THREE.AmbientLight(0xffffff));

const gridHelper = new THREE.GridHelper(300, 100);
scene.add(gridHelper);
// crée les axes 
const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);


init();
animate()

window.onresize = function () {
	const width = window.innerWidth;
	const height = window.innerHeight;
	camera.aspect = width / height;
	renderer.setSize(width, height);
	bloom_composer.setSize(width, height);
	final_composer.setSize(width, height);
};

function init() {
	//css declarations

	Post_processing();
	create_enemy();
	create_floor();
}

function render() {
	render_with_bloom();
	// render the entire scene, then render bloom scene on top
	final_composer.render();
}



function animate() {
	render()
	stats.update()
	enemy.forEach((i) => {
		i.rotation.y += 0.1
	})
	camera.updateMatrixWorld();
	requestAnimationFrame(animate);
}

function create_floor() {
	floor = new THREE.Mesh(new THREE.BoxGeometry(300, 1, 300), new THREE.MeshBasicMaterial({
		color: "#fff",
		wireframe: false,
		transparent: false,
		opacity: 1,
	}));
	scene.add(floor)
	floor.position.y = -1 - 2
	floor.layers.set(0);
};

function create_enemy() {
	for (let i = 0; i < 50; i++) {
		enemy[i] = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshLambertMaterial({
			color: "black",
			wireframe: false
		}));

		enemy[i].position.z = 0;
		scene.add(enemy[i]);

		var objBack = new THREE.Mesh(new THREE.BoxGeometry(5, 5, .1), new THREE.MeshBasicMaterial({
			color: "white",
			wireframe: false,
			transparent: false,
			opacity: 1,
		}));
		objBack.position.z = -2.51;
		objBack.layers.enable(1);
		enemy[i].add(objBack);

		let pos = random(-100, 100)
		let pos2 = random(-100, 100)
		enemy[i].position.set(pos, random(0, 100), pos2)
		enemy[i].rotation.y = random(0, 2);
	};
};


///////////////////////////////////////////////////////////////////////////////
// POST PROCESSS
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////

function Post_processing() {
	///////////////////////////////////////////////////////////////////////////////
	// postprocessing
	///////////////////////////////////////////////////////////////////////////////
	/*
	bloom_pass
	bloom_composer
	render_scene
	final_pass
	bloom_layer
	dark_material

	*/

	bloom_layer = new THREE.Layers();
	bloom_layer.set(1);

	dark_material = new THREE.MeshBasicMaterial({
		color: 'black'
	});
	materials = {};

	bloom_pass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 4, 1, 0.1);
	// bloom_pass.threshold = params.bloomThreshold;
	// bloom_pass.strength = params.bloomStrength;
	// bloom_pass.radius = params.bloomRadius;

	bloom_composer = new THREE.EffectComposer(renderer);
	bloom_composer.renderToScreen = false;
	render_scene = new THREE.RenderPass(scene, camera);
	bloom_composer.addPass(render_scene);
	bloom_composer.addPass(bloom_pass);

	final_pass = new THREE.ShaderPass(
		new THREE.ShaderMaterial({
			uniforms: {
				baseTexture: {
					value: null
				},
				bloomTexture: {
					value: bloom_composer.renderTarget2.texture
				}
			},
			vertexShader: document.getElementById('vertexshader').textContent,
			fragmentShader: document.getElementById('fragmentshader').textContent,
			defines: {}
		}), 'baseTexture'
	);
	final_pass.needsSwap = true;

	final_composer = new THREE.EffectComposer(renderer);
	final_composer.addPass(render_scene);
	final_composer.addPass(final_pass);
	///////////////////////////////////////////////////////////////////////////////
}

///////////////////////////////////////////////////////////////////////////////
// pour que les objets restent opaques sinon on voit à travers
///////////////////////////////////////////////////////////////////////////////
function render_with_bloom() {

	scene.traverse(darken_non_bloomed);
	bloom_composer.render();
	scene.traverse(restore_material);
}
///////////////////////////////////////////////////////////////////////////////

function darken_non_bloomed(obj) {
	if (obj.isMesh && bloom_layer.test(obj.layers) === false) {
		materials[obj.uuid] = obj.material;
		obj.material = dark_material;
	}
}

///////////////////////////////////////////////////////////////////////////////
// pour restaurer les matériaux sinon tout noir
///////////////////////////////////////////////////////////////////////////////

function restore_material(obj) {
	if (materials[obj.uuid]) {

		obj.material = materials[obj.uuid];
		delete materials[obj.uuid];

	}
}
///////////////////////////////////////////////////////////////////////////////

Run Pen

This Pen is owned by espace3d on CodePen.

See more by @ogames on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.