Transpiler: Fix `shader_toy` example and update `three/tsl` import (#28788)

examples/jsm/transpiler/TSLEncoder.js

@@ -501,7 +501,9 @@ ${ this.tab }} )`;
 
 		this.addImport( 'overloadingFn' );
 
-		return `export const ${ name } = /*#__PURE__*/ overloadingFn( [ ${ nodes.map( node => node.name + '_' + nodes.indexOf( node ) ).join( ', ' ) } ] );\n`;
+		const prefix = this.iife === false ? 'export ' : '';
+
+		return `${ prefix }const ${ name } = /*#__PURE__*/ overloadingFn( [ ${ nodes.map( node => node.name + '_' + nodes.indexOf( node ) ).join( ', ' ) } ] );\n`;
 
 	}
 
@@ -582,7 +584,9 @@ ${ this.tab }} )`;
 
 		}
 
-		let funcStr = `export const ${ fnName } = /*#__PURE__*/ tslFn( (${ paramsStr }) => {
+		const prefix = this.iife === false ? 'export ' : '';
+
+		let funcStr = `${ prefix }const ${ fnName } = /*#__PURE__*/ tslFn( (${ paramsStr }) => {
 
 ${ bodyStr }
 
@@ -684,6 +688,7 @@ ${ this.tab }} )`;
 		}
 
 		const imports = [ ...this.imports ];
+		const exports = [ ...this.global ];
 
 		let header = '// Three.js Transpiler r' + THREE.REVISION + '\n\n';
 		let footer = '';
@@ -693,12 +698,13 @@ ${ this.tab }} )`;
 			header += '( function ( TSL, uniforms ) {\n\n';
 
 			header += imports.length > 0 ? '\tconst { ' + imports.join( ', ' ) + ' } = TSL;\n' : '';
+			footer += exports.length > 0 ? '\treturn { ' + exports.join( ', ' ) + ' };\n' : '';
 
 			footer += '\n} );';
 
 		} else {
 
-			header += imports.length > 0 ? 'import { ' + imports.join( ', ' ) + ' } from \'three/nodes\';\n' : '';
+			header += imports.length > 0 ? 'import { ' + imports.join( ', ' ) + ' } from \'three/tsl\';\n' : '';
 
 		}
 

examples/webgpu_shadertoy.html

@@ -169,7 +169,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { oscSine, timerLocal } from 'three/tsl';
+			import * as TSL from 'three/tsl';
 
 			import Transpiler from 'three/addons/transpiler/Transpiler.js';
 			import ShaderToyDecoder from 'three/addons/transpiler/ShaderToyDecoder.js';
@@ -203,7 +203,7 @@
 
 					const jsCode = this.transpile( glsl, true );
 
-					const { mainImage } = eval( jsCode )( THREE );
+					const { mainImage } = eval( jsCode )( TSL );
 
 					this.mainImage = mainImage;
 
@@ -258,7 +258,7 @@
 				const geometry = new THREE.PlaneGeometry( 2, 2 );
 
 				const material = new THREE.MeshBasicNodeMaterial();
-				material.colorNode = oscSine( timerLocal( .3 ) ).mix( shaderToy1Node, shaderToy2Node );
+				material.colorNode = TSL.oscSine( TSL.timerLocal( .3 ) ).mix( shaderToy1Node, shaderToy2Node );
 
 				const quad = new THREE.Mesh( geometry, material );
 				scene.add( quad );