Having contours on adding EffectComposer to a room lit with Spot Light

[robosushie]

Hi I have make a 3D room with spotlights pointing upwards to the ceiling.

When EffectComposer tag is used, Then I am seeing wierd contour lines in the reflected lights.

Without the EffectComposer the lighting has a smooth gradient

I need to use Bloom to my scene but this is causing some issues.

I am using the effect like this <EffectComposer> <Bloom luminanceThreshold={0.2} luminanceSmoothing={2} height={500} /> </EffectComposer>

[Russo-creation]

+1

Recently I noticed the same issue. I tried experiment with different light source like point light and environment HDRI and same behavior as you describe.

I checked if it is coused by some specyfic post-processing effect but same regardless of used effect. It looks like there is issue related with EffectComposer component itself.

I checked the demo from https://vanruesc.github.io/postprocessing/public/demo/#bloom and didn't noticed this issue.

• with post-processing | without post-processing

Edit

I also made an additional investigation for this issue and discoverd that colors in example demo https://codesandbox.io/s/pqrpl also suffer for mentioned effect (especially visible on bloom glow). I tried to find some older example to check if something happpend in the past https://codesandbox.io/s/vigorous-currying-3r6l2 and I noticed that older version of this library1.4.0 doesn't have this issue.

• newest ver of lib | library1.4.0

[Russo-creation]

@react-three/post processing ver 2.0.0 colors are also grate. Issue is noticeable in versions 2.0.1 and above!

[krispya]

I was reimplementing the postprocessing library myself to see what might be the problem and I was able to reproduce this issue by not setting the render frameBufferType to HalfFloatType. If it does get set, the color banding goes away. You can see the issue yourself in this sandbox by commenting out the two renderer options:

https://codesandbox.io/s/blissful-hamilton-zi963?file=/src/App.js:1433-1527

[krispya]

So just to follow up, you can fix this issue yourself by setting the frameBufferType prop on EffectComposer to HalfFloatType which you import from three.

[Russo-creation]

Thank you @Krispy3000 your solution works perfectly. I wasn't aware of this change between versions. Below code which solves colors issue.

        import * as THREE from "three";
        import {
          EffectComposer,
          Bloom,
        } from "@react-three/postprocessing";
.
.
.
      <EffectComposer frameBufferType={THREE.HalfFloatType}>
        <Bloom
          luminanceThreshold={0}
          luminanceSmoothing={0.9}
          height={300}
          opacity={3}
        />
      </EffectComposer>