update web build to include gpu information

raybbian · raybbian · commit 44d2ec064fbf · 2025-03-06T13:30:04.000-05:00
diff --git a/src/main.rs b/src/main.rs
@@ -41,6 +41,7 @@ fn main() {
                         title: "Lightborne".into(),
                         name: Some("lightborne".into()),
                         present_mode: PresentMode::AutoNoVsync,
+                        canvas: Some("#bevy-container".into()),
                         fit_canvas_to_parent: true,
                         prevent_default_event_handling: false,
                         ..default()
diff --git a/wasm/index.css b/wasm/index.css
@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Munro';
+  src: url('./assets/fonts/Munro.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.container {
+    width: auto; 
+    height: auto; 
+    aspect-ratio: 16 / 9; 
+    max-width: 100dvw; 
+    max-height: 100dvh;
+}
+
+.wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: black;
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
+}
+
+.canvas {
+    outline: none;
+}
+
+#info-panel-left, #info-panel-right {
+    margin: 0px;
+    font-size: 1.5rem;
+    padding: 0.5rem;
+}
+
+.info-panel {
+    width: 100%;
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    color: white;
+    font-family: "Munro";
+    opacity: 50%;
+    display: flex;
+    justify-content: space-between;
+}
diff --git a/wasm/index.html b/wasm/index.html
@@ -1,17 +1,20 @@
 <!doctype html>
 <html lang="en">
+<head>
+  <link rel="stylesheet" href="index.css"/>
+</head>
 
-<body style="margin: 0px; width: auto; height: auto; aspect-ratio: 16 / 9; background-color: black; max-width: 100dvw; max-height: 100dvh">
-  <script type="module">
-    import './restart-audio-context.js'
-    import init from './bevy_game.js'
-
-    init().catch((error) => {
-      if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-        throw error;
-      }
-    });
-  </script>
+<body style="margin: 0px;">
+  <script type="module" src="index.js"></script>
+  <div class="wrapper">
+    <div class="container">
+        <canvas id="bevy-container" class="canvas" tabindex=0 />
+    </div>
+    <div class="info-panel">
+      <p id="info-panel-left"/>
+      <p id="info-panel-right"/>
+    </div>
+  </div>
 </body>
 
 </html>
diff --git a/wasm/index.js b/wasm/index.js
@@ -0,0 +1,34 @@
+import './restart-audio-context.js'
+import init from './bevy_game.js'
+
+init().catch((error) => {
+    if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+        throw error;
+    }
+});
+
+const canvas = document.getElementById("bevy-container");
+const infoLeft = document.getElementById("info-panel-left");
+const infoRight = document.getElementById("info-panel-right");
+const gl = canvas.getContext("webgl2");
+if (gl) {
+    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+    if (debugInfo) {
+        const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+        const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+
+        infoLeft.textContent += `Vendor: ${vendor}, Renderer: ${renderer}`
+
+        if (/intel/i.test(vendor)) {
+            infoRight.textContent += 'Likely using an integrated GPU. Running slow? Make sure hardware acceleration is on.';
+        } else if (/nvidia|amd/i.test(vendor)) {
+            infoRight.textContent += 'Likely using a dedicated GPU.';
+        } else {
+            infoRight.textContent += 'Could not determine GPU type. Running slow? Make sure hardware acceleration is on.';
+        }
+    } else {
+        infoRight.textContent += 'WebGL debug renderer info is not available.';
+    }
+} else {
+    infoRight.textContent += 'WebGL is not supported on your browser.';
+}
