WebGPURenderer: Texture fixes for WebGL backend (#26797)

* misc texture fixes

handle VideoTexture.
handle depth textures in GLSL shaders (depth in x component in returned
vec4())
map WGSL textureDimensions to GLSL textureSize()

Examples fixed

lights / ies /spotlights
video / panorama
material / video (partial)

* remove surplus entry

---------

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

examples/jsm/nodes/accessors/TextureSizeNode.js

@@ -20,7 +20,7 @@ class TextureSizeNode extends Node {
 		const textureProperty = this.textureNode.build( builder, 'property' );
 		const levelNode = this.levelNode.build( builder, 'int' );
 
-		return builder.format( `textureDimensions( ${textureProperty}, ${levelNode} )`, this.getNodeType( builder ), output );
+		return builder.format( `${builder.getMethod( 'textureDimensions' )}( ${textureProperty}, ${levelNode} )`, this.getNodeType( builder ), output );
 
 	}
 

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -282,7 +282,12 @@ class WebGLBackend extends Backend {
 		textureUtils.setTextureParameters( glTextureType, texture );
 
 		gl.bindTexture( glTextureType, textureGPU );
-		gl.texStorage2D( glTextureType, levels, glInternalFormat, width, height );
+
+		if ( ! texture.isVideoTexture ) {
+
+			gl.texStorage2D( glTextureType, levels, glInternalFormat, width, height );
+
+		}
 
 		this.set( texture, {
 			textureGPU,
@@ -298,7 +303,7 @@ class WebGLBackend extends Backend {
 
 		const { gl } = this;
 		const { width, height } = options;
-		const { textureGPU, glTextureType, glFormat, glType } = this.get( texture );
+		const { textureGPU, glTextureType, glFormat, glType, glInternalFormat } = this.get( texture );
 
 		const getImage = ( source ) => {
 
@@ -306,9 +311,13 @@ class WebGLBackend extends Backend {
 
 				return source.image.data;
 
+			} else if ( source instanceof ImageBitmap || source instanceof OffscreenCanvas ) {
+
+				return source;
+
 			}
 
-			return source;
+			return source.data;
 
 		};
 
@@ -326,6 +335,13 @@ class WebGLBackend extends Backend {
 
 			}
 
+		} else if ( texture.isVideoTexture ) {
+
+			texture.update();
+
+			gl.texImage2D( glTextureType, 0, glInternalFormat, glFormat, glType, options.image );
+
+
 		} else {
 
 			const image = getImage( options.image );

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

@@ -4,7 +4,8 @@ import UniformsGroup from '../../common/UniformsGroup.js';
 import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
 
 const glslMethods = {
-	[ MathNode.ATAN2 ]: 'atan'
+	[ MathNode.ATAN2 ]: 'atan',
+	textureDimensions: 'textureSize'
 };
 
 const precisionLib = {
@@ -35,6 +36,10 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
 
+		} else if ( texture.isDepthTexture ) {
+
+			return `texture( ${textureProperty}, ${uvSnippet} ).x`;
+
 		} else {
 
 			return `texture( ${textureProperty}, ${uvSnippet} )`;