Examples: Update deprecate async methods. (#32033)

* fixes

* remove init

* add more examples

* add more examples

* improve inspector for particles snow

* Update webgpu_instance_mesh.jpg

* add more examples

* Update webgpu_compute_texture_pingpong.html

* Update webgpu_instance_mesh.jpg

* updates

* Update webgpu_tsl_vfx_linkedparticles.html

examples/webgpu_compute_audio.html

@@ -56,7 +56,7 @@
 
 				// compute audio
 
-				await renderer.computeAsync( computeNode );
+				renderer.compute( computeNode );
 
 				const wave = new Float32Array( await renderer.getArrayBufferAsync( waveArray.value ) );
 
@@ -191,6 +191,8 @@
 				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				window.addEventListener( 'resize', onWindowResize );
 				document.addEventListener( 'click', playAudioBuffer );
 

examples/webgpu_compute_particles.html

@@ -55,7 +55,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				const { innerWidth, innerHeight } = window;
 
@@ -160,9 +160,11 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				//
 
-				renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
 				// Hit
 
@@ -205,7 +207,7 @@
 
 						// compute
 
-						renderer.computeAsync( computeHit );
+						renderer.compute( computeHit );
 
 					}
 

examples/webgpu_compute_particles_rain.html

@@ -53,7 +53,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				const { innerWidth, innerHeight } = window;
 
@@ -291,9 +291,11 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				//
 
-				renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
 				//
 

examples/webgpu_compute_particles_snow.html

@@ -155,7 +155,12 @@
 					const velocity = particleData.y;
 					const random = particleData.w;
 
-					const rippleOnSurface = texture( collisionPosRT.texture, getCoord( position.xz ) );
+					const rippleOnSurface = texture( collisionPosRT.texture, getCoord( position.xz ) ).toInspector( 'Collision Test', () => {
+
+						return texture( collisionPosRT.texture ).y; // .div( collisionCamera.position.y );
+
+					} );
+
 					const rippleFloorArea = rippleOnSurface.y.add( scale.x.mul( surfaceOffset ) );
 
 					If( position.y.greaterThan( rippleFloorArea ), () => {
@@ -283,6 +288,8 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				//
 
 				controls = new OrbitControls( camera, renderer.domElement );
@@ -310,17 +317,17 @@
 
 				// compose
 
-				let totalPass = scenePass;
+				let totalPass = scenePass.toInspector( 'Scene' );
 				totalPass = totalPass.add( scenePassColorBlurred.mul( .1 ) );
 				totalPass = totalPass.mul( vignette );
-				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ) );
+				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ).toInspector( 'Teapot Blur' ) );
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = totalPass;
 
 				//
 
-				await renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
 				//
 

examples/webgpu_compute_points.html

@@ -48,7 +48,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				camera = new THREE.OrthographicCamera( - 1.0, 1.0, 1.0, - 1.0, 0, 1 );
 				camera.position.z = 1;
@@ -107,7 +107,7 @@
 
 					} );
 
-					renderer.computeAsync( precomputeShaderNode().compute( particlesCount ) );
+					renderer.compute( precomputeShaderNode().compute( particlesCount ) );
 
 				} );
 
@@ -132,6 +132,8 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				window.addEventListener( 'resize', onWindowResize );
 				window.addEventListener( 'mousemove', onMouseMove );
 

examples/webgpu_compute_reduce.html

@@ -990,8 +990,10 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 
+				await renderer.init();
+
 				// Unfortunately, need to arbitrarily run compute shader to get access to device limits
