WebGLRenderTarget and scene.background has tonemapping issues

[drcmda]

Description

scene.background = new THREE.Color("white")
...
gl.render(scene, camera)

produces a white background, i don't think three applies tm here

but the same thing on a fbo (mapped to a mesh-material) produces a gray background, presumably because threejs then tonemapps the result

state.gl.setRenderTarget(fbo)
state.gl.render(scene, camera)
state.gl.setRenderTarget(null)
...
const plane = new THREE.PlaneGeometry/(
const material = new THREE.MeshBasicMaterial({ map: fbo.texture })
const mesh = new THREE.Mesh(plane, material)

in this image you have the rendertarget in the middle, with a white scene.background just like the rest of the scene, but it appears gray, not white.

tonemapping with envmap background is fine

tonemapping with a background white plane instead of scene.background is fine

Live example

• https://codesandbox.io/p/sandbox/shadermaterials-forked-7r5knf

Screenshots

No response

Version

r0.167.0

Device

Desktop

Browser

Chrome

OS

MacOS

[hybridherbst]

Related

• WebGLRenderer: Difference between Scene.background and setClearColor() #22340 (comment)
• WebGLRenderer: Difference between Scene.background and setClearColor() #22340 (comment)

[drcmda]

thanks for the context @hybridherbst this at least explains what is going on.

[Mugen87]

I'm not sure it was ever discussed before but maybe it would be a solution for WebGLRenderer: Instead of using gl.clear(), couldn't we apply a clear color similar to a textured background by rendering a colored (full screen) quad? In this way, background colors behave like textured backgrounds or skyboxes.

The colored plane mesh would be pushed at the very beginning of the opaque render list and writes no depth. In this way, subsequent render items shouldn't be affected. Does somebody see an obvious flaw compared to gl.clear()?

There is also a related issue with fog: #26857 (comment)

At least with WebGPURenderer all of these issues are already solved. Hopefully we get this fixed in WebGLRenderer as well.

[hybridherbst]

Rendering a full screen quad is usually slower than gl.clear() on tiled GPUs (so, mobile), this would probably reduce framerate.

[Mugen87]

I wonder if the performance degradation would actually be noticeable as a lower frame rate. This is something that should be tested if the approach is given a try.