SelectiveBloom is not updating object selection

[danielx-art]

I dont know if this is a bug or if it is an intended behaviour I am not understanding correctly, but it seems that when changing the object selection of the SelectiveBloom effect it adds it to the mesh, instead of updating it. I'm using it in a bigger project, but I was able to reproduce the problem in a quick sandbox example here, and I'm posting the code below as well.

See that when clicking or the first box, you can toggle the bloom on or of as expected, but when clicking on the second box, for some reason the first box blooms as well, even though I have console logged the reference (called objectBloomRef) I'm passing to the SelectiveBloom and it is not holding both of the boxes. So I guess the problem lies deeper or I am stupid. Please help?

CODE:

    function App() {
    
      const lightRef = useRef();
      const objRefOne = useRef();
      const objRefTwo = useRef();
      const objectBloomRef = useRef();
      const [selectedObject, setSelectedObject] = useState(-1);
      const [showBloom, setShowBloom] = useState(false);
    
      useEffect(()=>{
        if(selectedObject == 1) {
          objectBloomRef.current = objRefOne.current;
          setShowBloom(true);
        } else if (selectedObject == 2) {
          objectBloomRef.current = objRefTwo.current;
          setShowBloom(true);
        } else {
          setShowBloom(false);
        }
      }, [selectedObject])
    
      return (
        <Canvas>
    
          <mesh position={[-1, 0, 3]} ref={objRefOne} onClick={()=>{selectedObject == 1 ? setSelectedObject(-1) : setSelectedObject(1)}}>
            <boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
            <meshPhongMaterial color={"#18a36e"} attach="material" />
          </mesh>
    
          <mesh position={[1, 0, 3]} ref={objRefTwo} onClick={()=>{selectedObject == 2 ? setSelectedObject(-1) : setSelectedObject(2)}}>
            <boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
            <meshPhongMaterial color={"#f56f42"} attach="material" />
          </mesh>
    
          <directionalLight color="#ffffff" intensity={1} position={[-1, 2, 4]} ref={lightRef} />
        
          <EffectComposer>
          {showBloom && <SelectiveBloom
            lights={[lightRef]}
            selection={objectBloomRef}
            selectionLayer={10} 
            intensity={2.0}
            luminanceThreshold={0.25} 
            luminanceSmoothing={0.025} 
          />}
          </EffectComposer>
        
        </Canvas>
      )
    }
    
    const rootElement = document.getElementById("root")
    ReactDOM.render(<App />, rootElement)

[drcmda]

i dont have an example for bloom but could you check it against selective outlines? the principles should be the same https://codesandbox.io/s/selective-outlines-d36mw

[chasedavis]

Was having a similar problem, ended up changing Outline out for SelectiveBloom from your example @drcmda. It sort of works but there is a little weirdness as not all sides of the cubes are bloomed. Maybe is due to lights changing reflections based on cube rotation? https://codesandbox.io/s/selective-bloom-yqrm3

[choxi]

Here's a similar issue where only one surface of a cube gets the Bloom effect, and it flickers in and out as you rotate the camera: https://codesandbox.io/s/selective-bloom-perspective-bug-r9twh?file=/src/index.js

[Russo-creation]

In one of my projects I noticed that <EffectComposer> component really like to be rerender otherwise it doesn't apply any changes on the effects components (like changing blending or other props through useFrame hook). Probably it is a bug.

@danielx-art Here https://codesandbox.io/s/selective-bloom-bug-forked-gg75q?file=/src/index.js I prepared mentioned workaround- add refs to the state array which cause rerender whole component after clicking specific cube.

[jessefischer]

@danielx-art I believe the problem is in this line:

selection={objectBloomRef}

If you change that to selection={[objectBloomRef]} (with the square brackets), does it fix it on your end? This is what I get:

https://user-images.githubusercontent.com/59373483/149845305-a46b3fba-9395-494c-99ff-33002e690c07.mov

[talentlessguy]

In one of my projects I noticed that <EffectComposer> component really like to be rerender otherwise it doesn't apply any changes on the effects components (like changing blending or other props through useFrame hook). Probably it is a bug.

@danielx-art Here https://codesandbox.io/s/selective-bloom-bug-forked-gg75q?file=/src/index.js I prepared mentioned workaround- add refs to the state array which cause rerender whole component after clicking specific cube.

This example is working on latest:

https://codesandbox.io/s/selective-bloom-bug-forked-j3o353?file=/src/index.js

[danielx-art]

This post went way beyond what I thought It would go. Thanks for the work around, It is a shame theres not a good solution for this, rerendering the whole thing every time is unusable if you have a hundred or so components as I initally wanted, and It also flickers for a moment every time.