WebGPURenderer: DepthTexture (#25766)

* FogNode: Update from construct API.

* webgpu_rtt: update example API

* WebGPURenderer: New Cache System

* WebGPURenderer: Update cacheKey after needsUpdate.

* final revision (1)

* RenderObject pipeline based ( 1/2 )

* RenderObject pipeline based ( 2/2 )

* cleanup

* fix possible overrideMaterial material with .wireframe and cleanup

* Revert "fix possible overrideMaterial material with .wireframe and cleanup"

This reverts commit 7dcd85e8a84eaf4c90ec7b7a9b3827c359addb1f.

* Revert "Revert "fix possible overrideMaterial material with .wireframe and cleanup""

This reverts commit 5370b40c1dddd384cdd9df49a4d1aec60a318336.

* preserve nodes if pipeline is removed

* WebGPURenderObjects: Move get*Node() to WebGPUNodes.

* WebGPURenderer: DepthTexture

* revision

* revision

* Move getCubeTexture() to getTexture()

examples/jsm/nodes/accessors/CubeTextureNode.js

@@ -69,11 +69,11 @@ class CubeTextureNode extends TextureNode {
 
 					const levelSnippet = levelNode.build( builder, 'float' );
 
-					snippet = builder.getCubeTextureLevel( textureProperty, uvSnippet, levelSnippet );
+					snippet = builder.getTextureLevel( this, textureProperty, uvSnippet, levelSnippet );
 
 				} else {
 
-					snippet = builder.getCubeTexture( textureProperty, uvSnippet );
+					snippet = builder.getTexture( this, textureProperty, uvSnippet );
 
 				}
 

examples/jsm/nodes/accessors/TextureNode.js

@@ -9,7 +9,7 @@ class TextureNode extends UniformNode {
 
 	constructor( value, uvNode = null, levelNode = null ) {
 
-		super( value, 'vec4' );
+		super( value );
 
 		this.isTextureNode = true;
 
@@ -24,6 +24,14 @@ class TextureNode extends UniformNode {
 
 	}
 
+	getNodeType( /*builder*/ ) {
+
+		if ( this.value.isDepthTexture === true ) return 'float';
+
+		return 'vec4';
+
+	}
+
 	getInputType( /*builder*/ ) {
 
 		return 'texture';
@@ -81,7 +89,7 @@ class TextureNode extends UniformNode {
 
 		}
 
-		const textureProperty = super.generate( builder, 'texture' );
+		const textureProperty = super.generate( builder, 'property' );
 
 		if ( output === 'sampler' ) {
 
@@ -93,6 +101,7 @@ class TextureNode extends UniformNode {
 
 		} else {
 
+			const nodeType = this.getNodeType( builder );
 			const nodeData = builder.getDataFromNode( this );
 
 			let propertyName = nodeData.propertyName;
@@ -100,25 +109,21 @@ class TextureNode extends UniformNode {
 			if ( propertyName === undefined ) {
 
 				const uvSnippet = uvNode.build( builder, 'vec2' );
-				const nodeVar = builder.getVarFromNode( this, 'vec4' );
+				const nodeVar = builder.getVarFromNode( this, nodeType );
 
 				propertyName = builder.getPropertyName( nodeVar );
 
 				let snippet = null;
 
-				if ( texture.isVideoTexture === true ) {
-
-					snippet = builder.getVideoTexture( textureProperty, uvSnippet );
-
-				} else if ( levelNode && levelNode.isNode === true ) {
+				if ( levelNode && levelNode.isNode === true ) {
 
 					const levelSnippet = levelNode.build( builder, 'float' );
 
-					snippet = builder.getTextureLevel( textureProperty, uvSnippet, levelSnippet );
+					snippet = builder.getTextureLevel( texture, textureProperty, uvSnippet, levelSnippet );
 
 				} else {
 
-					snippet = builder.getTexture( textureProperty, uvSnippet );
+					snippet = builder.getTexture( texture, textureProperty, uvSnippet );
 
 				}
 
@@ -129,7 +134,7 @@ class TextureNode extends UniformNode {
 
 			}
 
-			return builder.format( propertyName, 'vec4', output );
+			return builder.format( propertyName, nodeType, output );
 
 		}
 

examples/jsm/nodes/core/NodeBuilder.js

@@ -210,25 +210,13 @@ class NodeBuilder {
 
 	}
 
-	getTexture( /* textureProperty, uvSnippet */ ) {
+	getTexture( /* texture, textureProperty, uvSnippet */ ) {
 
 		console.warn( 'Abstract function.' );
 
 	}
 
-	getTextureLevel( /* textureProperty, uvSnippet, levelSnippet */ ) {
-
-		console.warn( 'Abstract function.' );
-
-	}
-
-	getCubeTexture( /* textureProperty, uvSnippet */ ) {
-
-		console.warn( 'Abstract function.' );
-
-	}
-
-	getCubeTextureLevel( /* textureProperty, uvSnippet, levelSnippet */ ) {
+	getTextureLevel( /* texture, textureProperty, uvSnippet, levelSnippet */ ) {
 
 		console.warn( 'Abstract function.' );
 

examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js

@@ -422,27 +422,21 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getTexture( textureProperty, uvSnippet ) {
+	getTexture( texture, textureProperty, uvSnippet ) {
 
-		return `texture2D( ${textureProperty}, ${uvSnippet} )`;
+		if ( texture.isTextureCube ) {
 
-	}
-
-	getTextureBias( textureProperty, uvSnippet, biasSnippet ) {
+			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
 
-		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
-
-		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
-
-	}
+		} else {
 
-	getCubeTexture( textureProperty, uvSnippet ) {
+			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
 
-		return `textureCube( ${textureProperty}, ${uvSnippet} )`;
+		}
 
 	}
 
-	getCubeTextureBias( textureProperty, uvSnippet, biasSnippet ) {
+	getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
 
 		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
 

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -25,7 +25,7 @@ class WebGPUBackground {
 
 	}
 
-	update( renderList, scene ) {
+	update( renderList, scene, renderPassDescriptor, renderAttachments ) {
 
 		const renderer = this.renderer;
 		const background = ( scene.isScene === true ) ? scene.backgroundNode || this.properties.get( scene ).backgroundNode || scene.background : null;
@@ -103,7 +103,6 @@ class WebGPUBackground {
 
 		// configure render pass descriptor
 
-		const renderPassDescriptor = renderer._renderPassDescriptor;
 		const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
 		const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
 
@@ -124,29 +123,37 @@ class WebGPUBackground {
 
 			}
 
-			if ( renderer.autoClearDepth === true ) {
+			if ( renderAttachments.depth ) {
 
-				depthStencilAttachment.depthClearValue = renderer._clearDepth;
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
-				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+				if ( renderer.autoClearDepth === true ) {
 
-			} else {
+					depthStencilAttachment.depthClearValue = renderer._clearDepth;
+					depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+					depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
 
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
-				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+				} else {
+
+					depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+					depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+				}
 
 			}
 
-			if ( renderer.autoClearStencil === true ) {
+			if ( renderAttachments.stencil ) {
 
-				depthStencilAttachment.stencilClearValue = renderer._clearStencil;
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
-				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+				if ( renderer.autoClearStencil === true ) {
 
-			} else {
+					depthStencilAttachment.stencilClearValue = renderer._clearStencil;
+					depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+					depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
 
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
-				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+				} else {
+
+					depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+					depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+				}
 
 			}
 
@@ -155,11 +162,19 @@ class WebGPUBackground {
 			colorAttachment.loadOp = GPULoadOp.Load;
 			colorAttachment.storeOp = GPUStoreOp.Store;
 
-			depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
-			depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+			if ( renderAttachments.depth ) {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			}
 
-			depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
-			depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+			if ( renderAttachments.stencil ) {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			}
 
 		}
 

examples/jsm/renderers/webgpu/WebGPUBindings.js

@@ -236,6 +236,10 @@ class WebGPUBindings {
 
 						binding.textureGPU = this.textures.getVideoDefaultTexture();
 
+					} else if ( binding.texture.isDepthTexture ) {
+
+						binding.textureGPU = this.textures.getDepthDefaultTexture();
+
 					} else {
 
 						binding.textureGPU = this.textures.getDefaultTexture();

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,4 @@
-import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import { GPUIndexFormat, GPUTextureFormat } from './constants.js';
 import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPURenderObjects from './WebGPURenderObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
@@ -15,7 +15,7 @@ import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
 import WebGPUUtils from './WebGPUUtils.js';
 
-import { Frustum, Matrix4, Vector3, Color, NoToneMapping, LinearSRGBColorSpace } from 'three';
+import { Frustum, Matrix4, Vector3, Color, LinearSRGBColorSpace, NoToneMapping, DepthFormat } from 'three';
 
 console.info( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.' );
 
@@ -138,8 +138,6 @@ class WebGPURenderer {
 
 		this._animation = new WebGPUAnimation();
 
-		this._renderPassDescriptor = null;
-
 		this._currentRenderState = null;
 
 		this._currentRenderList = null;
@@ -232,17 +230,6 @@ class WebGPURenderer {
 
 		//
 
-		this._renderPassDescriptor = {
-			colorAttachments: [ {
-				view: null
-			} ],
-			depthStencilAttachment: {
-				view: null,
-				depthStoreOp: GPUStoreOp.Store,
-				stencilStoreOp: GPUStoreOp.Store
-			}
-		};
-
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
@@ -288,8 +275,22 @@ class WebGPURenderer {
 
 		// prepare render pass descriptor
 
-		const colorAttachment = this._renderPassDescriptor.colorAttachments[ 0 ];
-		const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
+		const renderPassDescriptor = {
+			colorAttachments: [ {
+				view: null
+			} ],
+			depthStencilAttachment: {
+				view: null
+			}
+		};
+
+		const renderAttachments = {
+			depth: true,
+			stencil: true
+		};
+
+		const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
+		const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
 
 		const renderTarget = this._renderTarget;
 
@@ -304,6 +305,8 @@ class WebGPURenderer {
 			colorAttachment.view = renderTargetProperties.colorTextureGPU.createView();
 			depthStencilAttachment.view = renderTargetProperties.depthTextureGPU.createView();
 
+			renderAttachments.stencil = renderTarget.depthTexture ? renderTarget.depthTexture.format !== DepthFormat : true;
+
 		} else {
 
 			if ( this._parameters.antialias === true ) {
@@ -331,13 +334,13 @@ class WebGPURenderer {
 
 		//
 
-		this._background.update( this._currentRenderList, scene );
+		this._background.update( this._currentRenderList, scene, renderPassDescriptor, renderAttachments );
 
 		// start render pass
 
 		const device = this._device;
 		const cmdEncoder = device.createCommandEncoder( {} );
-		const passEncoder = cmdEncoder.beginRenderPass( this._renderPassDescriptor );
+		const passEncoder = cmdEncoder.beginRenderPass( renderPassDescriptor );
 
 		// global rasterization settings for all renderable objects
 

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -1,6 +1,6 @@
 import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
 import { VideoTexture, CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping,
-	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace
+	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthTexture
 } from 'three';
 import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
@@ -13,6 +13,7 @@ class WebGPUTextures {
 		this.info = info;
 
 		this.defaultTexture = null;
+		this.depthDefaultTexture = null;
 		this.defaultVideoTexture = null;
 		this.defaultCubeTexture = null;
 		this.defaultSampler = null;
@@ -34,6 +35,26 @@ class WebGPUTextures {
 
 	}
 
+	getDepthDefaultTexture() {
+
+		if ( this.depthDefaultTexture === null ) {
+
+			const depthTexture = new DepthTexture();
+			depthTexture.minFilter = NearestFilter;
+			depthTexture.magFilter = NearestFilter;
+			depthTexture.image.width = 1;
+			depthTexture.image.height = 1;
+
+			this._uploadTexture( depthTexture );
+
+			this.depthDefaultTexture = this.getTextureGPU( depthTexture );
+
+		}
+
+		return this.depthDefaultTexture;
+
+	}
+
 	getDefaultTexture() {
 
 		if ( this.defaultTexture === null ) {
@@ -245,7 +266,7 @@ class WebGPUTextures {
 
 			if ( renderTarget.depthBuffer === true ) {
 
-				const depthTextureFormat = GPUTextureFormat.Depth24PlusStencil8; // @TODO: Make configurable
+				const depthTextureFormat = renderTarget.depthTexture !== null ? this._getFormat( renderTarget.depthTexture ) : GPUTextureFormat.Depth24PlusStencil8;
 
 				const depthTextureGPU = device.createTexture( {
 					size: {
@@ -254,7 +275,7 @@ class WebGPUTextures {
 						depthOrArrayLayers: 1
 					},
 					format: depthTextureFormat,
-					usage: GPUTextureUsage.RENDER_ATTACHMENT
+					usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
 				} );
 
 				this.info.memory.textures ++;
@@ -412,7 +433,7 @@ class WebGPUTextures {
 
 			}
 
-		} else if ( image !== null ) {
+		} else if ( texture.isDepthTexture !== true && image !== null ) {
 
 			// assume HTMLImageElement, HTMLCanvasElement or ImageBitmap
 
@@ -625,6 +646,10 @@ class WebGPUTextures {
 				formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.BC3RGBAUnormSRGB : GPUTextureFormat.BC3RGBAUnorm;
 				break;
 
+			case DepthFormat:
+				formatGPU = GPUTextureFormat.Depth32Float;
+				break;
+
 			case RGBAFormat:
 
 				switch ( type ) {

examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -145,6 +145,20 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	getVideoSampler( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' ) {
+
+			return `textureSampleBaseClampToEdge( ${textureProperty}, ${textureProperty}_sampler, vec2<f32>( ${uvSnippet}.x, 1.0 - ${uvSnippet}.y ) )`;
+
+		} else {
+
+			console.error( `WebGPURenderer: THREE.VideoTexture does not support ${ shaderStage } shader.` );
+
+		}
+
+	}
+
 	getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
 		if ( shaderStage === 'fragment' ) {
@@ -163,42 +177,40 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
-	getTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
+	getTexture( texture, textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
-		return this.getSampler( textureProperty, uvSnippet, shaderStage );
+		let snippet = null;
 
-	}
+		if ( texture.isVideoTexture === true ) {
 
-	getTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
+			snippet = this.getVideoSampler( textureProperty, uvSnippet, shaderStage );
 
-		return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
+		} else {
 
-	}
+			snippet = this.getSampler( textureProperty, uvSnippet, shaderStage );
 
-	getCubeTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
+		}
 
-		return this.getSampler( textureProperty, uvSnippet, shaderStage );
+		return snippet;
 
 	}
 
-	getCubeTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
+	getTextureLevel( texture, textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
-		return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
+		let snippet = null;
 
-	}
-
-	getVideoTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
+		if ( texture.isVideoTexture === true ) {
 
-		if ( shaderStage === 'fragment' ) {
-
-			return `textureSampleBaseClampToEdge( ${textureProperty}, ${textureProperty}_sampler, vec2<f32>( ${uvSnippet}.x, 1.0 - ${uvSnippet}.y ) )`;
+			snippet = this.getVideoSampler( textureProperty, uvSnippet, shaderStage );
 
 		} else {
 
-			console.error( `WebGPURenderer: THREE.VideoTexture does not support ${ shaderStage } shader.` );
+			snippet = this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
 
 		}
 
+		return snippet;
+
 	}
 
 	getPropertyName( node, shaderStage = this.shaderStage ) {
@@ -542,6 +554,10 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					textureType = 'texture_cube<f32>';
 
+				} else if ( texture.isDepthTexture === true ) {
+
+					textureType = 'texture_depth_2d';
+
 				} else if ( texture.isVideoTexture === true ) {
 
 					textureType = 'texture_external';

examples/webgpu_depth_texture.html

@@ -52,16 +52,12 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 30 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 20 );
 				camera.position.z = 4;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x222222 );
-
-				// depth material
-
-				const material = new MeshBasicNodeMaterial();
-				material.colorNode = smoothstep( camera.near, camera.far, positionView.z.negate() ).oneMinus();
+				scene.overrideMaterial = new MeshBasicNodeMaterial();
 
 				//
 
@@ -76,7 +72,7 @@
 					const z = ( Math.random() * 2.0 ) - 1.0;
 					const zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					const mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry );
 					mesh.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,
@@ -95,7 +91,10 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
+				const depthTexture = new THREE.DepthTexture();
+
 				textureRenderer = new WebGPUTextureRenderer( renderer );
+				textureRenderer.renderTarget.depthTexture = depthTexture;
 				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -110,7 +109,7 @@
 				//
 
 				const materialFX = new MeshBasicNodeMaterial();
-				materialFX.colorNode = texture( textureRenderer.getTexture() );
+				materialFX.colorNode = texture( depthTexture );
 
 				const quad = new THREE.Mesh( geometryFX, materialFX );
 				sceneFX.add( quad );