I am using ThreeJS to create a selective bloom effect to showcase glowing parts on an object using an emissive map as a filter. I recently enabled my environment map and noticed that the bloom is affecting the appearance of the scene.background.
This is the code I use to generate the environment map:
function createEnvironment( hdr ) {
new RGBELoader().setDataType( THREE.UnsignedByteType ).load( hdr, function ( texture ) {
const pmremGenerator = new THREE.PMREMGenerator( renderer )
pmremGenerator.compileEquirectangularShader()
const envMap = pmremGenerator.fromEquirectangular( texture ).texture
scene.background = texture;
scene.environment = envMap
texture.dispose()
pmremGenerator.dispose()
} );
}
Currently, the environment map is glowing excessively. I have tried to find a solution, but since the scene.background does not utilize a material, I am unable to resolve the issue.
I am currently at a standstill. How can I prevent the selective bloom from affecting the scene.background?
Here is the code for the selective bloom effect I am using
body{
overflow: hidden;
margin: 0;
}<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 type="module">
// JavaScript code here
</script>