WebGPURenderer: Support MSAA for texture render targets. (#26451)

* Support MSAA for texture renderTargets

* remove old code

* remove typo

---------

Co-authored-by: aardgoose <[email protected]>

examples/jsm/renderers/common/RenderContext.js

@@ -29,6 +29,7 @@ class RenderContext {
 		this.texture = null;
 		this.depthTexture = null;
 		this.activeCubeFace = 0;
+		this.sampleCount = 1;
 
 	}
 

examples/jsm/renderers/common/RenderContexts.js

@@ -26,6 +26,8 @@ class RenderContexts {
 
 		}
 
+		if ( renderTarget !== null ) renderState.sampleCount = renderTarget.samples === 0 ? 1 : renderTarget.samples;
+
 		return renderState;
 
 	}

examples/jsm/renderers/common/Textures.js

@@ -17,6 +17,7 @@ class Textures extends DataMap {
 	updateRenderTarget( renderTarget ) {
 
 		const renderTargetData = this.get( renderTarget );
+		const sampleCount = renderTarget.samples === 0 ? 1 : renderTarget.samples;
 
 		const texture = renderTarget.texture;
 		const size = this.getSize( texture );
@@ -48,8 +49,19 @@ class Textures extends DataMap {
 		renderTargetData.texture = texture;
 		renderTargetData.depthTexture = depthTexture;
 
-		this.updateTexture( texture );
-		this.updateTexture( depthTexture );
+		if ( renderTargetData.sampleCount !== sampleCount ) {
+
+			texture.needsUpdate = true;
+			depthTexture.needsUpdate = true;
+
+			renderTargetData.sampleCount = sampleCount;
+
+		}
+
+		const options = { sampleCount };
+
+		this.updateTexture( texture, options );
+		this.updateTexture( depthTexture, options );
 
 		// dispose handler
 
@@ -74,7 +86,7 @@ class Textures extends DataMap {
 
 	}
 
-	updateTexture( texture ) {
+	updateTexture( texture, options = {} ) {
 
 		const textureData = this.get( texture );
 		if ( textureData.initialized === true && textureData.version === texture.version ) return;
@@ -96,7 +108,7 @@ class Textures extends DataMap {
 		if ( isRenderTarget ) {
 
 			backend.createSampler( texture );
-			backend.createTexture( texture );
+			backend.createTexture( texture, options );
 
 		} else {
 
@@ -120,7 +132,7 @@ class Textures extends DataMap {
 
 					if ( textureData.isDefaultTexture === undefined || textureData.isDefaultTexture === true ) {
 
-						backend.createTexture( texture );
+						backend.createTexture( texture, options );
 
 						textureData.isDefaultTexture = false;
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -155,15 +155,25 @@ class WebGPUBackend extends Backend {
 			const textureData = this.get( renderContext.texture );
 			const depthTextureData = this.get( renderContext.depthTexture );
 
-			// @TODO: Support RenderTarget with antialiasing.
-
-			colorAttachment.view = textureData.texture.createView( {
+			const view = textureData.texture.createView( {
 				baseMipLevel: 0,
 				mipLevelCount: 1,
 				baseArrayLayer: renderContext.activeCubeFace,
 				dimension: GPUTextureViewDimension.TwoD
 			} );
 
+			if ( textureData.msaaTexture !== undefined ) {
+
+				colorAttachment.view = textureData.msaaTexture.createView();
+				colorAttachment.resolveTarget = view;
+
+			} else {
+
+				colorAttachment.view = view;
+				colorAttachment.resolveTarget = undefined;
+
+			}
+
 			depthStencilAttachment.view = depthTextureData.texture.createView();
 
 			if ( renderContext.stencil && renderContext.depthTexture.format === DepthFormat ) {
@@ -555,9 +565,9 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	createTexture( texture ) {
+	createTexture( texture, options ) {
 
-		this.textureUtils.createTexture( texture );
+		this.textureUtils.createTexture( texture, options );
 
 	}
 

examples/jsm/renderers/webgpu/utils/WebGPUTextureUtils.js

@@ -103,8 +103,9 @@ class WebGPUTextureUtils {
 		const dimension = this._getDimension( texture );
 		const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
 		const format = texture.internalFormat || this._getFormat( texture );
-		//const sampleCount = texture.isRenderTargetTexture || texture.isDepthTexture ? backend.utils.getSampleCount( renderContext ) : 1;
+
 		const sampleCount = options.sampleCount !== undefined ? options.sampleCount : 1;
+		const primarySampleCount = texture.isRenderTargetTexture ? 1 : sampleCount;
 
 		let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC;
 
@@ -122,7 +123,7 @@ class WebGPUTextureUtils {
 				depthOrArrayLayers: depth,
 			},
 			mipLevelCount: mipLevelCount,
-			sampleCount: sampleCount,
+			sampleCount: primarySampleCount,
 			dimension: dimension,
 			format: format,
 			usage: usage
@@ -156,6 +157,17 @@ class WebGPUTextureUtils {
 
 		}
 
+		if ( texture.isRenderTargetTexture && sampleCount > 1 ) {
+
+			const msaaTextureDescriptorGPU = Object.assign( {}, textureDescriptorGPU );
+
+			msaaTextureDescriptorGPU.label = msaaTextureDescriptorGPU.label + '-msaa';
+			msaaTextureDescriptorGPU.sampleCount = sampleCount;
+
+			textureData.msaaTexture = backend.device.createTexture( msaaTextureDescriptorGPU );
+
+		}
+
 		textureData.initialized = true;
 
 		textureData.needsMipmaps = needsMipmaps;
@@ -170,6 +182,8 @@ class WebGPUTextureUtils {
 
 		textureData.texture.destroy();
 
+		if ( textureData.msaaTexture !== undefined ) textureData.msaaTexture.destroy();
+
 		backend.delete( texture );
 
 	}

examples/jsm/renderers/webgpu/utils/WebGPUUtils.js

@@ -79,7 +79,7 @@ class WebGPUUtils {
 
 		if ( renderContext.texture !== null ) {
 
-			return 1;
+			return renderContext.sampleCount;
 
 		}