feat(core): add webgl2 and offscreencanvas check

.changeset/breezy-walls-wash.md

@@ -0,0 +1,5 @@
+---
+'@tedengine/ted': minor
+---
+
+Check for WebGL2 and OffscreenCanvas support on bootstrap

packages/ted/src/fred/browser.ts

@@ -0,0 +1,27 @@
+export type TBrowserFeature = 'webgl2' | 'offscreencanvas';
+
+export default class TBrowser {
+  public supports(feature: TBrowserFeature): boolean {
+    switch (feature) {
+      case 'webgl2':
+        return this.supportsWebGL2();
+      case 'offscreencanvas':
+        return this.supportsOffscreenCanvas();
+      default:
+        return false;
+    }
+  }
+
+  private supportsWebGL2(): boolean {
+    try {
+      const canvas = document.createElement('canvas');
+      return !!canvas.getContext('webgl2');
+    } catch (e) {
+      return false;
+    }
+  }
+
+  private supportsOffscreenCanvas(): boolean {
+    return typeof OffscreenCanvas !== 'undefined';
+  }
+}

packages/ted/src/fred/fred.ts

@@ -21,6 +21,7 @@ import { TMessageTypesJobs } from '../jobs/messages';
 import type { TFrameParams } from '../renderer/frame-params';
 import TRenderer from '../renderer/renderer';
 import type { TEngineContextData, TGameContextData } from '../ui/context';
+import TBrowser from './browser';
 import type { TWindowBlurEvent, TWindowFocusEvent } from './events';
 import { TEventTypesWindow } from './events';
 import type { TFredMessageReady, TFredMessageShutdown } from './messages';
@@ -132,11 +133,21 @@ export default class TFred {
 
   /**
    * Bootstrap gets the main thread ready for loading by:
+   * - Checking browser features
    * - Creating the canvas
    * - Starting to prepare graphics
    * - Setting up events, input, audio
    */
   private async bootstrap() {
+    const browser = new TBrowser();
+    if (!browser.supports('webgl2') || !browser.supports('offscreencanvas')) {
+      // @todo show error message
+      this.setErrorMessage(
+        'Browser does not support WebGL2 or OffscreenCanvas',
+      );
+      return;
+    }
+
     // Create the canvas
     this.container.classList.add('t-game-container');
     this.canvas = document.createElement('canvas');

packages/ted/src/index.ts

@@ -61,6 +61,8 @@ export * from './engine/engine';
 
 export * from './fred/events';
 export { default as TFred } from './fred/fred';
+export * from './fred/browser';
+export { default as TBrowser } from './fred/browser';
 
 export * from './graphics';
 export { default as TCanvas } from './graphics/canvas';