Is the best practice a dark background for bloom to avoid banding?

Questions
, , ,
1

original
original1919Ă—940 58.5 KB

banding
banding1919Ă—943 68.3 KB

        // this.renderer.setClearColor(0x22222C, 0.5);
        this.renderer.outputColorSpace = THREE.SRGBColorSpace;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 0.3;

        //post process
        this.renderScene = new RenderPass( this.scene, this.camera );
        this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
            format: THREE.RGBAFormat,
            type: THREE.HalfFloatType,
        })
        this.composer = new EffectComposer( this.renderer, this.renderTarget );
        this.composer.addPass( this.renderScene );

My Issue
I am trying to recreate this website for educational purposes. Everything is fine except for a brighter background color creating banding artifacts with bloom.
( this.renderer.setClearColor(0x22222C, 0.5); )

The first picture is without setClearColor and it is almost impossible to notice the banding but once you set the background brighter the bandings are very obvious. I don’t think the problem is because of the bloom values. (I spent days on this, I also tried gamma pass and outline pass but it doesn’t really help.)

What I did
so I did some search and found out that setting the render target’s type to halfFloatType helps and of course, it is way better and I know there’s no perfect way to remove banding artifacts. If you look at the original website super closely you can see the artifacts though it’s almost completely invisible.

I also looked at another example of bloom and most of them use very dark background color so I guess the best practice is to avoid bright background color for bloom…?

What I want
but I still want the brighter background color with no artifacts.

Questions

  1. Is my understanding appropriate?
  2. how to deal with a brighter background with no bloom banding artifacts? Honestly, I don’t want to use a full dark color all the time for bloom.
  3. I appreciate any advice or tricks to solve this.
2

Apart from your specific problem:

Bloom typically involves augmenting the appearance of an objects brightness by letting its color “bleed” into adjacent areas. This works best, if said adjacent areas would (without bloom) be noticeably darker than the lit object. Consequently, blooming into a bright surrounding area (background) at least defeats the brightness-enhancing effect of blooming, because you can’t increase the brightness beyond the maximum physical capabilities of your output device. (Although the blurring effect of bloom might probably still be possible).

As far as banding is concerned:

Even though a sample device may be “true color” capable, i.e. able to show 2^^24 = 16.7 million distinct colors, there are still only 2^^8 = 256 distinct colors available per hue. Which makes banding inevitable, imo.

All in all I think, you’re asking for the impossible. Sorry.

1 Like
3

Selective bloom: three.js examples

4

Using a dark background can effectively reduce the appearance of banding in bloom effects, particularly in visual media such as video games or digital art, as it minimizes the contrast between the bloom and surrounding areas, making banding less noticeable. However, this is not the only factor to consider; banding often arises from limited color depth, so utilizing higher bit depth textures can significantly help. Additionally, employing dithering techniques to smooth out color transitions can further mitigate banding artifacts. Ultimately, the best practice combines a dark background with higher color depth and supplementary techniques to achieve optimal visual quality.

1 Like
5

I think this is the best practical advice. I thought I ended up down a rabbit hole wasting time. Yes, the original website uses dithering and fog. unfortunately, it didn’t work for me though, it seems more things are happening under the hood like pbr related.

6

banding2
banding2947Ă—879 42.7 KB

Yes, I totally agree. If you look at the original website very closely, they are visible but they managed to make it almost invisible. but Iike the answer below I don’t think it’s completely impossible like the original website. Mine is way too much. thank you for sharing your knowledge anyways I didn’t know how it worked.

7

If it is helped for you, many thanks.

1 Like
8

it helped me a lot! I want to let you know people like you make the world a better place. :blush:

1 Like
9

I’m curious if you are able to find settings that easily reproduce the banding on an example like this one? It’s possible that we could consider a few more dithering options to help with that, if so.

Aside, there’s a great talk from the developers of INSIDE that goes into depth on banding, you can see the slides here:

1 Like
10

I don’t get what you meant by the example…? I think the example has almost no banding which is a nice example to look at and I obviously used this example for bloom :slight_smile:

Regarding the dithering, I have already checked the dithering function with spector.js on the original website and applied it to my code. It didn’t help somehow. the original dithering function looks like this.

#ifdef DITHERING
    vec3 dithering( vec3 color ) {
        float grid_position = rand( gl_FragCoord.xy );
        vec3 dither_shift_RGB = vec3( 0.25 / 255.0, -0.25 / 255.0, 0.25 / 255.0 );
        dither_shift_RGB = mix( 2.0 * dither_shift_RGB, -2.0 * dither_shift_RGB, grid_position );
        return color + dither_shift_RGB;
    }
#endif

anyways, the only problem is the bright background. The original creator really did a great job on this, I honestly don’t know whether another function in the fragment shader is making this work. since I lack pbr or lighting background knowledge I guess I need to study that first. but just for the time being I concluded that using a bright background for bloom is unpleasing.

and thank you for the slides! I will definitely watch it!

1 Like