Selective Bloom: Question about different results on different browsers

[tabetVercetti]

Hello :) In my scene, I have loaded an hdri and a model of a car. Id like to implement selective bloom in order to mimic the glow of the brake lights. I added the inner red bulb mesh to the bloom effect using the following line:
bloomEffect.selection.add(lights_rear_bulb);
and bloom was setup up as follows:
const bloomEffect = new SelectiveBloomEffect(scene, camera, { intensity: 10, mipmapBlur: true, luminanceThreshold: 0, luminanceSmoothing: 0.25, radius: 0.2, resolutionScale: 4, });
This allowed the object to bloom but I noticed that the whole HDRI background is blooming like crazy. I did some digging and people proposed that I increase the threshold to a high value, and then push colors on materials I want to bloom over the threshold. So that’s what I did, heres the material of the brake lights which I assign to the mesh “lights_rear_bulb”
const brakeLightMaterial = new THREE.MeshBasicMaterial( { toneMapped: false, color: new THREE.Color().setRGB(400, 0, 0) });
And heres the setup of the bloom:
const bloomEffect = new SelectiveBloomEffect(scene, camera, { intensity: 10, mipmapBlur: true, luminanceThreshold: 50, luminanceSmoothing: 0.25, radius: 0.2, resolutionScale: 4, });
So the threshold is 50, but I noticed that if I push the red color to 51 or 60, no bloom was happening, only until I reached 400. My first question would be if there is any other recommended method of achieving what im trying to achieve: basically, having bloom ONLY for the mesh “lights_rear_bulb”
My second question has to do with the fact that im getting different results on different browsers. The mesh “lights_rear_bulb” is behind a mesh called “lights_rear_glass” which represents the glass cover of the rear lights. The bloom effect passes through it when I use Chrome or Edge, but it gets blocked when I use Firefox. Any idea whats happening there? Is there other big differences I should be aware of when it comes to these popular browsers?

[vanruesc]

This might be relevant: #496 (comment)

[tabetVercetti]

Thank you @vanruesc for the reply. I had a look into the link and I understood that the key points that helped @lviggiani were:

• enabling half float buffers for the composer
• enabling mipmap for bloomEffect

In my code, both of these are enabled. Heres how my composer is set up:
composer = new EffectComposer(renderer, { multisampling: Math.min(4, renderer.capabilities.maxSamples), frameBufferType: HalfFloatType });
as for the bloomEffect setup which enables mipmap, you can find it in my initial comment.

The only difference i saw in @lviggiani 's work is that he worked with emissive values instead of color values. I tried that, and still no change.
So im still trying to understand why one browser would block the bloom of the light bulb if there is a glass cover; while another browser wouldn't? also, Is there any recommended methodology for allowing bloom to pass through a specified object (like the glass in my example)?

[tabetVercetti]

I recently got in contact with @lviggiani to discuss this topic, but we couldn't find the reason why I am getting different results on firefox. So now I created a simple scene to try and find the issue, I would appreciate if people from the community would give me feedback on their thoughts and observations.

The scene has to cubes: one green non-blooming cube and one red blooming cube. The bottom half of the scene is covered by a glass plane. This mimics the scenario of rendering the brake lights of a car.
My goal is to have the blooming of the red cube pass through the glass plane, and also to have the same results across all browsers. At the moment, I am not getting the same results on chrome and firefox, and for both of them, the blooming is not passing through the glass. I have included two ways to define the red cube: either through the emissive method which @lviggiani uses, or through the color method. I have also included a commented line which includes the glass cover in the bloom pass. If you uncomment this line, the bloom passes through the glass on chrome but not on firefox. I am curious to hear your thoughts, thanks in advance! :D

