TSL Transpiler: Basic texture support. (#30521)

* TSL Transpiler: Basic texture support.

* TSLEncoder: Fix placeholders.

examples/jsm/transpiler/GLSLDecoder.js

@@ -34,6 +34,10 @@ const glslToTSL = {
 	inversesqrt: 'inverseSqrt'
 };
 
+const samplers = [ 'sampler1D', 'sampler2D', 'sampler2DArray', 'sampler2DShadow', 'sampler2DArrayShadow', 'isampler2D', 'isampler2DArray', 'usampler2D', 'usampler2DArray' ];
+const samplersCube = [ 'samplerCube', 'samplerCubeShadow', 'usamplerCube', 'isamplerCube' ];
+const samplers3D = [ 'sampler3D', 'isampler3D', 'usampler3D' ];
+
 const spaceRegExp = /^((\t| )\n*)+/;
 const lineRegExp = /^\n+/;
 const commentRegExp = /^\/\*[\s\S]*?\*\//;
@@ -719,9 +723,15 @@ class GLSLDecoder {
 
 		const tokens = this.readTokensUntil( ';' );
 
-		const type = tokens[ 1 ].str;
+		let type = tokens[ 1 ].str;
 		const name = tokens[ 2 ].str;
 
+		// GLSL to TSL types
+
+		if ( samplers.includes( type ) ) type = 'texture';
+		else if ( samplersCube.includes( type ) ) type = 'cubeTexture';
+		else if ( samplers3D.includes( type ) ) type = 'texture3D';
+
 		return new Uniform( type, name );
 
 	}

examples/jsm/transpiler/TSLEncoder.js

@@ -44,6 +44,8 @@ const unaryLib = {
 	'--': 'decrement' // decrementBefore
 };
 
+const textureLookupFunctions = [ 'texture', 'texture2D', 'texture3D', 'textureCube', 'textureLod', 'texelFetch', 'textureGrad' ];
+
 const isPrimitive = ( value ) => /^(true|false|-?(\d|\.\d))/.test( value );
 
 class TSLEncoder {
@@ -80,13 +82,12 @@ class TSLEncoder {
 	emitUniform( node ) {
 
 		let code = `const ${ node.name } = `;
+		this.global.add( node.name );
 
 		if ( this.reference === true ) {
 
 			this.addImport( 'reference' );
 
-			this.global.add( node.name );
-
 			//code += `reference( '${ node.name }', '${ node.type }', uniforms )`;
 
 			// legacy
@@ -94,11 +95,33 @@ class TSLEncoder {
 
 		} else {
 
-			this.addImport( 'uniform' );
+			if ( node.type === 'texture' ) {
+
+				this.addImport( 'texture' );
+
+				code += 'texture( /* <THREE.Texture> */ )';
+
+			} else if ( node.type === 'cubeTexture' ) {
+
+				this.addImport( 'cubeTexture' );
+
+				code += 'cubeTexture( /* <THREE.CubeTexture> */ )';
+
+			} else if ( node.type === 'texture3D' ) {
 
-			this.global.add( node.name );
+				this.addImport( 'texture3D' );
 
-			code += `uniform( '${ node.type }' )`;
+				code += 'texture3D( /* <THREE.Data3DTexture> */ )';
+
+			} else {
+
+				// default uniform
+
+				this.addImport( 'uniform' );
+
+				code += `uniform( '${ node.type }' )`;
+
+			}
 
 		}
 
@@ -173,11 +196,43 @@ class TSLEncoder {
 
 			}
 
-			this.addImport( node.name );
+			// handle texture lookup function calls in separate branch
+
+			if ( textureLookupFunctions.includes( node.name ) ) {
+
+				code = `${ params[ 0 ] }.sample( ${ params[ 1 ] } )`;
 
-			const paramsStr = params.length > 0 ? ' ' + params.join( ', ' ) + ' ' : '';
+				if ( node.name === 'texture' || node.name === 'texture2D' || node.name === 'texture3D' || node.name === 'textureCube' ) {
 
-			code = `${ node.name }(${ paramsStr })`;
+					if ( params.length === 3 ) {
+
+						code += `.bias( ${ params[ 2 ] } )`;
+
+					}
+
+				} else if ( node.name === 'textureLod' ) {
+
+					code += `.level( ${ params[ 2 ] } )`;
+
+				} else if ( node.name === 'textureGrad' ) {
+
+					code += `.grad( ${ params[ 2 ] }, ${ params[ 3 ] } )`;
+
+				} else if ( node.name === 'texelFetch' ) {
+
+					code += '.setSampler( false )';
+
+				}
+
+			} else {
+
+				this.addImport( node.name );
+
+				const paramsStr = params.length > 0 ? ' ' + params.join( ', ' ) + ' ' : '';
+
+				code = `${ node.name }(${ paramsStr })`;
+
+			}
 
 		} else if ( node.isReturn ) {