Subtle colour banding issue, looks like 256 colours when using Bloom with Effect Composer

OSource · October 26, 2021, 3:28pm

threejs banding

Struggling to fix this issue, now day 2 of this and I keep running into the same banding issue, with different pass setups.

  renderer.setClearColor('#000000');
  const bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1, 1, 0.75);
  const copyPass = new ShaderPass(CopyShader);
  copyPass.renderToScreen = false;
  bloomPass.renderTargetsHorizontal.forEach((element) => {
    element.texture.type = THREE.FloatType;
  });
  bloomPass.renderTargetsVertical.forEach((element) => {
    element.texture.type = THREE.FloatType;
  });
  const composer = new EffectComposer(renderer);
  composer.renderer.outputEncoding = sRGBEncoding;
  composer.setSize(width, height);
  composer.setPixelRatio(density);
  const normalRender = new RenderPass(scope.scene, scope.cameraManager.camera);
  composer.addPass(normalRender);
  composer.addPass(bloomPass);
  composer.renderer.toneMapping = ACESFilmicToneMapping;

  THREE.ShaderChunk.tonemapping_pars_fragment = THREE.ShaderChunk.tonemapping_pars_fragment.replace(
    'vec3 CustomToneMapping( vec3 color ) { return color; }',
    `#define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
    float toneMappingWhitePoint = 1.0;
    vec3 CustomToneMapping( vec3 color ) {
      color *= toneMappingExposure;
      return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
    }`,
  );

env map setup

    cubeTextureLoader.loadAsync([`${map}_px.jpg`, `${map}_nx.jpg`, `${map}_py.jpg`, `${map}_ny.jpg`, `${map}_pz.jpg`, `${map}_nz.jpg`]).then((textureCube) => {
      this.scene.environment = textureCube;
      textureCube.encoding = sRGBEncoding;
      this.scene.background = textureCube;
    });

Is there anything I am missing?

Using ThreeJS 133.1

By the way when i add the following to the end, the entire scene becomes dark so thats why its not in there yet :
composer.addPass(copyPass);

Edit: I realised this always happens when you add unreal bloom pass into the effect composer, it just creates a colour banding

Mugen87 · October 27, 2021, 8:44am

Can you please create your effect composer like so:

const parameters = {
	minFilter: THREE.LinearFilter,
	magFilter: THREE.LinearFilter,
	format: THREE.RGBAFormat,
	type: THREE.FloatType
};

const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );

const composer = new EffectComposer( renderer, renderTarget );

Any improvements?

Don’t do that. When using post processing don’t touch outputEncoding but apply a gamma correction pass at the end of the pass chain like so:

github.com

