XRManager: Add MSAA support. (#30378)

* XRManager: Add MSAA support.

* E2E: Update screenshot.

* E2E: Update screenshot.

examples/webgpu_xr_cubes.html

@@ -96,7 +96,7 @@
 
 				raycaster = new THREE.Raycaster();
 
-				renderer = new THREE.WebGPURenderer( { forceWebGL: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

src/renderers/common/XRManager.js

@@ -632,7 +632,8 @@ class XRManager extends EventDispatcher {
 						type: UnsignedByteType,
 						colorSpace: renderer.outputColorSpace,
 						depthTexture: new DepthTexture( glProjLayer.textureWidth, glProjLayer.textureHeight, depthType, undefined, undefined, undefined, undefined, undefined, undefined, depthFormat ),
-						stencilBuffer: attributes.stencil
+						stencilBuffer: attributes.stencil,
+						samples: attributes.antialias ? 4 : 0
 					} );
 
 				this._xrRenderTarget.hasExternalTextures = true;

src/renderers/webgl-fallback/WebGLBackend.js

@@ -334,11 +334,15 @@ class WebGLBackend extends Backend {
 	 */
 	setXRRenderTargetTextures( renderTarget, colorTexture, depthTexture = null ) {
 
-		this.set( renderTarget.texture, { textureGPU: colorTexture } );
+		const gl = this.gl;
+
+		this.set( renderTarget.texture, { textureGPU: colorTexture, glInternalFormat: gl.RGBA8 } ); // see #24698 why RGBA8 and not SRGB8_ALPHA8 is used
 
 		if ( depthTexture !== null ) {
 
-			this.set( renderTarget.depthTexture, { textureGPU: depthTexture } );
+			const glInternalFormat = renderTarget.stencilBuffer ? gl.DEPTH24_STENCIL8 : gl.DEPTH_COMPONENT24;
+
+			this.set( renderTarget.depthTexture, { textureGPU: depthTexture, glInternalFormat: glInternalFormat } );
 
 			renderTarget.autoAllocateDepthBuffer = false;