From e74c65530124b9f799764c6266658c363a7fc870 Mon Sep 17 00:00:00 2001
From: aardgoose <angus.sawyer@gmail.com>
Date: Mon, 18 Sep 2023 18:21:40 +0100
Subject: [PATCH] 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 <angus.sawyer@email.com>
---
 .../jsm/nodes/accessors/TextureSizeNode.js    |  2 +-
 examples/jsm/renderers/webgl/WebGLBackend.js  | 22 ++++++++++++++++---
 .../renderers/webgl/nodes/GLSLNodeBuilder.js  |  7 +++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/examples/jsm/nodes/accessors/TextureSizeNode.js b/examples/jsm/nodes/accessors/TextureSizeNode.js
index 04501f1a16fdd1..cf8211c28f3dad 100644
--- a/examples/jsm/nodes/accessors/TextureSizeNode.js
+++ b/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 );
 
 	}
 
diff --git a/examples/jsm/renderers/webgl/WebGLBackend.js b/examples/jsm/renderers/webgl/WebGLBackend.js
index 589fe897e35887..600fb2f9ce7d1f 100644
--- a/examples/jsm/renderers/webgl/WebGLBackend.js
+++ b/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 );
diff --git a/examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js b/examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js
index 6ba1c187406804..311aae9ae95407 100644
--- a/examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js
+++ b/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} )`;