mrdoob/three.js/blob/d9af9952fc32c2a1281707946177135b90297aab/examples/webgl_postprocessing_ssr.html#L180


      
          				renderer,
          				scene,
          				camera,
          				width: innerWidth,
          				height: innerHeight,
          				groundReflector: params.groundReflector ? groundReflector : null,
          				selects: params.groundReflector ? selects : null
          			} );
          
          			composer.addPass( ssrPass );
          			composer.addPass( new ShaderPass( GammaCorrectionShader ) );
          
          			// GUI
          
          			gui = new GUI( { width: 260 } );
          			gui.add( params, 'enableSSR' ).name( 'Enable SSR' );
          			gui.add( params, 'groundReflector' ).onChange( () => {
          
          				if ( params.groundReflector ) {
          
          					ssrPass.groundReflector = groundReflector,

Tone mapping should also be done via post-processing: https://threejs.org/examples/webgl_shaders_tonemapping

OSource · October 27, 2021, 10:03am

Totally lost on this now.

Thanks for your help.

Adding the render target, cant see a noticeable difference visually.

  const renderTarget = new WebGLRenderTarget(width, height);
  const composer = new EffectComposer(renderer, renderTarget);
  const normalRender = new RenderPass(scene, cameraManager.camera);
  const adaptiveToneMapping = new AdaptiveToneMappingPass(true, width);
  adaptiveToneMapping.needsSwap = true;
  const gamma = new ShaderPass(GammaCorrectionShader);
  composer.addPass(normalRender);
  composer.addPass(adaptiveToneMapping);
  composer.addPass(bloomPass);

Adding GammaCorrectionShader causes banding and looks like a toonshader, without GammaCorrectionShader the scene looks very dark.
Adding AdaptiveToneMapping doesnt do anything. Scene still looks dark.

I should add I was using Varunesc postprocessing npm package before switching back to THREE after an update, should I switch back? Is the THREE effect composer pipeline buggy?

Later in the day I will create a jsfiddle sample

ROBYER1 · December 20, 2022, 3:19pm

Sorry to necro, finding a load of dead ends on this when using Bloom Pass I also noticed the colour banding then when I tried Gamma Correction Pass on its own I also found colour banding. Seems the stack is bugged out…

drcmda · December 20, 2022, 3:29pm

i would move towards pmndrs/postprocessing by vanruesc. it figures out color management automatically, you don’t need gamma correction.

ROBYER1 · December 20, 2022, 4:56pm

Thanks, just switched to it and now my colour space looks correct, no more hideous colour banding with Bloom or Gamma Correction pass. The post processing stack in Three.js should be replaced by pmndrs post processing stack imo!

donmccurdy · December 20, 2022, 5:14pm

The key thing in getting rid of banding (or the easiest way, at least) is to ensure all render targets use >=16 bits of precision. By default they use 8 bits, and it’s more efficient for older devices but also much harder to avoid precision problems.

I’m a big fan of what Raoul is doing with pmndrs/postprocessing, it’s good work. The project is still evolving actively though, with a bunch of breaking changes (compared to the original EffectComposer API) planned for v7 – including requiring WebGL 2. I think it would be best to leave the base three.js post-processing alone until pmndrs/postprocessing v7 has stabilized, and decide next steps from there.

Mugen87 · December 20, 2022, 5:50pm

drcmda · December 20, 2022, 7:12pm

github.com/pmndrs/postprocessing

Render Pipeline Redesign

opened 11:04AM - 28 Oct 22 UTC

vanruesc

discussion

This is an overview of the planned changes for v7. The actual implementation det…ails are subject to change during development. Feel free to leave feedback, questions or suggestions. ## The Current Design The API in `postprocessing` is based on three's postprocessing examples; at its core it provides an `EffectComposer` that uses a `WebGLRenderer` to render passes. A `Pass` performs a set of tasks to either render consumable textures or to draw the final result to screen. The `RenderPass` renders the scene colors to a texture and serves as a starting point for most render pipelines. A few years ago, #82 introduced the `EffectPass` which can merge `Effect` instances into a single fullscreen pass for optimal shader performance. Since then, passes and effects have been added and improved, but some effects like SSR and motion blur are still missing. This is because the current API doesn't provide a good way to implement such effects efficiently. Modern effects need additional scene geometry data such as depth, normals, positions, roughness, velocity, etc. This currently requires the scene to be rendered multiple times using three's limited material override system. ## Problems - The `EffectComposer` blindly creates two internal render targets to store intermediate results. - The purpose of this is to avoid reading from and rendering to the same buffer (feedback loop). - The composer provides access to these buffers via the `render` method of the passes. - Passes need to tell the composer whether these buffers should be swapped when they're done. - The `multisampling` (MSAA) setting affects both of these buffers because the composer doesn't know which of them will actually be used by a `RenderPass`. - The composer provides a `DepthTexture` to passes that need one, but this feature is partially broken and too limited. - Passes and effects create several render targets behind the back of the composer which makes optimizations impossible. - Some passes and effects re-render the main scene to obtain additional data or to mask objects based on depth. - This leads to poor performance because rendering the main scene is expensive. ## Implementation Goals The buffer management in `postprocessing` needs to become more sophisticated to support modern requirements. - Rename `RenderPass` to `GeometryPass`. - Replace `EffectComposer` with a more lightweight `RenderPipeline` class. - Pipelines are used to group and run passes. - The user may create many pipelines. Resources may be shared if they use the same renderer. - Common setups only require one pipeline that contains a `ClearPass`, a `GeometryPass` and one or more `EffectPass` instances. - The first `GeometryPass` in a pipeline will be considered the main pass (regarding the main scene & camera). - Passes and effects declare `input` and `output` resources. - `input` will include `uniforms` and `textures` (alias `buffers`). - `output` will include `uniforms` and `renderTargets` (alias `buffers`). - Resources are declared as key-value pairs. - Keys are strings and values are either of type `GBuffer` (enum), `Texture` or `WebGLRenderTarget`. - Enum values will be replaced with the actual textures at runtime. - `Pass` defines `INPUT_BUFFER_DEFAULT` and `OUTPUT_BUFFER_DEFAULT` which will be used to auto connect passes. - `Effect` also defines `INPUT_BUFFER_DEFAULT`. - All GBuffer textures must be rendered by the `GeometryPass` with MRT. - The configuration of the render targets is controlled by the passes and effects that produce them. - Declaring input buffers in effects automatically makes these textures available to the respective effect shaders. - Inputs and outputs of internal effects or passes must be propagated to the outermost pass. - Render targets will be managed by a `BufferManager` (shared private static instance in `RenderPipeline`). - This manager reacts to configuration changes and determines whether render targets can be shared among passes. - Buffer changes are tracked via events that are dispatched automatically for lifecycle hooks like `setSize` and `initialize`. - The flags `renderToScreen` and `needsSwap` will be removed. - The parameters of interface methods will be reduced to the bare minimum. - The last pass in a pipeline will render to screen (default output buffer is `null`) if `pipeline.autoRenderToScreen` is `true` (default). The general IO concept is similar to other node-based systems like Blender's shader nodes which allow users to define named inputs and outputs. Three's built-in materials must be modified with `onBeforeCompile` to use MRT effectively (might be the biggest challenge). Since MRT requires WebGL 2, effects that make use of the GBuffer may use GLSL 300. ## Use Case Examples <details><summary>Common Setup</summary> ```ts import { ... } from "three"; import { ... } from "postprocessing"; const renderer = ...; const scene = ...; const camera = ...; const pipeline = new RenderPipeline(renderer); pipeline.addPass(new ClearPass()); pipeline.addPass(new GeometryPass(scene, camera, { frameBufferType: HalfFloatType, samples: 4 })); pipeline.addPass(new EffectPass(new BloomEffect(), ...)); requestAnimationFrame(function render(timestamp: number): void { requestAnimationFrame(render); pipeline.render(timestamp); }); ``` </details> <details><summary>Multiple Scenes</summary> The first `GeometryPass` in a pipeline produces the GBuffer. Other `GeometryPass` instances in the same pipeline render to the same GBuffer. To render to separate GBuffers, multiple pipelines must be created. ```ts const mainPass = new GeometryPass(scene, camera, { frameBufferType: HalfFloatType, samples: 4 })); const hudPass = new GeometryPass(hudScene, hudCamera)); const effectPass = new EffectPass(new BloomEffect(), ...); ``` ```ts pipeline.addPass(new ClearPass()); pipeline.addPass(mainPass); pipeline.addPass(hudPass); // Renders to the same buffer as mainPass by default. pipeline.addPass(effectPass); ``` ```ts // defaultBuffer is an alias for output.buffers.get(Pass.OUTPUT_BUFFER_DEFAULT) hudPass.output.defaultBuffer = effectPass.output.defaultBuffer; pipeline.addPass(new ClearPass()); pipeline.addPass(mainPass); pipeline.addPass(effectPass); pipeline.addPass(hudPass); // Renders to the same buffer as effectPass. ``` ```ts const pipelineA = new RenderPipeline(renderer); const pipelineB = new RenderPipeline(renderer); const geoPassA = new GeometryPass(sceneA, cameraA, { samples: 4 })); const geoPassB = new GeometryPass(sceneB, cameraB, { samples: 4 })); const blendEffect = new TextureEffect({ texture: geoPassA.output.defaultBuffer.texture }); pipelineA.addPass(new ClearPass()); pipelineA.addPass(geoPassA); pipelineB.addPass(new ClearPass()); pipelineB.addPass(geoPassB); pipelineB.addPass(new EffectPass(blendEffect, ...)); ``` </details> <details><summary>IO Management</summary> ```ts class ExamplePass extends Pass { // Temporary buffers are outputs with private names. private static OUTPUT_BUFFER_TMP_0 = "output.buffer.tmp0"; private static OUTPUT_BUFFER_TMP_1 = "output.buffer.tmp1"; constructor() { super(); // input.defaultBuffer will automatically be set to previousPass.output.defaultBuffer this.output.defaultBuffer = new WebGLRenderTarget(...); this.output.buffers.set(OUTPUT_BUFFER_TMP_0, new WebGLRenderTarget(...)); this.output.buffers.set(OUTPUT_BUFFER_TMP_1, new WebGLRenderTarget(...)); ... } // Could also add a convenience method: onBufferChange override handleEvent(e: Event): void { switch(e.type) { case "bufferchange": this.customMaterial.inputBuffer = this.input.defaultBuffer; break; } } override render(): void { const { renderer, output, fullscreenScene, fullscreenCamera } = this; this.fullscreenMaterial = this.customMaterial; renderer.setRenderTarget(output.buffers.get(OUTPUT_BUFFER_TMP_0)); renderer.render(fullscreenScene, fullscreenCamera); renderer.setRenderTarget(output.buffers.get(OUTPUT_BUFFER_TMP_1)); renderer.render(fullscreenScene, fullscreenCamera); this.fullscreenMaterial = this.copyMaterial; renderer.setRenderTarget(output.defaultBuffer); renderer.render(fullscreenScene, fullscreenCamera); } override setSize(width: number, height: number): void { this.output.buffers.get(OUTPUT_BUFFER_TMP_0).setSize(width, height); this.output.buffers.get(OUTPUT_BUFFER_TMP_1).setSize(width, height); this.output.setChanged(); } } ``` </details> <details><summary>GBuffer Usage</summary> ```ts class ExampleEffect extends Effect { private static INPUT_BUFFER_DEPTH = "input.buffer.depth"; private static INPUT_BUFFER_NORMAL = "input.buffer.normal"; private static OUTPUT_BUFFER_TMP = "output.buffer.tmp"; constructor(...) { super({ fragmentShader blendFunction, defines: new Map(...), uniforms: new Map(...) }); // this.input.buffers.set(INPUT_BUFFER_DEFAULT, GBuffer.COLOR); // default this.input.buffers.set(INPUT_BUFFER_DEPTH, GBuffer.DEPTH); this.input.buffers.set(INPUT_BUFFER_NORMAL, GBuffer.NORMAL); // GeometryPass provides optimization options for things like normal-depth downsampling. //this.input.buffers.set(INPUT_BUFFER_NORMAL_DEPTH, GBuffer.NORMAL_DEPTH); // Note: Effects don't have a default output buffer. this.output.buffers.set(OUTPUT_BUFFER_TMP, new WebGLRenderTarget(1, 1, { depthBuffer: false })); this.exampleMaterial = ...; } override onBufferChange(): void { // Refresh uniforms... const buffers = this.input.buffers; this.exampleMaterial.depthBuffer = buffers.get(INPUT_BUFFER_DEPTH); this.exampleMaterial.normalBuffer = buffers.get(INPUT_BUFFER_NORMAL); this.uniforms.get("exampleBuffer").value = buffers.get(OUTPUT_BUFFER_TMP); } ... } ``` </details> ## Effect Shader Changes ### Shader Function Signatures #### Fragment Shader ```glsl vec4 mainImage(in vec4 inputColor, in vec2 uv, in GData data); void mainUv(inout vec2 uv); ``` #### Vertex Shader ```glsl void mainSupport(in vec2 uv); ``` ### Geometry Data Effects have access to the geometry data of the current fragment via the `data` parameter of the `mainImage` function. The `EffectPass` detects whether an effect reads a value from this struct and only fetches the relevant data from the respective textures when it's actually needed. Sampling depth at another coordinate can be done via `float readDepth(in vec2 uv)`. To calculate the view Z based on depth, the function `float getViewZ(in float depth)` can be used. `GData` is defined as follows: ```glsl struct GData { vec3 position; vec3 normal; float depth; float roughness; float metalness; float luminance; } ``` ### Uniforms, Macros and Varyings All shaders have access to the following uniforms: ```glsl uniform vec4 resolution; // screen resolution (xy), texel size (zw) uniform vec3 cameraParams; // near, far, aspect uniform float time; ``` The fragment shader has access to the following additional uniforms: ```glsl // Availability of actual buffers depends on the input configuration. struct GBuffer { sampler2D color; sampler2D position; sampler2D depth; sampler2D normal; sampler2D normalDepth; sampler2D roughnessMetalness; } uniform GBuffer gBuffer; ``` The following varyings are reserved: ```glsl varying vec2 vUv; ``` Available vertex attributes: ```glsl attribute vec3 position; ``` Available macros: - If the main camera is a `PerspectiveCamera`, the macro `PERSPECTIVE_CAMERA` will be defined. - If the geometry pass uses a float type color buffer, the macro `FRAMEBUFFER_PRECISION_HIGH` will be defined.

vanruesc is currently adding a new pipeline API for V7, he’s been working on adding MRT for while now.

at some point i think it would make sense for threejs to recognize postprocessing. this project is doing good, this is an actively maintained composer with a clear roadmap and obvious benefits (not just the uber shader, per mesh selection, alpha background, color management, stencil, there are numerous improvements currently). whatever the plan is for 2023, i hope you all can get in touch.

Mugen87 · December 21, 2022, 10:16am

There is no official discussion at Github yet but I personally favor the new node material as the basis for the upcoming post processing. sunag has already done some terrific work with the node material this year and I believe we can expand the new system towards post-processing like the former node material.

The idea is to use the new node syntax to define passes similar to how we define lights now. Meaning without any specific shader language and depedencies to the actual 3D API. The respective WebGL or WebGPU node builder can then construct the final shader based on the material and post processing definitions. Expect to see some examples of this next year.

donmccurdy · December 21, 2022, 2:05pm

I’d love to have this discussion (on GitHub or elsewhere), yes.

I suspect that composing shaders with NodeMaterial, and composing passes with the proposed render pipelines in pmndrs/postprocessing, are two orthogonal features and we can do both if we choose.

I do worry that the official EffectComposer does not get the fixes and features it needs lately, and there is no one investing in it enough to make hard decisions about improving its API. Support for HDR, color management, WebXR, etc. are just not moving at all (and that’s no one’s fault, it all takes time). Raoul is putting in work here, and I think it’s worth trying to support that if we can.

Mugen87 · December 21, 2022, 2:59pm

I’ve planned to improve the color management and fix the banding issue in EffectComposer but first I’d like to finish the color management tasks regarding the core (meaning Roadmap for a color-managed workflow in three.js · Issue #23614 · mrdoob/three.js · GitHub). IMO, that has to be implemented first before working on addon classes.

donmccurdy · December 21, 2022, 3:38pm

FWIW I have been making issues and pull requests to pmndrs/postprocessing, and building three-filmic on top of its EffectPass. It has a clear roadmap that I’m excited about.

vanruesc · January 1, 2023, 2:10am

I personally favor the new node material as the basis for the upcoming post processing. sunag has already done some terrific work with the node material this year and I believe we can expand the new system towards post-processing like the former node material.

I’m looking forward to node materials, but I’m worried about the prospect of post processing getting integrated deeper into three. I think that node materials and post processing are different and complex enough to be separate systems. Is there any thread that explains the reasoning behind mixing them together?

The idea is to use the new node syntax to define passes similar to how we define lights now. Meaning without any specific shader language and depedencies to the actual 3D API. The respective WebGL or WebGPU node builder can then construct the final shader based on the material and post processing definitions. Expect to see some examples of this next year.

I’m excited for the demos and curious to see what the post processing definitions will look like. However, I don’t think node materials can truly be language-agnostic when WebGPU and WebGL support different feature sets.

I don’t want to appear overbearing, but I think that foundational libraries like three should be flexible, open and extensible. Integrating complex systems like post processing into three seems wrong to me because it goes against the principle of separation of concerns. The same applies to WebXR and dynamic shadows. In my opinion, those systems should be modular components with the option to replace them with something else. Not only would this further encourage community efforts to build great plugins for three, but it would allow three to focus on providing a solid API that covers abstractions for all WebGL/WebGPU features. Three could, of course, still provide default solutions for advanced modules, but those should be built on top of it, not into it.

Tom_Greenwood · June 21, 2023, 9:06am

How should I ensure my render targets use >=16 bits of precision? I’ve been looking three.js docs but I can’t figure out how to do that…

Thanks

Mugen87 · June 21, 2023, 9:06am

Since r153, EffectComposer uses half float by default so the banding should not be an issue anymore.

Tom_Greenwood · June 21, 2023, 9:30am

Ah ok, I thought it might be the FloatType and HalfFloatType constants but wasn’t sure. I guess it’s a problem in my shader then thank you so much for the quick reply!

Topic		Replies	Views
Bloom and Anti Aliasing banding Questions post-processing , msaa , bloom	4	3565	June 4, 2021
Is the best practice a dark background for bloom to avoid banding? Questions post-processing , bloom , unrealbloompass , banding	9	80	October 4, 2024
How to get the correct color value using unrealbloom? Questions color , unrealbloompass	10	1474	June 21, 2022
EffectComposer with scene background Questions geometry , shaders , effect-composer , background	9	2705	June 25, 2022
EffectComposer UnrealBloomPass is ruining my whole render thing Questions shader-material , effect-composer , unrealbloompass , shaderpass	2	3733	November 28, 2022

Subtle colour banding issue, looks like 256 colours when using Bloom with Effect Composer

Related topics