WebGPURenderer: Added VideoTexture support

examples/files.json

@@ -341,6 +341,7 @@
 		"webgpu_lights_selective",
 		"webgpu_loader_gltf",
 		"webgpu_materials",
+		"webgpu_materials_video",
 		"webgpu_nodes_playground",
 		"webgpu_particles",
 		"webgpu_rtt",

examples/jsm/nodes/accessors/TextureNode.js

@@ -106,7 +106,11 @@ class TextureNode extends UniformNode {
 
 				let snippet = null;
 
-				if ( levelNode && levelNode.isNode === true ) {
+				if ( texture.isVideoTexture === true ) {
+
+					snippet = builder.getVideoTexture( textureProperty, uvSnippet );
+
+				} else if ( levelNode && levelNode.isNode === true ) {
 
 					const levelSnippet = levelNode.build( builder, 'float' );
 

examples/jsm/renderers/webgpu/WebGPUBindings.js

@@ -235,7 +235,7 @@ class WebGPUBindings {
 
 				}
 
-				entries.push( { binding: bindingPoint, resource: binding.textureGPU.createView( { dimension: binding.dimension } ) } );
+				entries.push( { binding: bindingPoint, resource: binding.textureGPU } );
 
 			}
 

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -122,7 +122,15 @@ class WebGPUTextures {
 
 				//
 
-				needsUpdate = this._uploadTexture( texture );
+				if ( texture.isVideoTexture ) {
+
+					needsUpdate = this._uploadVideoTexture( texture );
+
+				} else {
+
+					needsUpdate = this._uploadTexture( texture );
+
+				}
 
 			}
 
@@ -296,6 +304,35 @@ class WebGPUTextures {
 
 	}
 
+	_uploadVideoTexture( texture ) {
+
+		let needsUpdate = false;
+
+		const device = this.device;
+
+		const textureProperties = this.properties.get( texture );
+
+		let textureGPU = textureProperties.textureGPU;
+
+		if ( textureGPU === undefined || textureGPU.expired ) {
+
+			textureGPU = device.importExternalTexture( {
+				source: texture.source.data
+			} );
+
+			needsUpdate = true;
+
+		}
+
+		//
+
+		textureProperties.textureGPU = textureGPU;
+		textureProperties.version = texture.version;
+
+		return needsUpdate;
+
+	}
+
 	_uploadTexture( texture ) {
 
 		let needsUpdate = false;
@@ -341,7 +378,6 @@ class WebGPUTextures {
 		if ( textureGPU === undefined ) {
 
 			textureGPU = device.createTexture( textureGPUDescriptor );
-			textureProperties.textureGPU = textureGPU;
 
 			needsUpdate = true;
 
@@ -367,24 +403,23 @@ class WebGPUTextures {
 
 			}
 
-		} else {
+		} else if ( image !== null ) {
 
-			if ( image !== null ) {
+			// assume HTMLImageElement, HTMLCanvasElement or ImageBitmap
 
-				// assume HTMLImageElement, HTMLCanvasElement or ImageBitmap
+			this._getImageBitmap( image, texture ).then( imageBitmap => {
 
-				this._getImageBitmap( image, texture ).then( imageBitmap => {
+				this._copyExternalImageToTexture( imageBitmap, textureGPU );
 
-					this._copyExternalImageToTexture( imageBitmap, textureGPU );
+				if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor );
 
-					if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor );
-
-				} );
-
-			}
+			} );
 
 		}
 
+		//
+
+		textureProperties.textureGPU = textureGPU.createView( { dimension } );
 		textureProperties.version = texture.version;
 
 		return needsUpdate;

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

@@ -187,6 +187,20 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	getVideoTexture( 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 vertex shader.' );
+
+		}
+
+	}
+
 	getPropertyName( node, shaderStage = this.shaderStage ) {
 
 		if ( node.isNodeVarying === true && node.needsInterpolation === true ) {
@@ -537,7 +551,17 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_2d<f32>;` );
+				const texture = uniform.node.value;
+
+				if ( texture.isVideoTexture === true ) {
+
+					bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_external;` );
+
+				} else {
+
+					bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_2d<f32>;` );
+
+				}
 
 			} else if ( uniform.type === 'cubeTexture' ) {