WebGLMultisampleRenderTarget: Enable toScreen rendering.

[Mugen87]

Related issue: see #21573

Description

This is a rework of the original PR.

[arpu]

this works just fine on Desktop using patched three with this PR and Patched aframe renderer
if this PR gets merged i can contribute this to aframe

still the OculusBrowser problem
@cabanier
https://vrland.io/dome?useMultisampleRenderTarget=true
using the Patched three 130 with this PR
make sure use the latest vrland version v0.22.0 ( right top corner)
(using https://vrland.io/dome use normal WebglRenderer with antialias true)

[cabanier]

@arpu there are a bunch of GL errors in the console:
glBlitFramebufferCHROMIUM: src and dst formats differ for color

I suspect this is an issue on your side.

[Mugen87]

@arpu I don't see such errors in the two official examples. Maybe you have missed something when patching your three.js version?

[arpu]

@cabanier i do not see this error on desktop chrome amd the error comes in oculus chrome android?

[cabanier]

@cabanier i do not see this error on desktop chrome amd the error comes in oculus chrome android?

Can you go in VR on desktop chrome?

[arpu]

only with the https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje?hl=de
and this works without the GL errors

@Mugen87 the only diffrence is using this parameters for the THREE.WebGLMultisampleRenderTarget

const  parameters = {
			format: THREE.RGBFormat,
			minFilter: THREE.LinearFilter,
			magFilter: THREE.LinearFilter,
			stencilBuffer: true, 
				};

[arpu]

@cabanier you are right after the OculusBrowser update today i cannot enter webxr on the OculusBrowser with both examples
this worked just fine befor todays update :/ not sure if this should be fixed on threejs side or OculusBrowser

[mrdoob]

@Mugen87 Could you resolve the conflicts?

[Mugen87]

Done!

[mrdoob]

Sorry for blocking but I'm unsure about the toScreen API.

Would something like this work?

const rendertarget = new THREE.WebGLMultisampleRenderTarget( width, height, parameters );
rendertarget.samples = 4;

renderer.setFramebuffer( rendertarget ); // pass null for default behaviour

[Mugen87]

Would something like this work?

A method on renderer level works, yes. However, we would have to make clear in the documentation that setFramebuffer() can only be used for rendering to screen (and not for RTT). I have the feeling the generic method name could be confusing for certain users.

Alternatively, a new ctor parameter of WebGLRenderer is also an option. Unlike render targets, MSAA configuration is normally nothing that changes during rendering.

const rendertarget = new THREE.WebGLMultisampleRenderTarget( width, height, parameters );
rendertarget.samples = 4;

const renderer = new THREE.WebGLRenderer( { framebuffer: rendertarget } );

Besides, in WebGPU there is no built-in MSAA like in WebGL. If antialias is set, the renderer internally configures a resolve target. We could do something similar and hide the creation of WebGLMultisampleRenderTarget on app level. How about introducing a new ctor parameter sampleCount (same name like in context of WebGPU)? If set, the renderer internally creates an instance of WebGLMultisampleRenderTarget and manages it (e.g. the renderer resizes the target properly).

const renderer = new THREE.WebGLRenderer( { sampleCount: 4 } );

I guess I favor the last option right now.