WebGPURenderer: Define setAnimationLoop() as default in examples (mrdoob#27839)

Author: sunag

examples/webgpu_clipping.html

@@ -39,7 +39,6 @@
 			let camera, scene, renderer, startTime, object, stats;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -136,6 +135,7 @@
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				window.addEventListener( 'resize', onWindowResize );
 				document.body.appendChild( renderer.domElement );
 
@@ -271,8 +271,6 @@
 
 				const time = ( currentTime - startTime ) / 1000;
 
-				requestAnimationFrame( animate );
-
 				object.position.y = 0.8;
 				object.rotation.x = time * 0.5;
 				object.rotation.y = time * 0.2;

examples/webgpu_instance_mesh.html

@@ -44,7 +44,7 @@
 
 			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 

examples/webgpu_materials_texture_anisotropy.html

@@ -77,11 +77,9 @@
 
 			let mouseX = 0, mouseY = 0;
 
+			init();
 
-			init().then( () => animate() );
-
-
-			async function init() {
+			function init() {
 
 				const SCREEN_WIDTH = window.innerWidth;
 				const SCREEN_HEIGHT = window.innerHeight;
@@ -91,11 +89,11 @@
 
 				renderer = new WebGPURenderer( { antialias: true, forceWebGL: false } );
 
-				await renderer.init();
 				// RENDERER
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';
@@ -132,7 +130,6 @@
 				const texture1 = textureLoader.load( 'textures/crate.gif' );
 				const material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
-
 				texture1.colorSpace = THREE.SRGBColorSpace;
 				texture1.anisotropy = renderer.getMaxAnisotropy();
 				texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
@@ -206,8 +203,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 
@@ -236,7 +231,6 @@
 
 				// renderer.setScissorTest( false );
 
-
 			}
 
 		</script>

examples/webgpu_postprocessing_afterimage.html

@@ -38,13 +38,13 @@
 
 			init();
 			createGUI();
-			animate();
 
 			function init() {
 
 				renderer = new WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -102,7 +102,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 
 			}

examples/webgpu_postprocessing_anamorphic.html

@@ -48,7 +48,7 @@
 
 			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 

examples/webgpu_sandbox.html

@@ -60,7 +60,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
-				await renderer.init();
 
 				// textures