fix: Apply ignoreBackground and inverted Props in SelectiveBloom

[breathingcyborg]

Fix: Apply ignoreBackground and inverted Props in SelectiveBloom

Fixes #111

Description of the Issue:

The ignoreBackground and inverted props of SelectiveBloom were not being applied, causing the selective bloom effect to work incorrectly, particularly when using an HDRI environment map. This issue is further detailed in this GitHub issue.

As shown in the images below:

• Left: Before the fix, the bloom effect is applied to bright areas of the background image and parts of the cube not selected for the bloom effect.
• Right: After the fix, the selective bloom effect is working as expected, with the background and cube affected correctly based on the props.

The suggested solution in issue #111 involved using emissive materials with values above the 0-1 RGB range and setting a high luminanceThreshold to control what glows. However, this does not work with HDRI images, as they contain areas of high luminosity that still get selected, even with a high luminanceThreshold like 100. This results in unintended glowing effects in the background, making ignoreBackground essential for proper selective blooming.

Codesandbox link to reproduce the issue https://codesandbox.io/p/sandbox/selective-bloom-props-issue-6fp8vm

Solution:

The ignoreBackground and inverted props are setters, but they were not passed as arguments in the constructor, resulting in them being ignored. This fix ensures that these props are now correctly applied, allowing the selective bloom effect to work as intended.

Please review and let me know if any additional changes are needed. Thank you!

Side note

The demo in the Storybook does not work as it uses the Environment component from an older version of @react-three/drei. In this version, the CDN hosting the sample preset HDR files is no longer active. Upgrading to "@react-three/drei": "^9.70.0" resolves this issue. But I haven't changed the version in this PR so the Storybook demo might break with fetch error.