Added ImportMaps availability script (#23148)

* Added ImportMaps availability script. * Puppeteer: Added missing webgpu examples exception list.
mrdoob · Jan 4, 2022 · fe276f2 · fe276f2
1 parent 687e14f
commit fe276f2
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 1 deletion.
diff --git a/examples/jsm/capabilities/ImportMaps.js b/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;
diff --git a/examples/webgpu_compute.html b/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';

diff --git a/examples/webgpu_instance_uniform.html b/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';

diff --git a/examples/webgpu_lights_custom.html b/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';

diff --git a/examples/webgpu_lights_selective.html b/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';

diff --git a/examples/webgpu_materials.html b/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';

diff --git a/examples/webgpu_nodes_playground.html b/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';

diff --git a/examples/webgpu_rtt.html b/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';

diff --git a/examples/webgpu_sandbox.html b/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';

diff --git a/examples/webgpu_skinning.html b/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';

diff --git a/examples/webgpu_skinning_points.html b/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';

diff --git a/test/e2e/puppeteer.js b/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