no webgpu message

Absulit · Absulit · commit 96ec05c9320e · 2025-04-26T20:03:47.000-06:00
diff --git a/index.html b/index.html
@@ -6,8 +6,7 @@
 
 <head>
   <title>Gravity Pull Audio Visualizer by absulit</title>
-  <meta name="Description"
-    content="Audio Visualizer made with WebGPU and JavaScript">
+  <meta name="Description" content="Audio Visualizer made with WebGPU and JavaScript">
 
   <meta property="og:title" content="Gravity Pull Audio Visualizer by absulit" />
   <meta property="og:type" content="website" />
@@ -23,31 +22,31 @@
   <meta name="twitter:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />
 
   <script type="importmap">
-            {
-              "imports": {
-                "points": "./src/points/absulit.points.module.js",
+      {
+        "imports": {
+          "points": "./src/points/absulit.points.module.js",
 
-                "datasize": "./src/points/data-size.js",
-                "renderpass": "./src/points/RenderPass.js",
-                "shadertype": "./src/points/ShaderType.js",
+          "datasize": "./src/points/data-size.js",
+          "renderpass": "./src/points/RenderPass.js",
+          "shadertype": "./src/points/ShaderType.js",
 
-                "animation": "./src/points/core/animation.js",
-                "audio": "./src/points/core/audio.js",
-                "color": "./src/points/core/color.js",
-                "debug": "./src/points/core/debug.js",
-                "effects": "./src/points/core/effects.js",
-                "image": "./src/points/core/image.js",
-                "math": "./src/points/core/math.js",
-                "noise2d": "./src/points/core/noise2d.js",
-                "classicnoise2d": "./src/points/core/classicnoise2d.js",
-                "random": "./src/points/core/random.js",
-                "renderpasses": "./src/points/RenderPasses.js",
-                "sdf": "./src/points/core/sdf.js",
+          "animation": "./src/points/core/animation.js",
+          "audio": "./src/points/core/audio.js",
+          "color": "./src/points/core/color.js",
+          "debug": "./src/points/core/debug.js",
+          "effects": "./src/points/core/effects.js",
+          "image": "./src/points/core/image.js",
+          "math": "./src/points/core/math.js",
+          "noise2d": "./src/points/core/noise2d.js",
+          "classicnoise2d": "./src/points/core/classicnoise2d.js",
+          "random": "./src/points/core/random.js",
+          "renderpasses": "./src/points/RenderPasses.js",
+          "sdf": "./src/points/core/sdf.js",
 
-                "datgui": "./src/points/vendor/datgui/dat.gui.module.js"
-              }
-            }
-        </script>
+          "datgui": "./src/points/vendor/datgui/dat.gui.module.js"
+        }
+      }
+  </script>
 
   <link rel="stylesheet" type="text/css" href="style.css">
 
@@ -58,11 +57,16 @@
 </head>
 
 <body>
+  <div id="nowebgpu">
+    <div>
+      WebGPU is only available on Chrome, <a target="_blank" rel="noopener"
+        href="https://www.mozilla.org/en-US/firefox/nightly/notes/">Firefox Nightly</a>, and <a target="_blank"
+        rel="noopener" href="https://developer.apple.com/safari/technology-preview/">Safary Technology Preview</a>.
+    </div>
+  </div>
   <canvas id="canvas" width="800" height="800">
     Oops ... your browser doesn't support the HTML5 canvas element
   </canvas>
-
-
 </body>
 
 </html>
diff --git a/src/main.js b/src/main.js
@@ -333,9 +333,15 @@ const renderPasses = [
     new RenderPass(vert, frag0, null),
 ];
 
-await points.init(renderPasses);
+if (await points.init(renderPasses)) {
+    points.fitWindow = true;
+    update();
+} else {
+    const el = document.getElementById('nowebgpu');
+    el.classList.toggle('show');
+}
+
 
-points.fitWindow = true;
 
 points.canvas.addEventListener('click', _ => {
     if (pauseClickTimeout) {
diff --git a/style.css b/style.css
@@ -5,4 +5,29 @@ body {
     width: 100%;
     height: 100%;
     position: absolute;
+}
+
+#nowebgpu a,
+#info a {
+    color: #488553;
+}
+
+
+#nowebgpu {
+    display        : none;
+    position       : absolute;
+    width          : 100%;
+    height         : 800px;
+    align-items    : center;
+    justify-content: center;
+    color          : white;
+    z-index        : 100;
+}
+
+#nowebgpu>div {
+    width: 50%;
+}
+
+#nowebgpu.show {
+    display: flex;
 }
