Three.js Postprocessing renderer

Questions
,
1

Good day.

Working with post-processing bloom.
the question is that the glow effect itself only works with background of the render. but I have a floor that is a different color and should have a glow on it too.

rend
rend2054×1109 149 KB

floor
floor2082×1100 136 KB

2

What do you mean by “floor” :thinking: ?

[…] glow effect itself only works with background of the render […]

I might be wrong, but that’s a requirement for other renderers as well (ex. Blender will also not render glow on transparent pixels.) These pixels are simply discarded.

3

another object. in my case it is planegeometry, but it may be simple scene.background.

4 
import { BloomEffect, EffectComposer, EffectPass, RenderPass} from "postprocessing";
import { Clock } from "three";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color(0x130135);

let renderer = new THREE.WebGLRenderer({antialias:true

});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x130135 );


let doc = document.querySelector('.main');
doc.appendChild( renderer.domElement );


window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let height = window.innerHeight;
     renderer.setSize(width,height);
     camera.aspect = width / height;
     camera.updateProjectionMatrix();
});


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

const geometry = new THREE.SphereGeometry( 5, 32, 32 );
const material = new  THREE.MeshBasicMaterial({ color: "red", wireframe: false,});
const mesh = new THREE.Mesh(geometry,material);

scene.add(mesh);

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect({
     luminanceThreshold: 0.0,
     luminanceSmoothing: 0.0,
     height: 100
})));


const clock = new Clock();
camera.position.z = 20;



const animate = function () {
     requestAnimationFrame( animate );

     controls.update();
     composer.render(clock.getDelta());
     renderer.render( scene, camera );

};

animate();