NodeMaterialObserver: Force refresh for video textures.

examples/webgpu_lights_projector.html

@@ -23,11 +23,6 @@
 			}
 		</script>
 
-		<video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
-			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
-			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-		</video>
-
 		<script type="module">
 
 			import * as THREE from 'three';
@@ -161,9 +156,9 @@
 					shadows: true,
 				};
 
-				let videoTexture, mapTexture;
+				let mapTexture;
 
-				gui.add( params, 'type', [ 'procedural', 'video', 'texture' ] ).onChange( function ( val ) {
+				gui.add( params, 'type', [ 'procedural', 'texture' ] ).onChange( function ( val ) {
 
 					projectorLight.colorNode = null;
 					projectorLight.map = null;
@@ -174,21 +169,6 @@
 
 						focus.setValue( 1 );
 
-					} else if ( val === 'video' ) {
-
-						if ( videoTexture === undefined ) {
-
-							const video = document.getElementById( 'video' );
-							video.play();
-
-							videoTexture = new THREE.VideoTexture( video );
-
-						}
-
-						projectorLight.map = videoTexture;
-
-						focus.setValue( .46 );
-
 					} else if ( val === 'texture' ) {
 
 						mapTexture = loader.load( 'colors.png' );

src/lights/SpotLight.js

@@ -109,6 +109,7 @@ class SpotLight extends Light {
 		 * reproduced using pixel values (0, 0, 0, 1-cookie_value).
 		 *
 		 * *Warning*: This property is disabled if {@link Object3D#castShadow} is set to `false`.
+		 * Besides, instances of `VideoTexture` are not supported.
 		 *
 		 * @type {?Texture}
 		 * @default null

src/materials/nodes/manager/NodeMaterialObserver.js

@@ -299,9 +299,10 @@ class NodeMaterialObserver {
 	 * Returns `true` if the given render object has not changed its state.
 	 *
 	 * @param {RenderObject} renderObject - The render object.
+	 * @param {NodeFrame} nodeFrame - The current node frame.
 	 * @return {boolean} Whether the given render object has changed its state or not.
 	 */
-	equals( renderObject ) {
+	equals( renderObject, nodeFrame ) {
 
 		const { object, material, geometry } = renderObject;
 
@@ -338,7 +339,11 @@ class NodeMaterialObserver {
 
 			} else if ( mtlValue.isTexture === true ) {
 
-				if ( value.id !== mtlValue.id || value.version !== mtlValue.version ) {
+				if ( mtlValue.isVideoTexture && nodeFrame.renderer.backend.isWebGPUBackend === true ) {
+
+					return false; // video textures in WebGPU always require fresh bindings
+
+				} else if ( value.id !== mtlValue.id || value.version !== mtlValue.version ) {
 
 					value.id = mtlValue.id;
 					value.version = mtlValue.version;
@@ -516,7 +521,7 @@ class NodeMaterialObserver {
 		if ( isStatic || isBundle )
 			return false;
 
-		const notEqual = this.equals( renderObject ) !== true;
+		const notEqual = this.equals( renderObject, nodeFrame ) !== true;
 
 		return notEqual;
 

src/renderers/webgpu/utils/WebGPUBindingUtils.js

@@ -39,6 +39,13 @@ class WebGPUBindingUtils {
 		 */
 		this.bindGroupLayoutCache = new WeakMap();
 
+		/**
+		 * A cache for external textures.
+		 *
+		 * @type {WeakMap<VideoTexture,Object>}
+		 */
+		this.externalTextureCache = new WeakMap();
+
 	}
 
 	/**
@@ -419,7 +426,29 @@ class WebGPUBindingUtils {
 
 				if ( textureData.externalTexture !== undefined ) {
 
-					resourceGPU = device.importExternalTexture( { source: textureData.externalTexture } );
+					let cache = this.externalTextureCache.get( binding.texture );
+
+					if ( cache === undefined ) {
+
+						// create initial cache object
+
+						cache = { frameId: - 1, resourceGPU: null };
+
+						this.externalTextureCache.set( binding.texture, cache );
+
+					}
+
+					const frameId = this.backend.renderer._nodes.nodeFrame.frameId;
+
+					if ( cache.frameId !== frameId ) {
+
+						cache.frameId = frameId;
+
+						cache.resourceGPU = device.importExternalTexture( { source: textureData.externalTexture } );
+
+					}
+
+					resourceGPU = cache.resourceGPU;
 
 				} else {