Added ImportMaps availability script (#23148)

* Added ImportMaps availability script.

* Puppeteer: Added missing webgpu examples exception list.

examples/jsm/capabilities/ImportMaps.js

@@ -0,0 +1,32 @@
+class ImportMaps {
+
+	static isAvailable() {
+
+		return ( 'supports' in HTMLScriptElement && HTMLScriptElement.supports( 'importmap' ) );
+
+	}
+
+	static getErrorMessage() {
+
+		const message = 'Your browser does not support <a href="https://wicg.github.io/import-maps/" style="color:blue">Import Maps</a>';
+
+		const element = document.createElement( 'div' );
+		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 ImportMaps;

examples/webgpu_compute.html

@@ -19,6 +19,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_instance_uniform.html

@@ -20,6 +20,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_lights_custom.html

@@ -19,6 +19,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_lights_selective.html

@@ -22,6 +22,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_materials.html

@@ -20,6 +20,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_nodes_playground.html

@@ -46,6 +46,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_rtt.html

@@ -19,6 +19,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_sandbox.html

@@ -19,6 +19,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_skinning.html

@@ -21,6 +21,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

examples/webgpu_skinning_points.html

@@ -21,6 +21,19 @@
 			}
 		}
 		</script>
+
+		<script type="module">
+
+			import ImportMaps from './jsm/capabilities/ImportMaps.js';
+
+			if ( ImportMaps.isAvailable() === false ) {
+
+				document.body.appendChild( ImportMaps.getErrorMessage() );
+
+			}
+
+		</script>
+
 		<script type="module">
 
 			import * as THREE from 'three';

test/e2e/puppeteer.js

@@ -47,8 +47,11 @@ const exceptionList = [
 	'webgpu_lights_custom',
 	'webgpu_lights_selective',
 	'webgpu_materials',
+	'webgpu_nodes_playground',
 	'webgpu_rtt',
-	'webgpu_sandbox'
+	'webgpu_sandbox',
+	'webgpu_skinning_points',
+	'webgpu_skinning'
 ].concat( ( process.platform === 'win32' ) ? [
 
 	'webgl_effects_ascii' // windows fonts not supported