WebGPUTextures: Add `DepthStencilFormat` support. (#25890)

examples/jsm/renderers/webgpu/WebGPUBindings.js

@@ -234,11 +234,11 @@ class WebGPUBindings {
 
 					} else if ( binding.texture.isVideoTexture ) {
 
-						binding.textureGPU = this.textures.getVideoDefaultTexture();
+						binding.textureGPU = this.textures.getDefaultVideoTexture();
 
 					} else if ( binding.texture.isDepthTexture ) {
 
-						binding.textureGPU = this.textures.getDepthDefaultTexture();
+						binding.textureGPU = this.textures.getDefaultDepthTexture();
 
 					} else {
 
@@ -248,7 +248,7 @@ class WebGPUBindings {
 
 				}
 
-				const resource = binding.textureGPU instanceof GPUTexture ? binding.textureGPU.createView( { dimension: binding.dimension } ) : binding.textureGPU;
+				const resource = binding.textureGPU instanceof GPUTexture ? binding.textureGPU.createView( { aspect: binding.aspect, dimension: binding.dimension } ) : binding.textureGPU;
 
 				entries.push( { binding: bindingPoint, resource } );
 

examples/jsm/renderers/webgpu/WebGPUSampledTexture.js

@@ -1,5 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
-import { GPUBindingType, GPUTextureViewDimension } from './constants.js';
+import { GPUBindingType, GPUTextureViewDimension, GPUTextureAspect } from './constants.js';
 
 class WebGPUSampledTexture extends WebGPUBinding {
 
@@ -16,6 +16,8 @@ class WebGPUSampledTexture extends WebGPUBinding {
 		this.type = GPUBindingType.SampledTexture;
 		this.visibility = GPUShaderStage.FRAGMENT;
 
+		this.aspect = texture.isDepthTexture ? GPUTextureAspect.DepthOnly : GPUTextureAspect.All;
+
 		this.textureGPU = null; // set by the renderer
 
 	}

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -1,8 +1,8 @@
-import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
+import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension, GPUFeatureName } from './constants.js';
 import { VideoTexture, CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping, RGB_ETC2_Format, RGBA_ETC2_EAC_Format,
-	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthTexture,
+	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthStencilFormat, DepthTexture,
 	RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format,
-	RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, UnsignedIntType, UnsignedShortType
+	RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, UnsignedIntType, UnsignedShortType, UnsignedInt248Type
 } from 'three';
 import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
@@ -37,13 +37,11 @@ class WebGPUTextures {
 
 	}
 
-	getDepthDefaultTexture() {
+	getDefaultDepthTexture() {
 
 		if ( this.depthDefaultTexture === null ) {
 
 			const depthTexture = new DepthTexture();
-			depthTexture.minFilter = NearestFilter;
-			depthTexture.magFilter = NearestFilter;
 			depthTexture.image.width = 1;
 			depthTexture.image.height = 1;
 
@@ -75,7 +73,7 @@ class WebGPUTextures {
 
 	}
 
-	getVideoDefaultTexture() {
+	getDefaultVideoTexture() {
 
 		if ( this.defaultVideoTexture === null ) {
 
@@ -828,6 +826,33 @@ class WebGPUTextures {
 
 					break;
 
+				case DepthStencilFormat:
+
+					switch ( type ) {
+
+						case UnsignedInt248Type:
+							formatGPU = GPUTextureFormat.Depth24PlusStencil8;
+							break;
+
+						case FloatType:
+
+							if ( this.device.features.has( GPUFeatureName.Depth32FloatStencil8 ) === false ) {
+
+								console.error( 'WebGPURenderer: Depth textures with DepthStencilFormat + FloatType can only be used with the "depth32float-stencil8" GPU feature.' );
+
+							}
+
+							formatGPU = GPUTextureFormat.Depth32FloatStencil8;
+
+							break;
+
+						default:
+							console.error( 'WebGPURenderer: Unsupported texture type with DepthStencilFormat.', type );
+
+					}
+
+					break;
+
 				default:
 					console.error( 'WebGPURenderer: Unsupported texture format.', format );
 

examples/jsm/renderers/webgpu/constants.js

@@ -290,6 +290,12 @@ export const GPUTextureViewDimension = {
 	ThreeD: '3d'
 };
 
+export const GPUTextureAspect = {
+	All: 'all',
+	StencilOnly: 'stencil-only',
+	DepthOnly: 'depth-only'
+};
+
 export const GPUInputStepMode = {
 	Vertex: 'vertex',
 	Instance: 'instance'