Hello everyone, I have troubles using Bloom Effect! I want to create an Interior Scene and i’m facing a very annoying problem (I’ve searched through the internet and can’t find any information on how to deal with this error!)
For Example I have made a jsfiddle here: http://jsfiddle.net/twiner/w9ntej3h/
I have a white wall and a red geometry and I want to achieve the effect of glowing, but I don’t want the white wall to be affected by the glow.(because with too much glowing,it looks like a White LED PANEL and not like a Wall)
I have played around with bloomStrength - bloomRadius - bloomThreshold but in all cases, the wall is the first thing that affected(because of its color) and after that red geometry starts to glow.
I wanted to know is there any solution that the Bloom Effect affects more on that red geometry?
And another question… Is it possible to have 2 scenes and composers? i mean one of them for the wall (which i dont want to be affected by Bloomeffect and i want to use only RenderPass) and the other one for the red geometry which i want to glow (Bloomeffect on composer) and then i want to render both of scenes together.
The UnrealBloomPass that you’re using was written to apply to the entire canvas in a single step, it wasn’t written to influence individual objects in a scene. If you want to apply bloom to specifig meshes, you’d need to write your own post-processing sequence that follows something like this:
Render opaque objects to a WebGLRenderTarget
Render glowing objects, applying bloom, and save it to another WebGLRenderTarget
Use both target.textures to render an additive combination of the two to the canvas.
You would probably run into some depth problems that would need further cleanup. Maybe you can keep the depthBuffer intact between step 1 and step 2 (.autoClearDepth = false) so you get accurate intersections between opaque and glowing objects.
No, I haven’t seen a live example of this. You would probably have to write it on your own.
The pseudocode would go something like this.
var renderTarget1 = new THREE.WebGLRenderTarget(); // <- Opaque objects
var renderTarget2 = new THREE.WebGLRenderTarget(); // <- Glowing objects
// Set composer (for bloom effect) to render to target2
var composer = new THREE.EffectComposer(renderer, renderTarget2);
composer.addPass(bloomPass);
update() {
// Set camera to render opaque layers
camera.layers.enable( 0 );
camera.layers.disable( 1 );
// Renders opaque to texture in renderTarget1
renderer.render(scene, camera, renderTarget1);
// Set camera to render glowing objects
camera.layers.enable( 1 );
camera.layers.disable( 0 );
// Render glowing scene
composer.render();
}
To blend these two renders you could write your own shaders. Alternatively, you could create a second setup with two planes:
scene2
camera2 (orthographic camera so the planes lign up)
planeOpaque (set texture to renderTarget1.texture)
planeGlow (set texture to renderTarget2.texture, transparent: true, blending: THREE.AdditiveBlending)