code · pull · May 3, 2026 · May 3, 2026 · May 3, 2026
diff --git a/examples/files.json b/examples/files.json
@@ -343,6 +343,7 @@
 		"webgpu_display_stereo",
 		"webgpu_equirectangular",
 		"webgpu_fog_height",
+		"webgpu_furnace_test",
 		"webgpu_hdr",
 		"webgpu_instance_mesh",
 		"webgpu_instance_path",

diff --git a/examples/screenshots/webgpu_furnace_test.jpg b/examples/screenshots/webgpu_furnace_test.jpg
diff --git a/examples/webgpu_furnace_test.html b/examples/webgpu_furnace_test.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - white furnace test</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="example.css">
+	</head>
+	<body>
+
+		<div id="info" class="invert">
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>White Furnace Energy Conservation Test</span>
+			</div>
+
+			<small>
+				<br>Roughness increases left to right
+				<br>Metalness increases top to bottom
+			</small>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			let scene, camera, renderer, radianceMap;
+
+			const COLOR = 0xcccccc;
+
+			async function init() {
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = width / height;
+
+				// renderer
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setSize( width, height );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				document.body.appendChild( renderer.domElement );
+
+				await renderer.init();
+
+				// scene
+
+				scene = new THREE.Scene();
+
+				// camera
+
+				camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
+				camera.position.set( 0, 0, 18 );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				document.body.addEventListener( 'mouseover', function () {
+
+					scene.traverse( function ( child ) {
+
+						if ( child.isMesh ) child.material.color.setHex( 0xffffff );
+
+					} );
+
+					render();
+
+				} );
+
+				document.body.addEventListener( 'mouseout', function () {
+
+					scene.traverse( function ( child ) {
+
+						if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
+
+					} );
+
+					render();
+
+				} );
+			}
+
+			function createObjects() {
+
+				const geometry = new THREE.SphereGeometry( 0.4, 32, 16 );
+
+				for ( let x = 0; x <= 10; x ++ ) {
+
+					for ( let y = 0; y <= 10; y ++ ) {
+
+						const material = new THREE.MeshPhysicalMaterial( {
+							roughness: x / 10,
+							metalness: y / 10,
+							color: 0xffffff,
+							envMap: radianceMap,
+							envMapIntensity: 1,
+							transmission: 0,
+							ior: 1.5
+						} );
+
+						const mesh = new THREE.Mesh( geometry, material );
+						mesh.position.x = x - 5;
+						mesh.position.y = 5 - y;
+						scene.add( mesh );
+
+					}
+
+				}
+
+			}
+
+			function createEnvironment() {
+
+				const envScene = new THREE.Scene();
+				envScene.background = new THREE.Color( COLOR );
+
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
+				radianceMap = pmremGenerator.fromScene( envScene ).texture;
+				pmremGenerator.dispose();
+
+				scene.background = envScene.background;
+
+			}
+
+			function onWindowResize() {
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+				render();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+			Promise.resolve()
+				.then( init )
+				.then( createEnvironment )
+				.then( createObjects )
+				.then( render );
+
+		</script>
+	</body>
+</html>
diff --git a/src/nodes/tsl/TSLCore.js b/src/nodes/tsl/TSLCore.js
@@ -506,13 +506,15 @@ class ShaderCallNodeInternal extends Node {
 
 		if ( shaderNode.layout ) {
 
-			let functionNodesCacheMap = nodeBuilderFunctionsCacheMap.get( builder.constructor );
+			const backend = builder.renderer.backend;
+
+			let functionNodesCacheMap = nodeBuilderFunctionsCacheMap.get( backend );
 
 			if ( functionNodesCacheMap === undefined ) {
 
 				functionNodesCacheMap = new WeakMap();
 
-				nodeBuilderFunctionsCacheMap.set( builder.constructor, functionNodesCacheMap );
+				nodeBuilderFunctionsCacheMap.set( backend, functionNodesCacheMap );
 
 			}