Add dialog if WebGL 2 is not enabled

src/C2022E3.vue

@@ -312,6 +312,29 @@
       </div>
     </div>
 
+    <!-- WebGL2 not enabled dialog --> 
+    <v-dialog
+      class="error-dialog"
+      :style="cssVars"
+      v-model="showWebGL2Warning"
+      persistent
+    >
+      <v-card>
+        <div class="error-message">
+          <p>
+            <strong>This app requires WebGL 2</strong> 
+          </p>
+          <p class="mt-2">
+            Check your browser's settings and enable WebGL 2 ("graphics acceleration" on some browsers).
+          </p> 
+          <p class="mt-2">
+            You can check whether your browser supports WebGL 2
+            and get assistance <a href="https://get.webgl.org/webgl2/" target="_blank" rel="noopener noreferrer">here</a>.
+          </p> 
+        </div>
+      </v-card>
+    </v-dialog>
+
     <v-dialog
       id="video-container"
       v-model="showVideoSheet"
@@ -753,6 +776,8 @@ export default defineComponent({
     const uuid = maybeUUID ?? v4();
     const ratingOptedOut = window.localStorage.getItem("cds-green-comet-rating-optout")?.toLowerCase() === "true";
     return {
+      showWebGL2Warning: false,
+
       showSplashScreen: true,
       imagesetLayers: {} as Record<string, ImageSetLayer>,
       layersLoaded: false,
@@ -826,6 +851,19 @@ export default defineComponent({
 
   mounted() {
 
+    if (!this.isWebGL2Enabled()) {
+      this.showWebGL2Warning = true;
+      this.layersLoaded = true;
+      this.positionSet = true;
+      this.showSplashScreen = false;
+      // eslint-disable-next-lint @typescript-eslint/ban-ts-comment
+      // @ts-expect-error `canvas` is defined
+      WWTControl.singleton.canvas.setAttribute("hidden", "true");
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      WWTControl.singleton.renderOneFrame = function() {};
+      return;
+    }
+
     this.waitForReady().then(async () => {
 
       // Unlike the other things we're hacking here,
@@ -1868,6 +1906,15 @@ export default defineComponent({
       this.ratingOptedOut = true;
       window.localStorage.setItem("cds-green-comet-rating-optout", "true");
     },
+
+    isWebGL2Enabled(): boolean {
+      // It doesn't seem like there's a better way to do this than just to try and get a context
+      // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL
+      // NB: The engine specifically wants a webgl2 context
+      const canvas = document.createElement("canvas");
+      const gl = canvas.getContext("webgl2");
+      return gl instanceof WebGL2RenderingContext;
+    },
   },
 
   watch: {
@@ -2878,4 +2925,22 @@ input[type="range"]::-moz-range-track {
     border-style: none !important;
   }
 }
+
+.error-dialog {
+  width: auto;
+  height: auto;
+  max-width: 500px;
+  border-radius: 10px;
+
+  .v-card {
+    border-radius: 10px !important;
+  }
+}
+
+.error-message {
+  padding: 1rem;
+  border: 1px solid var(--comet-color);
+  text-align: center;
+  border-radius: 10px;
+}
 </style>

tests/config.ts

@@ -21,6 +21,7 @@ export interface WebDriverSettings {
 
 export interface Capabilities {
   browserName: string,
+  "moz:firefoxOptions"?: Record<string, unknown>;
 }
 
 export interface BrowserCapabilities extends Capabilities {
@@ -82,6 +83,10 @@ export function addBrowsers(environments: { [env: string]: TestEnvironment | und
           ...browserCapabilities(browser, 'latest', osName, version)
         }
       };
+
+      if (browser.toLowerCase().includes("firefox")) {
+        enableWebGLFirefox(environments[key].desiredCapabilities);
+      }
     }
   }
 }
@@ -97,3 +102,20 @@ export function addPhones(environments: { [env: string]: TestEnvironment | undef
     };
   }
 }
+
+export function enableWebGLFirefox(firefoxCapabilities: Capabilities) {
+  const optionsKey = "moz:firefoxOptions";
+  const currentOptions = firefoxCapabilities[optionsKey] ?? {};
+  const options = {
+    ...currentOptions,
+    args: [],
+    prefs: {
+      "webgl.enable-prototype-webgl2": true,
+      "webgl.disabled": false,
+      "webgl.force-enabled": true,
+      "layers.acceleration.force-enabled": true,
+    },
+  };
+
+  firefoxCapabilities[optionsKey] = options; 
+}

tests/local.conf.ts

@@ -67,6 +67,15 @@ const nightwatchConfig: Configuration = {
     firefox: {
       desiredCapabilities: {
         browserName: 'firefox',
+        "moz:firefoxOptions": {
+          args: [],
+          prefs: {
+            'webgl.enable-prototype-webgl2': true,
+            'webgl.disabled': false,
+            'webgl.force-enabled': true,
+            'layers.acceleration.force-enabled': true
+          },
+        },
       },
       webdriver: {
         start_process: true,
@@ -118,4 +127,4 @@ function loadServices(): Services {
   } catch (err) { /* empty */ }
   return s;
 }
-
+