Examples: Add WebGPU check to some compute demos. (#31685)

* Example: Add WebGPU check to some compute demos.

* Examples: Clean up.

* E2E: Add `webgpu_compute_birds` to exception list.

Author: Mugen87

examples/webgpu_compute_birds.html

@@ -43,6 +43,7 @@
 
 			import Stats from 'stats-gl';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			let container, stats;
 			let camera, scene, renderer;
@@ -129,6 +130,14 @@
 				}
 
 			}
+			
+			if ( WebGPU.isAvailable() === false ) {
+
+				document.body.appendChild( WebGPU.getErrorMessage() );
+
+				throw new Error( 'No WebGPU support' );
+
+			}
 
 			function init() {
 

examples/webgpu_compute_cloth.html

@@ -32,6 +32,7 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			let renderer, scene, camera, controls;
 
@@ -67,6 +68,14 @@
 				sheenColor: 0xffffff // sRGB
 			};
 
+			if ( WebGPU.isAvailable() === false ) {
+
+				document.body.appendChild( WebGPU.getErrorMessage() );
+
+				throw new Error( 'No WebGPU support' );
+
+			}
+
 			init();
 
 			async function init() {
@@ -106,11 +115,19 @@
 				gui.add( params, 'wind', 0, 5, 0.1 );
 
 				const materialFolder = gui.addFolder( 'material' );
-				materialFolder.addColor( API, 'color' ).onChange( function ( color ) { clothMaterial.color.setHex( color ); } );
+				materialFolder.addColor( API, 'color' ).onChange( function ( color ) {
+
+					clothMaterial.color.setHex( color );
+
+				} );
 				materialFolder.add( clothMaterial, 'roughness', 0.0, 1, 0.01 );
 				materialFolder.add( clothMaterial, 'sheen', 0.0, 1, 0.01 );
 				materialFolder.add( clothMaterial, 'sheenRoughness', 0.0, 1, 0.01 );
-				materialFolder.addColor( API, 'sheenColor' ).onChange( function ( color ) { clothMaterial.sheenColor.setHex( color ); } );
+				materialFolder.addColor( API, 'sheenColor' ).onChange( function ( color ) {
+
+					clothMaterial.sheenColor.setHex( color );
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgpu_compute_texture_3d.html

@@ -33,11 +33,20 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			let renderer, scene, camera;
 			let mesh;
 			let computeNode;
 
+			if ( WebGPU.isAvailable() === false ) {
+
+				document.body.appendChild( WebGPU.getErrorMessage() );
+
+				throw new Error( 'No WebGPU support' );
+
+			}
+
 			init();
 
 			async function init() {

test/e2e/puppeteer.js

@@ -127,6 +127,7 @@ const exceptionList = [
 
 	// Awaiting for WebGL backend support
 	'webgpu_compute_audio',
+	'webgpu_compute_birds',
 	'webgpu_compute_texture',
 	'webgpu_compute_texture_3d',
 	'webgpu_compute_texture_pingpong',