-				await renderer.computeAsync( computeResetBuffer );
+				renderer.compute( computeResetBuffer );
 
 
 				if ( renderer.backend.device !== null ) {
@@ -1254,8 +1256,8 @@
 
 					if ( state === 'Reset' ) {
 
-						renderer.computeAsync( computeResetBuffer );
-						renderer.computeAsync( computeResetWorkgroupSums );
+						renderer.compute( computeResetBuffer );
+						renderer.compute( computeResetWorkgroupSums );
 
 					} else if ( state === 'Run Algo' ) {
 
@@ -1275,7 +1277,7 @@
 
 									const reduce0 = reduce0Calls[ i ];
 									// Do a reduction step
-									renderer.computeAsync( reduce0 );
+									renderer.compute( reduce0 );
 									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
 
 									m /= 2;
@@ -1293,7 +1295,7 @@
 
 								for ( let i = 0; i < currentAlgoCalls.length; i ++ ) {
 
-									renderer.computeAsync( currentAlgoCalls[ i ] );
+									renderer.compute( currentAlgoCalls[ i ] );
 									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
 
 								}

examples/webgpu_compute_sort_bitonic.html

@@ -310,6 +310,8 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 
+				await renderer.init();
+
 				const animate = () => {
 
 					renderer.render( scene, camera );
@@ -334,9 +336,9 @@
 				const computeInit = computeInitFn().compute( size );
 				const computeReset = computeResetBuffersFn().compute( size );
 
-				await renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
-				 const stepAnimation = async function () {
+				const stepAnimation = async function () {
 
 					renderer.info.reset();
 
@@ -541,6 +543,8 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 
+				await renderer.init();
+
 				const animate = () => {
 
 					renderer.render( scene, camera );
@@ -552,9 +556,9 @@
 				renderer.domElement.style.left = '50%';
 				scene.background = new THREE.Color( 0x212121 );
 
-				await renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
-				 const stepAnimation = async function () {
+				const stepAnimation = async function () {
 
 					if ( currentStep !== MAX_STEPS ) {
 

examples/webgpu_compute_texture.html

@@ -110,7 +110,7 @@
 				await renderer.init();
 
 				// compute texture
-				renderer.computeAsync( computeNode );
+				renderer.compute( computeNode );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgpu_compute_texture_3d.html

@@ -69,6 +69,8 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
@@ -202,8 +204,7 @@
 
 				//
 
-				await renderer.init();
-				await renderer.computeAsync( computeNode );
+				renderer.compute( computeNode );
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
 				gui.add( threshold, 'value', 0, 1, 0.01 ).name( 'threshold' );
@@ -226,7 +227,7 @@
 
 			function animate() {
 
-				renderer.computeAsync( computeNode );
+				renderer.compute( computeNode );
 				renderer.render( scene, camera );
 
 			}

examples/webgpu_compute_texture_pingpong.html

@@ -49,7 +49,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -171,11 +171,13 @@
 				renderer.setAnimationLoop( render );
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				window.addEventListener( 'resize', onWindowResize );
 
 				// compute init
 
-				renderer.computeAsync( computeInitNode );
+				renderer.compute( computeInitNode );
 
 			}
 

examples/webgpu_loader_gltf.html

@@ -67,32 +67,25 @@
 						scene.background = texture;
 						scene.environment = texture;
 
-						render();
-
-						// model
-
-						const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
-						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
-
-							scene.add( gltf.scene );
-
-							render();
+					} );
 
-						} );
+				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+				loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
 
-					} );
+					scene.add( gltf.scene );
 
+				} );
 
 				renderer = new THREE.WebGPURenderer( { antialias: true/*, compatibilityMode: true*/ } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
 				await renderer.init();
 
 				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 );
@@ -109,8 +102,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
 			//

examples/webgpu_performance_renderbundle.html

@@ -4,24 +4,43 @@
 	<title>three.js webgpu - renderbundle</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="main.css">
+	<link type="text/css" rel="stylesheet" href="example.css">
+</head>
+
+<body>
+
 	<style>
-		#info {
-			background-color: rgba(0,0,0,0.75);
+
+		#backend {
+			position: absolute;
+			top: 70px;
+			left: 0;
+			color: #fff;
+			background-color: rgba( 0, 0, 0, 0.75 );
+			padding: 5px;
+			width: 100%;
+			font-size: 13px;
+			text-align: center;
+			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+			z-index: 1;
 		}
+
 	</style>
-</head>
-<body>
 
-	<div id="info">
+	<div id="info" class="invert">
+		<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
 
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - renderbundle
-		<br />
-		(WebGL uses 10 times fewer meshes to prevent performance issues.)
+		<div class="title-wrapper">
+			<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
+			<span>Render Bundle</span>
+		</div>
 
+		<small>
+			(WebGL uses 10 times fewer meshes to prevent performance issues.)
+		</small>
 	</div>
 
-	<div id="backend" style="position: absolute; top: 200px; left: 0; color: #fff; background-color: rgba(0,0,0,0.75); padding: 5px;">
+	<div id="backend">
 		Draw Calls: 0
 	</div>
 
@@ -41,14 +60,12 @@
 
 		import * as THREE from 'three/webgpu';
 
-		import Stats from 'stats-gl';
-
-		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+		import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		let camera, scene, renderer;
-		let controls, stats;
+		let controls;
 		let gui;
 		let geometries, group;
 
@@ -185,7 +202,6 @@
 
 				renderer.dispose();
 				controls.dispose();
-				document.body.removeChild( stats.dom );
 				document.body.removeChild( renderer.domElement );
 
 			}
@@ -202,7 +218,7 @@
 			renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-
+			renderer.inspector = new Inspector();
 			renderer.setAnimationLoop( animate );
 
 			// scene
@@ -225,21 +241,10 @@
 			controls.autoRotate = true;
 			controls.autoRotateSpeed = 1.0;
 
-			// stats
-
-			stats = new Stats( {
-				precision: 3,
-				horizontal: false,
-				trackGPU: true,
-			} );
-			stats.init( renderer );
-			document.body.appendChild( stats.dom );
-			stats.dom.style.position = 'absolute';
-
 			// gui
 
