Postprocessing: Differences in rendering when using plain three.js

[leefsmp]

We switched our rendering pipeline to use that lib and we are getting great results, so big thank you!

The textures of materials are looking so much sharper than with plain three.js but the scene is also darker (with same light intensity and positions of course) and the colours seem to have a higher contrast. We wondering if there are some settings that are set by default when using a RenderPass for main scene or what is the reason for that? I've seen there is a BrightnessContrastEffect that can do the trick but wanted to check before using it.

Plain three.js:

With postprocessing:

Then my second question is about changing some material properties, for example I want to set materials to THREE.DoubleSide but seems to have no effect, the scene comes out with THREE.FrontSide no matter what:

setMaterialSide (side) {
    traverseMaterials(this.root, material => {
      material.side = side
      material.needsUpdate = true
    })
  }

setMaterialSide(THREE.DoubleSide)

Is there something to do in order to update that change?

Thanks

[vanruesc]

Postprocessing doesn't change your models or materials in any way. The main role of the RenderPass is to produce the same result as WebgLRender.render(scene, camera). The actual postprocessing happens after that.

Did you recently upgrade to a newer version of three? Maybe the gamma correction / output encoding changes are the reason why the colors suddenly appear darker. I might be wrong, but the model in the first screenshot also doesn't look textured to me.

Brightness and contrast should preferably be tuned by adjusting colors, textures, lights and tone mapping settings in the first render pass where you still have the full color precision. I recommend using the BrightnessContrastEffect for things like final artistic tuning and end user settings.

Then my second question is about changing some material properties, for example I want to set materials to THREE.DoubleSide but seems to have no effect, the scene comes out with THREE.FrontSide no matter what

This shouldn't be a problem since postprocessing doesn't touch your materials. For reference, see this example (App.js#98-107). If you provide a minimal example that reproduces the issue, I'll take a look.

[leefsmp]

Thanks for the quick response. Material side is ok, the issue was that the DAT.gui was changing my value to a string, hence it wasn't taken in consideration.

We are running an older version of three.js (r107) because switching to latest is too disruptive at the moment with the pointcloud library we are using and other components of the app. You mentioned tone mapping and I see some warnings when loading the model when using postprocessing: 'toneMapped' is not a property of this material. I'm aware the current version is supposed to be used with three r115 but since it's working we can live with it for the time being.

[vanruesc]

'toneMapped' is not a property of this material

That warning can be ignored. Fullscreen materials disable the toneMapped flag to prevent newer versions of three from injecting some unnecessary shader code.

We are running an older version of three.js (r107) because switching to latest is too disruptive at the moment

I see. In this case postprocessing won't be able to handle gamma correction automatically and you will probably need to use the GammaCorrectionEffect to fix the visuals:

const gammaCorrectionEffect = new GammaCorrectionEffect({ gamma: 2.2 });
const effectPass = new EffectPass(camera, gammaCorrectionEffect);
effectPass.encodeOutput = false; // Prevent potential bugs.

This, however, depends on your rendering pipeline: did you previously use WebGLRenderer.gammaInput and WebGLRenderer.gammaOutput?

[leefsmp]

spot on, this completely solves the issue! Thanks a bunch

[upisfree]

I guess this relates with this pull request: https://github.com/mrdoob/three.js/pull/19129
And also this was fixed in three r116 ✨