`
//Imports for standard Threejs
import * as THREE from "three";

//Imports for pmndrs post processing library
import {
WebGLRenderer,
HalfFloatType
} from "three";

import {
SelectiveBloomEffect,
BlendFunction,
EffectComposer,
EffectPass,
RenderPass,
ToneMappingEffect,
ToneMappingMode,
} from "postprocessing";

// // // // // Create scene
const scene = new THREE.Scene();

// // // // // Create glass cover
var coverMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0, roughness: 0, transmission: 0.99
} );
var planeGeometry = new THREE.PlaneGeometry(10, 5); // You can adjust the size as needed
var coverPlane = new THREE.Mesh(planeGeometry, coverMaterial);
coverPlane.position.y = -2.3; // Half of the plane's height
coverPlane.position.z = 1
scene.add(coverPlane);

// // // // // Create red cube (GLOWING)
const redGeometry = new THREE.BoxGeometry();

// // Glowing Material: Color Method
// const redMaterial = new THREE.MeshBasicMaterial( {
// toneMapped: false,
// color: new THREE.Color().setRGB(400, 0, 0)
// });

// // Glowing Material: Emissive Method
const redMaterial = new THREE.MeshStandardMaterial({
toneMapped: false,
emissive: "red",
emissiveIntensity: 400
})

const redCube = new THREE.Mesh(redGeometry, redMaterial);
redCube.position.x = -2; // Position to the left
scene.add(redCube);

// // // // // Create green cube (NON-GLOWING)
const greenGeometry = new THREE.BoxGeometry();
const greenMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const greenCube = new THREE.Mesh(greenGeometry, greenMaterial);
greenCube.position.x = 2; // Position to the right
scene.add(greenCube);

// // // // // Create camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000,
);
camera.position.z = 5;

// // // // // Create renderer
const renderer = new WebGLRenderer({
powerPreference: "high-performance",
antialias: false,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// // // // // Create Effects

// // Bloom
const bloomEffect = new SelectiveBloomEffect(scene, camera, {
intensity: 10,
mipmapBlur: true,
luminanceThreshold: 50, // had to increase in order to keep out blooming from hdri
luminanceSmoothing: 0.25,
radius: 0.2,
resolutionScale: 4,
});

bloomEffect.selection.add(redCube);

// Try adding this line
//bloomEffect.selection.add(coverPlane);

// // Tone-Mapping
const TMeffect = new ToneMappingEffect({
blendFunction: BlendFunction.NORMAL,
mode: ToneMappingMode.ACES_FILMIC,
resolution: 256,
whitePoint: 4.0,
middleGrey: 0.6,
minLuminance: 0.01,
averageLuminance: 0.01,
adaptationRate: 1.0
});

const TMeffectPass = new EffectPass(camera, TMeffect);

// // // // // Create Composer
const composer = new EffectComposer(renderer, {
multisampling: Math.min(4, renderer.capabilities.maxSamples),
frameBufferType: HalfFloatType
});

composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloomEffect));
composer.addPass(TMeffectPass);

// // // // // Animation function
const animate = () => {
requestAnimationFrame(animate);

// Rotate cubes
redCube.rotation.x += 0.01;
redCube.rotation.y += 0.01;
greenCube.rotation.x += 0.01;
greenCube.rotation.y += 0.01;

composer.render(scene, camera);
};

// Handle window resize
window.addEventListener("resize", () => {
const newWidth = window.innerWidth;
const newHeight = window.innerHeight;

camera.aspect = newWidth / newHeight;
camera.updateProjectionMatrix();

composer.setSize(newWidth, newHeight);
});

// Start animation
animate();
`

[vanruesc]

My goal is to have the blooming of the red cube pass through the glass plane

Bloom is a blur effect that is applied to the final rendered scene. There is no concept of "passing through" since it's an image effect. Results entirely depend on your rendered scene which serves as the baseline.

If you have a red light (emissive mesh or point light) behind a glass object, the red colors should be visible in the rendered scene. If these color values are higher than the bloom threshold, they'll be blurred. If this is not working, then the red light is not being rendered correctly. Another possibility is that your test device doesn't support high precision frame buffers.

and also to have the same results across all browsers.

If that is not the case with a certain setup, please create a bug report with a simplified reproduction of the issue.