-			gui = new GUI();
-			gui.add( api, 'renderBundle' ).onChange( () => {
+			gui = renderer.inspector.createParameters( 'Settings' );
+			gui.add( api, 'renderBundle' ).name( 'render bundle' ).onChange( () => {
 
 				init( ! api.webgpu );
 
@@ -290,9 +295,6 @@
 		
 				const average = renderTimeAverages.reduce( ( a, b ) => a + b, 0 ) / renderTimeAverages.length;
 
-				renderer.resolveTimestampsAsync();
-				stats.update();
-
 				document.getElementById( 'backend' ).innerText = `Average Render Time ${api.renderBundle ? '(Bundle)' : ''}: ` + average.toFixed( 2 ) + 'ms';
 
 			}

examples/webgpu_procedural_texture.html

@@ -41,7 +41,6 @@
 			let camera, scene, renderer;
 
 			init();
-			render();
 
 			function init() {
 

examples/webgpu_sandbox.html

@@ -59,7 +59,7 @@
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
-			
+
 				await renderer.init();
 
 				// textures

examples/webgpu_storage_buffer.html

@@ -207,7 +207,7 @@
 				}
 
 
-				await renderer.computeAsync( computeInit );
+				renderer.compute( computeInit );
 
 				//
 
@@ -217,7 +217,7 @@
 
 					renderer.info.reset();
 
-					await renderer.computeAsync( compute );
+					renderer.compute( compute );
 					renderer.render( scene, camera );
 
 					renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );

examples/webgpu_textures_partialupdate.html

@@ -53,7 +53,7 @@
 				clock = new THREE.Clock();
 
 				const loader = new THREE.TextureLoader();
-				diffuseMap = loader.load( 'textures/carbon/Carbon.png', animate );
+				diffuseMap = loader.load( 'textures/carbon/Carbon.png' );
 				diffuseMap.colorSpace = THREE.SRGBColorSpace;
 				diffuseMap.minFilter = THREE.LinearFilter;
 				diffuseMap.generateMipmaps = false;
@@ -78,7 +78,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
-
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgpu_tsl_compute_attractors_particles.html

@@ -45,7 +45,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( 3, 5, 8 );
@@ -73,6 +73,8 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.minDistance = 0.1;
@@ -205,7 +207,7 @@
 
 				const reset = () => {
 
-					renderer.computeAsync( initCompute );
+					renderer.compute( initCompute );
 
 				};
 

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -78,7 +78,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -107,9 +107,11 @@
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				document.body.appendChild( renderer.domElement );
 
+				await renderer.init();
+
 				// TSL function
 				// current color from index
-				getInstanceColor = /*#__PURE__*/ Fn( ( [ i ] ) => {
+				getInstanceColor = Fn( ( [ i ] ) => {
 
 					return hue( color( 0x0000ff ), colorOffset.add( mx_fractal_noise_float( i.toFloat().mul( .1 ), 2, 2.0, 0.5, colorVariance ) ) );
 
@@ -121,7 +123,7 @@
 				const particleVelocities = storage( new THREE.StorageInstancedBufferAttribute( nbParticles, 4 ), 'vec4', nbParticles );
 
 				// init particles buffers
-				renderer.computeAsync( /*#__PURE__*/ Fn( () => {
+				renderer.compute( Fn( () => {
 
 					particlePositions.element( instanceIndex ).xyz.assign( vec3( 10000.0 ) );
 					particlePositions.element( instanceIndex ).w.assign( vec3( - 1.0 ) ); // life is stored in w component; x<0 means dead
@@ -139,7 +141,7 @@
 				particleMaterial.scaleNode = vec2( particleSize );
 				particleMaterial.rotationNode = atan( particleVelocities.toAttribute().y, particleVelocities.toAttribute().x );
 
-				particleMaterial.colorNode = /*#__PURE__*/ Fn( () => {
+				particleMaterial.colorNode = Fn( () => {
 
 					const life = particlePositions.toAttribute().w;
 					const modLife = pcurve( life.oneMinus(), 8.0, 1.0 );
@@ -153,7 +155,7 @@
 
 				} )();
 
-				particleMaterial.opacityNode = /*#__PURE__*/ Fn( () => {
+				particleMaterial.opacityNode = Fn( () => {
 
 					const circle = step( uv().xy.sub( 0.5 ).length(), 0.5 );
 					const life = particlePositions.toAttribute().w;
@@ -208,7 +210,7 @@
 				scene.add( linksMesh );
 
 				// compute nodes
-				updateParticles = /*#__PURE__*/ Fn( () => {
+				updateParticles = Fn( () => {
 
 					const position = particlePositions.element( instanceIndex ).xyz;
 					const life = particlePositions.element( instanceIndex ).w;
@@ -309,7 +311,7 @@
 
 				} )().compute( nbParticles ).setName( 'Update Particles' );
 
-				spawnParticles = /*#__PURE__*/ Fn( () => {
+				spawnParticles = Fn( () => {
 
 					const particleIndex = spawnIndex.add( instanceIndex ).mod( nbParticles ).toInt();
 					const position = particlePositions.element( particleIndex ).xyz;