Support single pass with MSAA for WebGLBackend

[zonkypop]

Description

When using the WebGL2 fallback, in three 180 I could hack it using:

render(scene, camera) {
		this._renderScene(scene, camera, false)
	}

and fix the color management via shaders, however by default in three 182 it now disables MSAA.

Having an extra (redundant when not using post processing) render pass, has a pretty huge overhead for a lot devices (e.g. household integrated graphics laptops, Quest 3), often 2-4ms overhead. It's not that noticeable when testing on M1+ chips but for many other ordinary devices the overhead is significant.

I think the most elegant solution for developers would be to disable the extra pass if there is no postprocesing. This might be quite a bit of work/plumbing to get the final color conversion TSL to work on the the default materials

Solution

Default to a single forward pass, do linearToSRGB plumbing

Alternatives

leave as is

Additional context

No response

[Mugen87]

This has been discussed before but there are currently no plans to introduce inline color space conversion and tone mapping because of the incorrect blending. This decision isn't final yet because of the performance implications.

I'm not sure what you mean with r180 and MSAA since the two-pass approach exists since the very beginning of WebGPURenderer. Do you mind demonstrating with a fiddle what you were doing with r180?

[zonkypop]

Ah okay, I personally think the trade off of incorrect blending like in the original WebGL only pipeline is worth it vs the performance penalty, or at least in certain situations. Can understand why you want to keep it consistent and avoid big alternative paths of enabling/disabling it, that adds more complexity.

At renderers/common/Renderer at:

render(scene, camera) {
		if (this._initialized === false) {
			throw new Error(
				'Renderer: .render() called before the backend is initialized. Use "await renderer.init();" before rendering.'
			)
		}

		this._renderScene(scene, camera, false)
	}

In my fork I have been using useFrameBufferTarget = false to avoid the extra pass. Either in 181 or 182 something changed causing this to no longer uses MSAA. It's more of a sideffect than a bug since I am not using it as intended, and I've found a workaround by just hardcoding antialias = true in the init for WebGLBackend.

I will close the issue. I thought it would be important to raise the performance implications, as they are very significant. I don't think anyone targeting hardware with the medium-low fill-rate and memory bandwidth (the majority of people on the internet without an m1+ chip or dedicated GPU) for medium sized apps will hit decent frame rates with the extra overhead of the extra pass.

[zonkypop]

It turns out I missed something basic 😅

A single forward pass can be done simply by just setting:

renderer.toneMapping = NoToneMapping
renderer.outputColorSpace = LinearSRGBColorSpace

It might help to add this to the docs if anyone else is interested.