WebGPURenderer: Move .init() to private and added .setAnimationLoop() (#24755)

* Move .init() to private and added .setAnimationLoop()

* WebGPURenderer: render(), compute() can start the device

* update examples

* prevent twice initialization

examples/jsm/renderers/webgpu/WebGPUAnimation.js

@@ -0,0 +1,58 @@
+class WebGPUAnimation {
+
+	constructor() {
+
+		this.nodes = null;
+
+		this.animationLoop = null;
+		this.requestId = null;
+
+		this.isAnimating = false;
+
+		this.context = self;
+
+	}
+
+	start() {
+
+		if ( this.isAnimating === true || this.animationLoop === null || this.nodes === null ) return;
+
+		this.isAnimating = true;
+
+		const update = ( time, frame ) => {
+
+			this.requestId = self.requestAnimationFrame( update );
+
+			this.animationLoop( time, frame );
+
+			this.nodes.updateFrame();
+
+		};
+
+		this.requestId = self.requestAnimationFrame( update );
+
+	}
+
+	stop() {
+
+		self.cancelAnimationFrame( this.requestId );
+
+		this.isAnimating = false;
+
+	}
+
+	setAnimationLoop( callback ) {
+
+		this.animationLoop = callback;
+
+	}
+
+	setNodes( nodes ) {
+
+		this.nodes = nodes;
+
+	}
+
+}
+
+export default WebGPUAnimation;

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,5 @@
 import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPUObjects from './WebGPUObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
@@ -132,6 +133,8 @@ class WebGPURenderer {
 		this._textures = null;
 		this._background = null;
 
+		this._animation = new WebGPUAnimation();
+
 		this._renderPassDescriptor = null;
 
 		this._currentRenderState = null;
@@ -147,6 +150,8 @@ class WebGPURenderer {
 
 		this._renderTarget = null;
 
+		this._initialized = false;
+
 		// some parameters require default values other than "undefined"
 
 		this._parameters.antialias = ( parameters.antialias === true );
@@ -168,6 +173,12 @@ class WebGPURenderer {
 
 	async init() {
 
+		if ( this._initialized === true ) {
+
+			throw new Error( 'WebGPURenderer: Device has already been initialized.' );
+
+		}
+
 		const parameters = this._parameters;
 
 		const adapterOptions = {
@@ -192,7 +203,7 @@ class WebGPURenderer {
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
 		context.configure( {
-			device: device,
+			device,
 			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
 			alphaMode: 'premultiplied'
 		} );
@@ -232,16 +243,21 @@ class WebGPURenderer {
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
-	}
+		this._animation.setNodes( this._nodes );
+		this._animation.start();
 
-	render( scene, camera ) {
+		this._initialized = true;
 
-		// @TODO: move this to animation loop
+	}
+
+	async render( scene, camera ) {
 
-		this._nodes.updateFrame();
+		if ( this._initialized === false ) return await this.init();
 
 		//
 
+		if ( this._animation.isAnimating === false ) this._nodes.updateFrame();
+
 		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
 		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
@@ -276,6 +292,8 @@ class WebGPURenderer {
 
 		if ( renderTarget !== null ) {
 
+			this._textures.initRenderTarget( renderTarget );
+
 			// @TODO: Support RenderTarget with antialiasing.
 
 			const renderTargetProperties = this._properties.get( renderTarget );
@@ -354,6 +372,18 @@ class WebGPURenderer {
 
 	}
 
+	setAnimationLoop( callback ) {
+
+		if ( this._initialized === false ) this.init();
+
+		const animation = this._animation;
+
+		animation.setAnimationLoop( callback );
+
+		( callback === null ) ? animation.stop() : animation.start();
+
+	}
+
 	getContext() {
 
 		return this._context;
@@ -571,21 +601,20 @@ class WebGPURenderer {
 		this._renderStates.dispose();
 		this._textures.dispose();
 
+		this.setRenderTarget( null );
+		this.setAnimationLoop( null );
+
 	}
 
 	setRenderTarget( renderTarget ) {
 
 		this._renderTarget = renderTarget;
 
-		if ( renderTarget !== null ) {
-
-			this._textures.initRenderTarget( renderTarget );
-
-		}
-
 	}
 
-	compute( ...computeNodes ) {
+	async compute( ...computeNodes ) {
+
+		if ( this._initialized === false ) return await this.init();
 
 		const device = this._device;
 		const computePipelines = this._computePipelines;

examples/webgpu_compute.html

@@ -46,9 +46,9 @@
 			const pointerVector = new THREE.Vector2( - 10.0, - 10.0 ); // Out of bounds first
 			const scaleVector = new THREE.Vector2( 1, 1 );
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -150,6 +150,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -162,8 +163,6 @@
 				gui.add( scaleVector, 'x', 0, 1, 0.01 );
 				gui.add( scaleVector, 'y', 0, 1, 0.01 );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -191,19 +190,11 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				renderer.compute( computeNode );
 				renderer.render( scene, camera );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_cubemap_adjustments.html

@@ -47,9 +47,9 @@
 
 			let camera, scene, renderer;
 
-			init().then( render ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -136,8 +136,6 @@
 
 					scene.add( gltf.scene );
 
-					render();
-
 				} );
 
 				const sphereGeometry = new THREE.SphereGeometry( .5, 64, 32 );
@@ -158,6 +156,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 1 );
 				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -191,8 +190,6 @@
 				gui.add( adjustments, 'hue', 0, Math.PI * 2, 0.01 );
 				gui.add( adjustments, 'saturation', 0, 2, 0.01 );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -208,18 +205,10 @@
 
 			function render() {
 
-				requestAnimationFrame( render );
-
 				renderer.render( scene, camera );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 
 	</body>

examples/webgpu_cubemap_mix.html

@@ -45,9 +45,9 @@
 
 			let camera, scene, renderer;
 
-			init().then( render ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -93,8 +93,6 @@
 
 					scene.add( gltf.scene );
 
-					render();
-
 				} );
 
 				renderer = new WebGPURenderer();
@@ -103,6 +101,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 1 );
 				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
@@ -111,8 +110,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				if ( renderer.init ) return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -128,18 +125,10 @@
 
 			function render() {
 
-				requestAnimationFrame( render );
-
 				renderer.render( scene, camera );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 
 	</body>

examples/webgpu_depth_texture.html

@@ -42,9 +42,9 @@
 
 			const dpr = window.devicePixelRatio;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -94,6 +94,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				textureRenderer = new WebGPUTextureRenderer( renderer );
@@ -121,10 +122,6 @@
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 
-				//
-
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -139,19 +136,11 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				textureRenderer.render( scene, camera );
 				renderer.render( sceneFX, cameraFX );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_instance_mesh.html

@@ -43,9 +43,9 @@
 			const count = Math.pow( amount, 3 );
 			const dummy = new THREE.Object3D();
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -89,6 +89,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -100,8 +101,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -117,15 +116,13 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				render();
 
 				stats.update();
 
 			}
 
-			function render() {
+			async function render() {
 
 				if ( mesh ) {
 
@@ -159,13 +156,7 @@
 
 				}
 
-				renderer.render( scene, camera );
-
-			}
-
-			function error( error ) {
-
-				console.error( error );
+				await renderer.render( scene, camera );
 
 			}
 

examples/webgpu_instance_uniform.html

@@ -75,9 +75,9 @@
 
 			const objects = [];
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -138,6 +138,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -155,8 +156,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function addMesh( geometry, material ) {
@@ -191,15 +190,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
 					const object = objects[ i ];
@@ -211,11 +201,7 @@
 
 				renderer.render( scene, camera );
 
-			}
-
-			function error( error ) {
-
-				console.error( error );
+				stats.update();
 
 			}
 

examples/webgpu_lights_custom.html

@@ -37,9 +37,9 @@
 
 			let light1, light2, light3;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -122,6 +122,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 1 );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				document.body.appendChild( renderer.domElement );
@@ -136,10 +137,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				//
-
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -153,8 +150,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const time = Date.now() * 0.0005;
 				const scale = .5;
 
@@ -174,12 +169,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_lights_selective.html

@@ -46,9 +46,9 @@
 				light1, light2, light3, light4,
 				stats, controls;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -138,6 +138,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 100 );
@@ -162,8 +163,6 @@
 				gui.add( centerObject.material, 'roughness', 0, 1, 0.01 );
 				gui.add( centerObject.material, 'metalness', 0, 1, 0.01 );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -177,15 +176,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const time = performance.now() / 1000;
 				const lightTime = time * 0.5;
 
@@ -214,11 +204,7 @@
 */
 				renderer.render( scene, camera );
 
-			}
-
-			function error( error ) {
-
-				console.error( error );
+				stats.update();
 
 			}
 

examples/webgpu_loader_gltf.html

@@ -44,9 +44,10 @@
 
 			let camera, scene, renderer;
 
-			init().then( render ).catch( error );
+			init();
+			render();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -112,6 +113,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 1 );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
@@ -122,8 +124,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				if ( renderer.init ) return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -139,18 +139,10 @@
 
 			function render() {
 
-				requestAnimationFrame( render );
-
 				renderer.render( scene, camera );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 
 	</body>

examples/webgpu_materials.html

@@ -44,9 +44,9 @@
 
 			const objects = [], materials = [];
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -199,6 +199,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				container.appendChild( renderer.domElement );
 
 				//
@@ -210,8 +211,6 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function addMesh( geometry, material ) {
@@ -244,15 +243,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
 				const timer = 0.0001 * Date.now();
 
 				camera.position.x = Math.cos( timer ) * 1000;
@@ -271,11 +261,7 @@
 
 				renderer.render( scene, camera );
 
-			}
-
-			function error( error ) {
-
-				console.error( error );
+				stats.update();
 
 			}
 

examples/webgpu_nodes_playground.html

@@ -73,9 +73,9 @@
 			let model;
 			let nodeEditor;
 
-			init().then( animate ).catch( error => console.error( error ) );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -104,9 +104,10 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
+				renderer.setAnimationLoop( render );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 4000 );
+				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.className = 'renderer';
 
@@ -122,8 +123,6 @@
 
 				onWindowResize();
 
-				return renderer.init();
-
 			}
 
 			function initEditor() {
@@ -204,20 +203,12 @@
 
 			//
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				render();
-
-			}
-
 			function render() {
 
 				//if ( model ) model.rotation.y = performance.now() / 5000;
 
+				nodeFrame.update();
+
 				renderer.render( scene, camera );
 
 			}

examples/webgpu_particles.html

@@ -40,9 +40,9 @@
 			let camera, scene, renderer;
 			let controls;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -133,6 +133,7 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
 				document.body.appendChild( renderer.domElement );
 
 				//
@@ -152,8 +153,6 @@
 
 				gui.add( timer, 'scale', 0, 1, 0.01 ).name( 'speed' );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -167,25 +166,12 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
 			function render() {
 
 				renderer.render( scene, camera );
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_rtt.html

@@ -41,9 +41,10 @@
 
 			const dpr = window.devicePixelRatio;
 
-			init().then( animate ).catch( error );
+			init();
+			animate();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -103,10 +104,6 @@
 				const quad = new THREE.Mesh( geometryFX, materialFX );
 				sceneFX.add( quad );
 
-				//
-
-				return renderer.init();
-
 			}
 
 			function onWindowMouseMove( e ) {
@@ -138,12 +135,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_sandbox.html

@@ -37,9 +37,9 @@
 
 			let box;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -179,12 +179,11 @@
 				renderer = new WebGPURenderer( { requiredFeatures: [ 'texture-compression-bc' ] } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -198,8 +197,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				box.rotation.x += 0.01;
 				box.rotation.y += 0.02;
 
@@ -238,12 +235,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_skinning.html

@@ -38,9 +38,9 @@
 
 			let mixer, clock;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -92,14 +92,13 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 800 );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -113,8 +112,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
@@ -123,12 +120,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_skinning_instancing.html

@@ -40,9 +40,9 @@
 
 			let mixer, clock;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -127,14 +127,13 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMappingNode = new Nodes.ToneMappingNode( THREE.LinearToneMapping, 800 );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -148,8 +147,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
@@ -158,12 +155,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_skinning_points.html

@@ -38,9 +38,9 @@
 
 			let mixer, clock;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -92,12 +92,11 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -111,8 +110,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
 				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
@@ -121,12 +118,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>

examples/webgpu_sprites.html

@@ -41,9 +41,9 @@
 
 			let imageWidth = 1, imageHeight = 1;
 
-			init().then( animate ).catch( error );
+			init();
 
-			async function init() {
+			function init() {
 
 				if ( WebGPU.isAvailable() === false ) {
 
@@ -112,12 +112,11 @@
 				renderer = new WebGPURenderer( { requiredFeatures: [ 'texture-compression-bc' ] } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( render );
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				return renderer.init();
-
 			}
 
 			function onWindowResize() {
@@ -132,13 +131,6 @@
 
 			}
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
 			function render() {
 
 				const time = Date.now() / 1000;
@@ -161,12 +153,6 @@
 
 			}
 
-			function error( error ) {
-
-				console.error( error );
-
-			}
-
 		</script>
 	</body>
 </html>