WebGPU: Updated webgpu_loader_gltf to match webgl_loader_gltf (#25812)

* WebGPU: Updated webgpu_loader_gltf to match webgl_loader_gltf.

* render() after resize

* WebGPUTextures: Upload texture in the same frame if possible and cleanup. (#25821)

* WebGPUTextures: Upload texture in the same frame if possible and cleanup.

* WebGPUTextures: cleanup

---------

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

examples/webgpu_loader_gltf.html

@@ -32,12 +32,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { cubeTexture, texture, normalMap, toneMapping } from 'three/nodes';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
-			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -65,60 +64,43 @@
 
 				scene = new THREE.Scene();
 
-				const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				new RGBELoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'royal_esplanade_1k.hdr', function ( texture ) {
 
-				const cubeMap = new RGBMLoader()
-					.setMaxRange( 16 )
-					.setPath( './textures/cube/pisaRGBM16/' )
-					.loadCubemap( rgbmUrls );
+						texture.mapping = THREE.EquirectangularReflectionMapping;
 
-				cubeMap.generateMipmaps = true;
-				cubeMap.minFilter = THREE.LinearMipmapLinearFilter;
+						scene.background = texture;
+						scene.environment = texture;
 
-				scene.environmentNode = cubeTexture( cubeMap );
-				scene.backgroundNode = scene.environmentNode;
+						render();
 
-				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
-				loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
+						// model
 
-					//const light = new THREE.PointLight( 0xffffff );
-					//camera.add( light );
+						const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
 
-					const mesh = gltf.scene.children[ 0 ];
-					const material = mesh.material;
+							scene.add( gltf.scene );
 
-					const oldNormalMap = material.normalMap;
-					material.normalNode = normalMap( texture( oldNormalMap ) );
-					material.normalMap = null; // ignore non-node normalMap material
+							render();
 
-					// optional: use tangent to compute normalMap
-					mesh.geometry.computeTangents();
+						} );
 
-					scene.add( gltf.scene );
+					} );
 
-					render();
-
-				} );
-
-				renderer = new WebGPURenderer();
-
-				/*// WebGLRenderer comparation test
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.toneMapping = THREE.LinearToneMapping;
-				renderer.toneMappingExposure = 1;
-				scene.environment = cubeTexture;
-				document.getElementById( 'info' ).innerText = 'WebGL';
-				/**/
 
+				renderer = new WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( render );
-				renderer.toneMappingNode = toneMapping( THREE.LinearToneMapping, 1 );
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render ); // use if there is no animation loop
 				controls.minDistance = 2;
 				controls.maxDistance = 10;
+				controls.target.set( 0, 0, - 0.2 );
+				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -131,6 +113,8 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				render();
+
 			}
 
 			//