Examples: More usage of `setAnimationLoop()`. (#28257)

examples/webgl2_buffergeometry_attributes_integer.html

@@ -60,7 +60,6 @@
 			let camera, scene, renderer, mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -158,14 +157,13 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 			}
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;

examples/webgl2_buffergeometry_attributes_none.html

@@ -96,7 +96,6 @@
 			let camera, scene, renderer, mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -139,14 +138,13 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 			}
 
 			function animate( time ) {
 
-				requestAnimationFrame( animate );
-
 				mesh.rotation.x = time / 1000.0 * 0.25;
 				mesh.rotation.y = time / 1000.0 * 0.50;
 

examples/webgl2_clipculldistance.html

@@ -67,7 +67,6 @@
 			let material;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -83,6 +82,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				if ( renderer.extensions.has( 'WEBGL_clip_cull_distance' ) === false ) {
@@ -174,8 +174,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 				stats.update();
 

examples/webgl2_materials_texture2darray.html

@@ -75,7 +75,6 @@
 			let depthStep = 0.4;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -124,6 +123,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -144,8 +144,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( mesh ) {
 
 					let value = mesh.material.uniforms[ 'depth' ].value;

examples/webgl2_materials_texture3d_partialupdate.html

@@ -36,7 +36,6 @@
 			let cloudTexture = null;
 
 			init();
-			animate();
 
 			function generateCloudTexture( size, scaleFactor = 1.0 ) {
 
@@ -74,6 +73,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -329,8 +329,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = performance.now();
 				if ( time - prevTime > 1500.0 && curr < totalCount ) {
 

examples/webgl2_multiple_rendertargets.html

@@ -216,7 +216,6 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
-				//controls.enableZoom = false;
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgl2_multisampled_renderbuffers.html

@@ -120,6 +120,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( container.offsetWidth, container.offsetHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -152,7 +153,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				animate();
 
 			}
 
@@ -169,8 +169,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const halfWidth = container.offsetWidth / 2;
 
 				if ( params.animate ) {

examples/webgl2_rendertarget_texture2darray.html

@@ -213,7 +213,7 @@
 
 						postProcessMaterial.uniforms.uTexture.value = texture;
 
-						animate();
+						renderer.setAnimationLoop( animate );
 
 					} );
 
@@ -230,8 +230,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				let value = mesh.material.uniforms[ 'depth' ].value;
 
 				value += depthStep;
@@ -249,6 +247,8 @@
 
 				render();
 
+				stats.update();
+
 			}
 
 			/**

examples/webgl2_texture2darray_compressed.html

@@ -73,7 +73,6 @@
 			let depthStep = 1;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -139,8 +139,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( mesh ) {
 
 					const delta = clock.getDelta() * 10;

examples/webgl2_ubo.html

@@ -191,7 +191,6 @@
 			let camera, scene, renderer, clock;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -304,6 +303,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -323,8 +323,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				scene.traverse( function ( child ) {

examples/webgl2_ubo_arrays.html

@@ -128,7 +128,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -230,6 +229,7 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -267,10 +267,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				stats.update();
-
 				const elapsedTime = clock.getElapsedTime();
 
 				const lights = lightingUniformsGroup.uniforms[ 0 ];
@@ -297,6 +293,8 @@
 
 				renderer.render( scene, camera );
 
+				stats.update();
+
 			}
 
 		</script>

examples/webgl2_volume_cloud.html

@@ -32,13 +32,13 @@
 			let mesh;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -301,8 +301,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				mesh.material.uniforms.cameraPos.value.copy( camera.position );
 				mesh.rotation.y = - performance.now() / 7500;
 

examples/webgl2_volume_instancing.html

@@ -29,13 +29,13 @@
 			let renderer, scene, camera, controls, clock;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -222,8 +222,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 				controls.update( delta );
 

examples/webgl2_volume_perlin.html

@@ -32,13 +32,13 @@
 			let mesh;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -239,8 +239,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				mesh.material.uniforms.cameraPos.value.copy( camera.position );
 
 				renderer.render( scene, camera );

examples/webgl_postprocessing.html

@@ -32,13 +32,13 @@
 			let object;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -106,8 +106,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 

examples/webgl_postprocessing_3dlut.html

@@ -63,7 +63,6 @@
 			let composer, lutPass;
 
 			init();
-			render();
 
 			function init() {
 
@@ -131,6 +130,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
@@ -154,7 +154,6 @@
 				gui.add( params, 'enabled' );
 				gui.add( params, 'lut', Object.keys( lutMap ) );
 				gui.add( params, 'intensity' ).min( 0 ).max( 1 );
-				gui.add( params, 'use2DLut' );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -168,15 +167,11 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				composer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
 			//
 
-			function render() {
-
-				requestAnimationFrame( render );
+			function animate() {
 
 				lutPass.enabled = params.enabled && Boolean( lutMap[ params.lut ] );
 				lutPass.intensity = params.intensity;

examples/webgl_postprocessing_advanced.html

@@ -66,7 +66,6 @@
 			const delta = 0.01;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -127,6 +126,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				//
@@ -316,8 +316,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_postprocessing_afterimage.html

@@ -39,14 +39,13 @@
 			};
 
 			init();
-			createGUI();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				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 );
@@ -73,22 +72,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				if ( typeof TESTING !== 'undefined' ) {
-
-					for ( let i = 0; i < 45; i ++ ) {
-
-						render();
-
-					}
-
-
-
-				}
-
-			}
-
-			function createGUI() {
-
 				const gui = new GUI( { title: 'Damp setting' } );
 				gui.add( afterimagePass.uniforms[ 'damp' ], 'value', 0, 1 ).step( 0.001 );
 				gui.add( params, 'enable' );
@@ -105,7 +88,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				mesh.rotation.x += 0.005;
 				mesh.rotation.y += 0.01;
@@ -117,13 +100,6 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgl_postprocessing_backgrounds.html

@@ -59,7 +59,6 @@
 			};
 
 			init();
-			animate();
 
 			clearGui();
 
@@ -97,6 +96,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -208,8 +208,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 
 				cameraP.updateMatrixWorld( true );

examples/webgl_postprocessing_dof.html

@@ -51,7 +51,6 @@
 			const postprocessing = {};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -66,6 +65,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				const path = 'textures/cube/SwedishRoyalCastle/';
@@ -222,8 +222,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate, renderer.domElement );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_postprocessing_dof2.html

@@ -53,7 +53,6 @@
 			const leaves = 100;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -71,6 +70,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -367,8 +367,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate, renderer.domElement );
-
 				render();
 				stats.update();
 

examples/webgl_postprocessing_fxaa.html

@@ -57,7 +57,6 @@
 			let composer1, composer2, fxaaPass;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -112,6 +111,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( container.offsetWidth, container.offsetHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -169,8 +169,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const halfWidth = container.offsetWidth / 2;
 
 				group.rotation.y += clock.getDelta() * 0.1;

examples/webgl_postprocessing_glitch.html

@@ -50,7 +50,6 @@
 				overlay.remove();
 
 				init();
-				animate();
 
 			} );
 
@@ -66,6 +65,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -136,8 +136,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 

examples/webgl_postprocessing_godrays.html

@@ -51,7 +51,6 @@
 			const godrayRenderTargetResolutionMultiplier = 1.0 / 4.0;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -93,6 +92,7 @@
 				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;
@@ -224,8 +224,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_postprocessing_gtao.html

@@ -46,7 +46,6 @@
 			let camera, scene, renderer, composer, controls, clock, stats, mixer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -66,6 +65,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
@@ -186,8 +186,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) {

examples/webgl_postprocessing_masking.html

@@ -33,7 +33,6 @@
 			let box, torus;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -53,6 +52,7 @@
 				renderer.setClearColor( 0xe0e0e0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 
@@ -111,8 +111,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = performance.now() * 0.001 + 6000;
 
 				box.position.x = Math.cos( time / 1.5 ) * 2;

examples/webgl_postprocessing_material_ao.html

@@ -62,7 +62,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -74,6 +73,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = sceneParameters.shadow;
 
@@ -264,8 +264,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				controls.update();
 				stats.begin();
 				composer.render();

examples/webgl_postprocessing_outline.html

@@ -115,7 +115,6 @@
 			} );
 
 			init();
-			animate();
 
 			function init() {
 
@@ -129,6 +128,7 @@
 				renderer.shadowMap.enabled = true;
 				// todo - support pixelRatio in this demo
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -327,8 +327,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 
 				const timer = performance.now();

examples/webgl_postprocessing_pixel.html

@@ -39,7 +39,6 @@
 		let gui, params;
 
 		init();
-		animate();
 
 		function init() {
 
@@ -58,6 +57,7 @@
 			renderer.shadowMap.enabled = true;
 			//renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			document.body.appendChild( renderer.domElement );
 
 			composer = new EffectComposer( renderer );
@@ -172,8 +172,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			const t = clock.getElapsedTime();
 
 			crystalMesh.material.emissiveIntensity = Math.sin( t * 3 ) * .5 + .5;

examples/webgl_postprocessing_procedural.html

@@ -77,16 +77,6 @@
 			const params = { procedure: 'noiseRandom3D' };
 
 			init();
-			animate();
-			initGui();
-
-			// Init gui
-			function initGui() {
-
-				const gui = new GUI();
-				gui.add( params, 'procedure', [ 'noiseRandom1D', 'noiseRandom2D', 'noiseRandom3D' ] );
-
-			}
 
 			function init() {
 
@@ -95,6 +85,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -122,6 +113,11 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
+				//
+
+				const gui = new GUI();
+				gui.add( params, 'procedure', [ 'noiseRandom1D', 'noiseRandom2D', 'noiseRandom3D' ] );
+
 			}
 
 			function onWindowResize() {
@@ -132,8 +128,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				switch ( params.procedure ) {
 
 					case 'noiseRandom1D': postMaterial = noiseRandom1DMaterial; break;

examples/webgl_postprocessing_rgb_halftone.html

@@ -40,13 +40,13 @@
 			let composer, group;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				clock = new THREE.Clock();
 
@@ -193,8 +193,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 				stats.update();
 				group.rotation.y += delta * rotationSpeed;

examples/webgl_postprocessing_sao.html

@@ -39,7 +39,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -49,9 +48,10 @@
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 65, width / height, 3, 10 );
@@ -158,8 +158,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_postprocessing_smaa.html

@@ -43,7 +43,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -52,6 +51,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -119,8 +119,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 
 				if ( params.autoRotate === true ) {

examples/webgl_postprocessing_sobel.html

@@ -46,7 +46,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -80,6 +79,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				// postprocessing
@@ -134,8 +134,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				if ( params.enable === true ) {
 
 					composer.render();

examples/webgl_postprocessing_ssaa.html

@@ -52,7 +52,6 @@
 			};
 
 			init();
-			animate();
 
 			clearGui();
 
@@ -93,6 +92,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -197,8 +197,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 
 				if ( params.autoRotate ) {

examples/webgl_postprocessing_ssao.html

@@ -43,7 +43,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -52,6 +51,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 100, 700 );
@@ -142,8 +142,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_postprocessing_ssr.html

@@ -65,7 +65,6 @@
 		dracoLoader.setDecoderConfig( { type: 'js' } );
 
 		init();
-		animate();
 
 		function init() {
 
@@ -155,6 +154,7 @@
 			// renderer
 			renderer = new THREE.WebGLRenderer( { antialias: false } );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			container.appendChild( renderer.domElement );
 
 			//
@@ -289,8 +289,6 @@
 
 		function animate() {
 
-			requestAnimationFrame( animate );
-
 			stats.begin();
 			render();
 			stats.end();

examples/webgl_postprocessing_taa.html

@@ -44,7 +44,6 @@
 			const param = { TAAEnabled: '1', TAASampleLevel: 0 };
 
 			init();
-			animate();
 
 			clearGui();
 
@@ -96,6 +95,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -162,8 +162,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				index ++;
 
 				if ( Math.round( index / 200 ) % 2 === 0 ) {

examples/webgl_postprocessing_transition.html

@@ -62,6 +62,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				composer = new EffectComposer( renderer );
@@ -76,8 +77,6 @@
 				const outputPass = new OutputPass();
 				composer.addPass( outputPass );
 
-				renderer.setAnimationLoop( animate );
-
 			}
 
 			window.addEventListener( 'resize', onWindowResize );
@@ -117,6 +116,9 @@
 
 			function animate() {
 
+				// Transition animation
+				if ( params.transitionAnimate ) TWEEN.update();
+
 				const delta = clock.getDelta();
 				fxSceneA.render( delta );
 				fxSceneB.render( delta );
@@ -124,9 +126,6 @@
 				render();
 				stats.update();
 
-				// Transition animation
-				if ( params.transitionAnimate ) TWEEN.update();
-
 			}
 
 			function initTextures() {

examples/webgl_postprocessing_unreal_bloom.html

@@ -59,37 +59,44 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				const container = document.getElementById( 'container' );
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
 				clock = new THREE.Clock();
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.ReinhardToneMapping;
-				container.appendChild( renderer.domElement );
-
 				const scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( - 5, 2.5, - 3.5 );
 				scene.add( camera );
 
-				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.maxPolarAngle = Math.PI * 0.5;
-				controls.minDistance = 3;
-				controls.maxDistance = 8;
-
 				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 100 );
 				camera.add( pointLight );
 
+				const loader = new GLTFLoader();
+				const gltf = await loader.loadAsync( 'models/gltf/PrimaryIonDrive.glb' );
+
+				const model = gltf.scene;
+				scene.add( model );
+
+				mixer = new THREE.AnimationMixer( model );
+				const clip = gltf.animations[ 0 ];
+				mixer.clipAction( clip.optimize() ).play();
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.ReinhardToneMapping;
+				container.appendChild( renderer.domElement );
+
+				//
+
 				const renderScene = new RenderPass( scene, camera );
 
 				const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
@@ -104,19 +111,19 @@
 				composer.addPass( bloomPass );
 				composer.addPass( outputPass );
 
-				new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
-
-					const model = gltf.scene;
+				//
 
-					scene.add( model );
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-					mixer = new THREE.AnimationMixer( model );
-					const clip = gltf.animations[ 0 ];
-					mixer.clipAction( clip.optimize() ).play();
+				//
 
-					animate();
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.maxPolarAngle = Math.PI * 0.5;
+				controls.minDistance = 3;
+				controls.maxDistance = 8;
 
-				} );
+				//
 
 				const gui = new GUI();
 
@@ -167,8 +174,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				mixer.update( delta );

examples/webgl_raycaster_bvh.html

@@ -75,7 +75,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -93,6 +92,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -266,8 +266,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_raycaster_sprite.html

@@ -41,7 +41,6 @@
 		const pointer = new THREE.Vector2();
 
 		init();
-		animate();
 
 		function init() {
 
@@ -49,6 +48,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			document.body.appendChild( renderer.domElement );
 
 			// init scene
@@ -102,7 +102,6 @@
 		function animate() {
 
 			renderer.render( scene, camera );
-			requestAnimationFrame( animate );
 
 		}
 

examples/webgl_raycaster_texture.html

@@ -179,7 +179,6 @@
 			const onClickPosition = new THREE.Vector2();
 
 			init();
-			render();
 
 			function init() {
 
@@ -197,6 +196,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				// A cube, in the middle.
@@ -329,9 +329,7 @@
 
 			}
 
-			function render() {
-
-				requestAnimationFrame( render );
+			function animate() {
 
 				// update texture parameters
 

examples/webgl_raymarching_reflect.html

@@ -271,13 +271,13 @@
 			};
 
 			init();
-			render();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( parseInt( config.resolution ), parseInt( config.resolution ) );
+				renderer.setAnimationLoop( animate );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -341,7 +341,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				stats.begin();
 
@@ -352,7 +352,6 @@
 				renderer.render( scene, camera );
 
 				stats.end();
-				requestAnimationFrame( render );
 
 			}
 

examples/webgl_read_float_buffer.html

@@ -89,7 +89,6 @@
 			let valueNode;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -159,6 +158,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				container.appendChild( renderer.domElement );
@@ -183,8 +183,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_refraction.html

@@ -44,18 +44,12 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				const container = document.getElementById( 'container' );
 
 				clock = new THREE.Clock();
 
-				// renderer
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
 				// scene
 				scene = new THREE.Scene();
 
@@ -63,12 +57,6 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
 				camera.position.set( 0, 75, 160 );
 
-				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 40, 0 );
-				controls.maxDistance = 400;
-				controls.minDistance = 10;
-				controls.update();
-
 				// refractor
 
 				const refractorGeometry = new THREE.PlaneGeometry( 90, 90 );
@@ -86,11 +74,8 @@
 
 				// load dudv map for distortion effect
 
-				const dudvMap = new THREE.TextureLoader().load( 'textures/waterdudv.jpg', function () {
-
-					animate();
-
-				} );
+				const loader = new THREE.TextureLoader();
+				const dudvMap = await loader.loadAsync( 'textures/waterdudv.jpg' );
 
 				dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
 				refractor.material.uniforms.tDudv.value = dudvMap;
@@ -148,6 +133,20 @@
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 
+				// renderer
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				container.appendChild( renderer.domElement );
+
+				// controls
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 40, 0 );
+				controls.maxDistance = 400;
+				controls.minDistance = 10;
+				controls.update();
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -163,8 +162,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = clock.getElapsedTime();
 
 				refractor.material.uniforms.time.value = time;

examples/webgl_renderer_pathtracer.html

@@ -263,7 +263,8 @@
 				updateProgressBar( 0 );
 
 				pathTracer.setScene( scene, camera );
-				render();
+			
+				renderer.setAnimationLoop( animate );
 
 			}
 
@@ -340,9 +341,7 @@
 
 			//
 
-			function render() {
-
-				requestAnimationFrame( render );
+			function animate() {
 
 				renderer.toneMapping = params.toneMapping ? THREE.ACESFilmicToneMapping : THREE.NoToneMapping;
 

examples/webgl_rtt.html

@@ -85,7 +85,6 @@
 			let delta = 0.01;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -181,6 +180,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 
 				container.appendChild( renderer.domElement );
@@ -203,8 +203,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_shader.html

@@ -81,7 +81,6 @@
 			let uniforms;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -111,6 +110,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -127,8 +127,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				uniforms[ 'time' ].value = performance.now() / 1000;
 
 				renderer.render( scene, camera );

examples/webgl_shader_lava.html

@@ -97,7 +97,6 @@
 			let uniforms, mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -147,8 +146,10 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
@@ -166,8 +167,6 @@
 
 				//
 
-				onWindowResize();
-
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -186,14 +185,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const delta = 5 * clock.getDelta();
 
 				uniforms[ 'time' ].value += 0.2 * delta;

examples/webgl_shaders_ocean.html

@@ -38,7 +38,6 @@
 			let controls, water, sun, mesh;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -49,6 +48,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.5;
 				container.appendChild( renderer.domElement );
@@ -190,7 +190,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 				stats.update();
 

examples/webgl_shadow_contact.html

@@ -64,7 +64,6 @@
 			let plane, blurPlane, fillPlane;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -233,6 +232,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -277,10 +277,6 @@
 
 			function animate( ) {
 
-				requestAnimationFrame( animate );
-
-				//
-
 				meshes.forEach( mesh => {
 
 					mesh.rotation.x += 0.01;

examples/webgl_shadowmap.html

@@ -59,8 +59,6 @@
 			let showHUD = false;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -107,6 +105,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;
@@ -334,8 +333,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 				stats.update();
 

examples/webgl_shadowmap_csm.html

@@ -55,7 +55,6 @@
 			};
 
 			init();
-			animate();
 
 			function updateOrthoCamera() {
 
@@ -82,6 +81,7 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = params.shadows;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -284,8 +284,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				camera.updateMatrixWorld();
 				csm.update();
 				controls.update();

examples/webgl_shadowmap_pcss.html

@@ -141,7 +141,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -247,6 +246,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.setClearColor( scene.fog.color );
 
 				container.appendChild( renderer.domElement );
@@ -303,8 +303,6 @@
 
 				stats.update();
 
-				requestAnimationFrame( animate );
-
 			}
 
 		</script>

examples/webgl_shadowmap_performance.html

@@ -54,8 +54,6 @@
 			const clock = new THREE.Clock();
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -101,6 +99,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;
@@ -304,8 +303,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_shadowmap_pointlight.html

@@ -32,7 +32,6 @@
 			let pointLight, pointLight2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -106,6 +105,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.BasicShadowMap;
 				document.body.appendChild( renderer.domElement );
@@ -148,13 +148,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				let time = performance.now() * 0.001;
 
 				pointLight.position.x = Math.sin( time * 0.6 ) * 9;

examples/webgl_shadowmap_progressive.html

@@ -39,7 +39,6 @@
 							 'Light Radius': 50, 'Ambient Weight': 0.5, 'Debug Lightmap': false };
 			init();
 			createGUI();
-			animate();
 
 			function init() {
 
@@ -47,6 +46,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -153,16 +153,6 @@
 
 					object.add( lightTarget );
 
-					if ( typeof TESTING !== 'undefined' ) {
-
-						for ( let i = 0; i < 300; i ++ ) {
-
-							render();
-
-						}
-
-					}
-
 				}
 
 				const manager = new THREE.LoadingManager( loadModel );
@@ -182,6 +172,7 @@
 				controls.maxDistance = 500;
 				controls.maxPolarAngle = Math.PI / 1.5;
 				controls.target.set( 0, 100, 0 );
+			
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -206,7 +197,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				// Update the inertia on the orbit controls
 				controls.update();
@@ -256,12 +247,6 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
 		</script>
 	</body>
 </html>

examples/webgl_shadowmap_viewer.html

@@ -35,8 +35,6 @@
 			let dirLightShadowMapViewer, spotLightShadowMapViewer;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -140,6 +138,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.BasicShadowMap;
 
@@ -186,7 +185,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
 				render();
 
 				stats.update();

examples/webgl_shadowmap_vsm.html

@@ -34,7 +34,6 @@
 			let torusKnot, dirGroup;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -185,6 +184,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.VSMShadowMap;
 
@@ -211,8 +211,6 @@
 
 			function animate( time ) {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				torusKnot.rotation.x += 0.25 * delta;

examples/webgl_shadowmesh.html

@@ -61,7 +61,6 @@
 			const TWO_PI = Math.PI * 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -69,7 +68,9 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setAnimationLoop( animate );
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
+			
 				window.addEventListener( 'resize', onWindowResize );
 
 				camera.position.set( 0, 2.5, 10 );
@@ -178,8 +179,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				frameTime = clock.getDelta();
 
 				cube.rotation.x += 1.0 * frameTime;

examples/webgl_simple_gi.html

@@ -154,7 +154,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -191,6 +190,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				new SimpleGI( renderer, scene );
@@ -214,8 +214,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.setRenderTarget( null );
 				renderer.render( scene, camera );
 

examples/webgl_sprites.html

@@ -35,7 +35,6 @@
 			let group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -110,6 +109,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.autoClear = false; // To allow render overlay on top of sprited sphere
 
 				document.body.appendChild( renderer.domElement );
@@ -193,13 +193,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
 				const time = Date.now() / 1000;
 
 				for ( let i = 0, l = group.children.length; i < l; i ++ ) {

examples/webgl_test_memory.html

@@ -37,7 +37,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -53,6 +52,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 			}
@@ -75,14 +75,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );
 
 				const texture = new THREE.CanvasTexture( createImage() );

examples/webgl_test_wide_gamut.html

@@ -103,8 +103,8 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.setScissorTest( true );
-				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
 				if ( isP3Context && window.matchMedia( '( color-gamut: p3 )' ).matches ) {
@@ -189,7 +189,7 @@
 
 			}
 
-			function containTexture ( aspect, target ) {
+			function containTexture( aspect, target ) {
 
 				// Sets the matrix uv transform so the texture image is contained in a region having the specified aspect ratio,
 				// and does so without distortion. Akin to CSS object-fit: contain.
@@ -213,7 +213,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
 				renderer.render( sceneL, camera );

examples/webgl_video_kinect.html

@@ -88,7 +88,6 @@
 			let mouse, center;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -166,6 +165,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				mouse = new THREE.Vector3( 0, 0, 1 );
@@ -196,14 +196,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				camera.position.x += ( mouse.x - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouse.y - camera.position.y ) * 0.05;
 				camera.lookAt( center );

examples/webgl_video_panorama_equirectangular.html

@@ -49,7 +49,6 @@
 			const distance = .5;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -76,6 +75,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'pointerdown', onPointerDown );
@@ -128,13 +128,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-				update();
-
-			}
-
-			function update() {
-
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 				phi = THREE.MathUtils.degToRad( 90 - lat );
 				theta = THREE.MathUtils.degToRad( lon );

examples/webgl_water.html

@@ -42,7 +42,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -134,6 +133,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				// gui
@@ -187,14 +187,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				const delta = clock.getDelta();
 
 				torusKnot.rotation.x += delta;

examples/webgl_water_flowmap.html

@@ -33,7 +33,6 @@
 			let scene, camera, renderer, water;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -99,6 +98,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -129,14 +129,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_ar_cones.html

@@ -30,7 +30,6 @@
 			let controller;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -50,6 +49,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -94,12 +94,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_ar_hittest.html

@@ -36,7 +36,6 @@
 			let hitTestSourceRequested = false;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -56,6 +55,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -110,13 +110,7 @@
 
 			//
 
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render( timestamp, frame ) {
+			function animate( timestamp, frame ) {
 
 				if ( frame ) {
 

examples/webxr_ar_lighting.html

@@ -34,7 +34,6 @@
 			let defaultEnvironment;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -54,6 +53,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -167,12 +167,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_ar_plane_detection.html

@@ -32,7 +32,7 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setAnimationLoop( render );
+			renderer.setAnimationLoop( animate );
 			renderer.xr.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
@@ -66,7 +66,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				renderer.render( scene, camera );
 

examples/webxr_vr_handinput.html

@@ -39,7 +39,6 @@
 			let controls;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -80,6 +79,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 
@@ -150,12 +150,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_vr_handinput_cubes.html

@@ -52,7 +52,6 @@
 			const spheres = [];
 
 			init();
-			animate();
 
 			function init() {
 
@@ -93,6 +92,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 
@@ -273,12 +273,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				if ( scaling.active ) {
 
 					const indexTip1Pos = hand1.joints[ 'index-finger-tip' ].position;

examples/webxr_vr_handinput_pointerclick.html

@@ -275,7 +275,6 @@
 		let camera, scene, renderer;
 
 		init();
-		animate();
 
 		function makeButtonMesh( x, y, z, color ) {
 
@@ -314,6 +313,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.cameraAutoUpdate = false;
@@ -508,12 +508,6 @@
 
 		function animate() {
 
-			renderer.setAnimationLoop( render );
-
-		}
-
-		function render() {
-
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
 			renderer.xr.updateCamera( camera );

examples/webxr_vr_handinput_pointerdrag.html

@@ -380,7 +380,6 @@
 		let camera, scene, renderer;
 
 		init();
-		animate();
 
 		function makeButtonMesh( x, y, z, color ) {
 
@@ -417,6 +416,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.cameraAutoUpdate = false;
@@ -586,12 +586,6 @@
 
 		function animate() {
 
-			renderer.setAnimationLoop( render );
-
-		}
-
-		function render() {
-
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
 			renderer.xr.updateCamera( camera );

examples/webxr_vr_handinput_pressbutton.html

@@ -335,7 +335,6 @@
 		let camera, scene, renderer;
 
 		init();
-		animate();
 
 		function makeButtonMesh( x, y, z, color ) {
 
@@ -374,6 +373,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.cameraAutoUpdate = false;
@@ -565,12 +565,6 @@
 
 		function animate() {
 
-			renderer.setAnimationLoop( render );
-
-		}
-
-		function render() {
-
 			const delta = clock.getDelta();
 			const elapsedTime = clock.elapsedTime;
 			renderer.xr.updateCamera( camera );

examples/webxr_vr_handinput_profiles.html

@@ -44,8 +44,6 @@
 			let controls;
 
 			init();
-			animate();
-
 
 			function init() {
 
@@ -87,6 +85,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 
@@ -202,12 +201,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_vr_layers.html

@@ -106,7 +106,6 @@
 			snellenConfig.quadHeight = .5 * snellenConfig.heightMeters / snellenConfig.cropY;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -123,9 +122,10 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.setClearAlpha( 1 );
 				renderer.setClearColor( new THREE.Color( 0 ), 0 );
-				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.xr.enabled = true;
 
 				document.body.appendChild( renderer.domElement );
@@ -298,13 +298,7 @@
 			}
 			//
 
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render( t, frame ) {
+			function animate( t, frame ) {
 
 				const xr = renderer.xr;
 				const session = xr.getSession();

examples/webxr_vr_panorama.html

@@ -26,13 +26,13 @@
 			let scene;
 
 			init();
-			animate();
 
 			function init() {
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				document.body.appendChild( renderer.domElement );
@@ -126,12 +126,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_vr_panorama_depth.html

@@ -31,7 +31,6 @@
 			let camera, scene, renderer, sphere, clock;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				container.appendChild( renderer.domElement );
@@ -114,12 +114,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				// If we are not presenting move the camera a little so the effect is visible
 
 				if ( renderer.xr.isPresenting === false ) {

examples/webxr_vr_rollercoaster.html

@@ -34,6 +34,7 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setAnimationLoop( animate );
 			renderer.xr.enabled = true;
 			renderer.xr.setReferenceSpaceType( 'local' );
 			document.body.appendChild( renderer.domElement );
@@ -207,7 +208,7 @@
 
 			let prevTime = performance.now();
 
-			function render() {
+			function animate() {
 
 				const time = performance.now();
 				const delta = time - prevTime;
@@ -243,8 +244,6 @@
 
 			}
 
-			renderer.setAnimationLoop( render );
-
 		</script>
 
 	</body>

examples/webxr_vr_sandbox.html

@@ -46,7 +46,6 @@
 			};
 
 			init();
-			animate();
 
 			function init() {
 
@@ -108,6 +107,7 @@
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
@@ -209,12 +209,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				const time = performance.now() * 0.0002;
 				const torus = scene.getObjectByName( 'torus' );
 				torus.rotation.x = time * 0.4;

examples/webxr_vr_teleport.html

@@ -39,7 +39,6 @@
 			const tempMatrix = new THREE.Matrix4();
 
 			init();
-			animate();
 
 			function init() {
 
@@ -78,6 +77,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 
 				renderer.xr.addEventListener( 'sessionstart', () => baseReferenceSpace = renderer.xr.getReferenceSpace() );
 				renderer.xr.enabled = true;
@@ -200,12 +200,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				INTERSECTION = undefined;
 
 				if ( controller1.userData.isSelecting === true ) {

examples/webxr_vr_video.html

@@ -36,7 +36,6 @@
 			let camera, scene, renderer;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -108,6 +107,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				container.appendChild( renderer.domElement );
@@ -131,12 +131,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_xr_ballshooter.html

@@ -36,8 +36,8 @@
 			let controller1, controller2;
 			let controllerGrip1, controllerGrip2;
 
-			let room, spheres;
-			let physics, velocity = new THREE.Vector3();
+			let room, spheres, physics;
+			const velocity = new THREE.Vector3();
 
 			let count = 0;
 
@@ -70,7 +70,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( render );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -277,7 +277,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				handleController( controller1 );
 				handleController( controller2 );

examples/webxr_xr_controls_transform.html

@@ -38,7 +38,6 @@
 			let controls, group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -114,6 +113,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
@@ -243,12 +243,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				renderer.render( scene, camera );
 
 			}

examples/webxr_xr_cubes.html

@@ -40,7 +40,6 @@
 			let INTERSECTED;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -98,6 +97,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -140,7 +140,7 @@
 
 				//
 
-				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing' ] } ) );
 
 			}
 
@@ -183,12 +183,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				const delta = clock.getDelta() * 60;
 
 				if ( controller.userData.isSelecting === true ) {

examples/webxr_xr_dragging.html

@@ -40,7 +40,6 @@
 			let controls, group;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -120,11 +119,12 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing' ] } ) );
 
 				// controllers
 
@@ -270,12 +270,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				cleanIntersected();
 
 				intersectObjects( controller1 );

examples/webxr_xr_haptics.html

@@ -43,7 +43,6 @@
 			const musicScale = [ 0, 3, 5, 7, 10 ];
 
 			init();
-			animate();
 
 			function initAudio() {
 
@@ -140,6 +139,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
@@ -209,12 +209,6 @@
 
 			//
 
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
 			function handleCollisions() {
 
 				for ( let i = 0; i < group.children.length; i ++ ) {
@@ -300,7 +294,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				handleCollisions();
 

examples/webxr_xr_paint.html

@@ -36,7 +36,6 @@
 			let controls;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -75,6 +74,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -193,12 +193,6 @@
 
 			function animate() {
 
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
 				handleController( controller1 );
 				handleController( controller2 );
 

examples/webxr_xr_sculpt.html

@@ -38,7 +38,6 @@
 
 			init();
 			initBlob();
-			animate();
 
 			function init() {
 
@@ -69,6 +68,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -168,12 +168,6 @@
 
 			//
 
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
 			function transformPoint( vector ) {
 
 				vector.x = ( vector.x + 1.0 ) / 2.0;
@@ -227,7 +221,7 @@
 
 			}
 
-			function render() {
+			function animate() {
 
 				handleController( controller1 );
 				handleController( controller2 );