Examples: Better error handling in WebGPU demo.

examples/jsm/renderers/webgpu/WebGPU.js

@@ -0,0 +1,33 @@
+class WebGPU {
+
+	static isAvailable() {
+
+		return ( navigator.gpu !== undefined );
+
+	}
+
+	static getErrorMessage() {
+
+		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:#000">WebGPU</a>.';
+
+		const element = document.createElement( 'div' );
+		element.id = 'webgpumessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+}
+
+export default WebGPU;

examples/webgpu_sandbox.html

@@ -15,15 +15,24 @@
 			import * as THREE from '../build/three.module.js';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
+			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';
 
 			let camera, scene, renderer;
 
 			let mesh;
 
-			init().then( animate );
+			init().then( animate ).catch( onInitError );
 
 			async function init() {
 
+				if ( WebGPU.isAvailable() === false ) {
+
+					document.body.appendChild( WebGPU.getErrorMessage() );
+
+					throw 'No WebGPU support';
+
+				}
+
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 4;
 
@@ -93,6 +102,12 @@
 
 			}
 
+			function onInitError( error ) {
+
+				console.error( error );
+
+			}
+
 		</script>
 	</body>
 </html>