Weird EffectComposer result

Hi, I hope someone can spot what stupid mistake I’m making here… :slight_smile:

Part of a bigger feature, I need to render the main scene at a specific point and apply some effects to it, but I’m getting weird results. I stripped it down to basically a copy shader, but I can’t seem to be able to get the same output as when I just normally render the scene using App.renderer.render(App.scene, App.camera);.

Here is the stripped down setup:

const uniforms = {
  uBgTexture: { value: null }
};

/**
  * App.renderer.render(...) is not called in this case, RenderPass renders the scene, 
  * then it gets passed to the CustomPass, which is forced to render to screen.
  */
const composer = new EffectComposer(App.renderer);
composer.renderToScreen = false;
composer.addPass(new RenderPass(App.scene, App.camera)); // renders to buffer
composer.addPass(new CustomPass(uniforms)); // renders to screen

and in CustomPass:

export class CustomPass extends Pass {
  protected material: ShaderMaterial;
  protected fsQuad: FullScreenQuad;

  constructor(uniforms: { [uniform: string]: IUniform }) {
    super();

    this.material = new ShaderMaterial({
      uniforms,
      vertexShader,
      fragmentShader
    });

    this.fsQuad = new FullScreenQuad(this.material);
  }

  render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget) {
    this.material.uniforms.uBgTexture.value = readBuffer.texture;
    renderer.setRenderTarget(null);
    renderer.clear(); // makes no difference
    this.fsQuad.render(renderer);
  }

  dispose() {
    this.material.dispose();
    this.fsQuad.dispose();
  }
}

in the fragment shader I simply copy the whole scene:

void main()
{
    vec4 bg = texture(uBgTexture, vUv);
    gl_FragColor = bg;
    #include <tonemapping_fragment>
    #include <colorspace_fragment>
}

This is what it should look like (using App.renderer.render(...)):

This is what I get with the EffectComposer setup (more opaque, and maybe saturated):

And finally, if I comment out either the colorspace_fragment or both includes in the shader, I get this:

Adding an OutputPass to the end doesn’t change anything.
I’m pretty sure I’m missing something trivial :thinking:

Normally you do not have to include the tone mapping and color space conversion chunks into a custom pass. Ideally, you let OutputPass do this step.

Yes, I get that, and as I mentioned, I did try with OutputPass and removed the chunks from the shader, but I get the 3rd (dark) version :confused:

Any chances to demonstrate what you are doing with a live example? three.js dev template - module - JSFiddle - Code Playground

Hi @Mugen87, took me a bit, but finally I managed to reproduce it in a fiddle.

I put a 2s timeout to switch from the default renderer to the composer.
By default (with the OutputPass added), you can see the scene turning “brighter”.
If you comment it out (line 594) and rerun it, it will turn darker.
But it will never reproduce the original result.

Forgive the bloated setup in the beginning, I needed to build something similar to what I have.
And really appreciate you looking into it, thank you!

@electric.cicada are you still having this issue, and is the JSFiddle still the current code you’d like help debugging?

Maybe this is a bit easier to read (but it’s basically the same): fiddle

I tried everything I could think of, enabling/disabling the color conversion chunks fully/partly, changing material/texture color space, added sRGBTransferOETF as you suggested (hopefully I did it correctly…). I have this feeling the I’m missing the forest for the trees, but at this point maybe only a second set of eyes can help :slight_smile: