Agfdhyk

Based on this example i try to create a scene where several objects get the bloom, and other objects dont.

The white cube in the middle is supposed to be just white (without the bloom)

I'm confused on how to get the result that i want. I tried for example adding a 2nd scene with the white cube but it seems i cant get the order right. Maybe my approch with different scenes is wrong?

Whats the "best" way to achieve this behaviour? I always end up just seeing one scene, just the white cube or the 4 colored ones. (example below shows everything atm)

myFiddle: https://jsfiddle.net/qwertasyx/8qw3ys4z/16/

var scene,scene2,camera, controls, pointLight, stats;    

var composer, renderer, mixer;



var params = {

  exposure: 1,

  bloomStrength: 1.5,

  bloomThreshold: 0,

  bloomRadius: 0

};



var objects = ;



var clock = new THREE.Clock();

var container = document.getElementById( 'container' );



stats = new Stats();

//container.appendChild( stats.dom );



renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.toneMapping = THREE.ReinhardToneMapping;

container.appendChild( renderer.domElement );



scene  = new THREE.Scene();

//scene2 = new THREE.Scene();



camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );

camera.position.set( 2.5,2.5, 10 );

scene.add( camera );

// scene2.add( camera );



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

controls.maxPolarAngle = Math.PI * 0.5;

controls.minDistance = 1;

controls.maxDistance = 10;

controls.target.set(2.5,2.5,0)

controls.update()



// scene.add( new THREE.AmbientLight( 0x404040 ) );



pointLight = new THREE.PointLight( 0xffffff, 1 );

// camera.add( pointLight );



var renderScene  = new THREE.RenderPass( scene, camera );

//var renderScene2 = new THREE.RenderPass( scene2, camera );







var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );

bloomPass.renderToScreen = true;

bloomPass.threshold = params.bloomThreshold;

bloomPass.strength  = params.bloomStrength;

bloomPass.radius    = params.bloomRadius;



composer = new THREE.EffectComposer( renderer );

composer.setSize( window.innerWidth, window.innerHeight );

composer.addPass( renderScene );



composer.addPass( bloomPass );

//composer.addPass( renderScene2 );





//objects

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

var cube = new THREE.Mesh( geometry, material );

cube.vrz = 0.01;

cube.position.x += 5

scene.add( cube );

objects.push(cube)



var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

var cube = new THREE.Mesh( geometry, material );

cube.vrz = 0.01;

cube.position.x += 5

cube.position.y += 5

scene.add( cube );

objects.push(cube)



var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

cube.vrz = 0.01;

cube.position.y += 5

scene.add( cube );

objects.push(cube)



var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

var cube = new THREE.Mesh( geometry, material );

cube.vrz = 0.01;

scene.add( cube );

objects.push(cube)



// cube thats supposed to be not bloomy 

var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );

var cube = new THREE.Mesh( geometry, material );

cube.vrz = 0.01;

cube.position.y += 2.5

cube.position.x += 2.5

scene.add( cube );

objects.push(cube)



var gui = new dat.GUI();



gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {



  renderer.toneMappingExposure = Math.pow( value, 4.0 );



} );



gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {



  bloomPass.threshold = Number( value );



} );



gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {



  bloomPass.strength = Number( value );



} );



gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {



  bloomPass.radius = Number( value );



} );



window.onresize = function () {



  var width = window.innerWidth;

  var height = window.innerHeight;



  camera.aspect = width / height;

  camera.updateProjectionMatrix();



  renderer.setSize( width, height );

  composer.setSize( width, height );



};





function animate() {



  requestAnimationFrame( animate );



  objects.forEach(function(obj){

    obj.rotation.z += obj.vrz;

  });



  stats.update();

  composer.render();



}

animate();

I had a similar problem once. An example from this comment helped me.

Note that in that example there are 2 scenes and 2 composers (the final composer gets output of the previous composer as its input)

ppoFinal.blendPass.uniforms.tAdd.value = ppoRGB.composer.renderTarget2.texture;

and render() is called on both composers.

ppoRGB.composer.render();

ppoFinal.composer.render();

This pattern allows you to apply postprocessing effects selectively and it works well. The problem is the scalability of the method and probably performance. Because when you want to apply another object with yet different effect, you need to introduce 3rd scene and 3rd composer. For my little project in the past I ended up with 4 scenes and 4 composers...