对特定对象应用后处理步骤

Question

基于这个example，我尝试创建一个场景，其中几个对象开花，而其他对象没有。

中间的白色立方体应该只是白色（没有绽放）

我对如何获得我想要的结果感到困惑。例如，我尝试使用白色立方体添加第二个场景，但似乎我无法正确排序。也许我对不同场景的处理是错误的？

实现这种行为的“最佳”方式是什么？我总是最终只看到一个场景，只有白色立方体或 4 个彩色立方体。 （下面的示例显示了所有 atm）

我的小提琴：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();

Answer 1

我曾经遇到过类似的问题。 this comment 的一个例子帮助了我。

请注意，在该示例中，有 2 个场景和 2 个作曲家（最终作曲家将前一个作曲家的输出作为其输入）

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

render() 被两个作曲家调用。

ppoRGB.composer.render();
ppoFinal.composer.render();

此模式允许您有选择地应用后处理效果，并且效果很好。问题在于方法的可扩展性和可能的​​性能。因为当你想应用另一个具有不同效果的对象时，你需要引入第三个场景和第三个作曲家。对于我过去的小项目，我最终得到了 4 个场景和 4 个作曲家......