@luma.gl/webgl 9.1.0-alpha.15 → 9.1.0-alpha.17

package/dist/adapter/webgl-device.js

@@ -58,29 +58,48 @@ export class WebGLDevice extends Device {
     //
     constructor(props) {
         super({ ...props, id: props.id || uid('webgl-device') });
+        // WebGL requires a canvas to be created before creating the context
+        if (!props.createCanvasContext) {
+            throw new Error('WebGLDevice requires props.createCanvasContext to be set');
+        }
+        const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
         // If attaching to an already attached context, return the attached device
         // @ts-expect-error device is attached to context
-        const device = props.gl?.device;
+        let device = canvasContextProps.canvas?.gl?.device;
         if (device) {
             throw new Error(`WebGL context already attached to device ${device.id}`);
         }
         // Create and instrument context
-        const canvas = props.gl?.canvas || props.canvas;
-        this.canvasContext = new WebGLCanvasContext(this, { ...props, canvas });
+        this.canvasContext = new WebGLCanvasContext(this, canvasContextProps);
         this.lost = new Promise(resolve => {
             this._resolveContextLost = resolve;
         });
-        this.handle = createBrowserContext(this.canvasContext.canvas, {
-            ...props,
+        const webglContextAttributes = { ...props.webgl };
+        // Copy props from CanvasContextProps
+        if (canvasContextProps.alphaMode === 'premultiplied') {
+            webglContextAttributes.premultipliedAlpha = true;
+        }
+        if (props.powerPreference !== undefined) {
+            webglContextAttributes.powerPreference = props.powerPreference;
+        }
+        const gl = createBrowserContext(this.canvasContext.canvas, {
             onContextLost: (event) => this._resolveContextLost?.({
                 reason: 'destroyed',
                 message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
-            })
-        });
-        this.gl = this.handle;
-        if (!this.handle) {
+            }),
+            // eslint-disable-next-line no-console
+            onContextRestored: (event) => console.log('WebGL context restored')
+        }, webglContextAttributes);
+        if (!gl) {
             throw new Error('WebGL context creation failed');
         }
+        // @ts-expect-error device is attached to context
+        device = gl.device;
+        if (device) {
+            throw new Error(`WebGL context already attached to device ${device.id}`);
+        }
+        this.handle = gl;
+        this.gl = gl;
         // Add spector debug instrumentation to context
         // We need to trust spector integration to decide if spector should be initialized
         // We also run spector instrumentation first, otherwise spector can clobber luma instrumentation.
@@ -91,8 +110,8 @@ export class WebGLDevice extends Device {
         // initialize luma Device fields
         this.info = getDeviceInfo(this.gl, this._extensions);
         this.limits = new WebGLDeviceLimits(this.gl);
-        this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props.disabledFeatures);
-        if (this.props.initalizeFeatures) {
+        this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props._disabledFeatures);
+        if (this.props._initializeFeatures) {
             this.features.initializeFeatures();
         }
         this.canvasContext.resize();
@@ -102,11 +121,14 @@ export class WebGLDevice extends Device {
         });
         glState.trackState(this.gl, { copyState: false });
         // DEBUG contexts: Add luma debug instrumentation to the context, force log level to at least 1
-        if (props.debug) {
-            this.gl = makeDebugContext(this.gl, { ...props, throwOnError: true });
-            this.debug = true;
-            log.level = Math.max(log.level, 1);
+        const debugWebGL = props.debugWebGL || props.debug;
+        const traceWebGL = props.debugWebGL;
+        if (debugWebGL) {
+            this.gl = makeDebugContext(this.gl, { debugWebGL, traceWebGL });
             log.warn('WebGL debug mode activated. Performance reduced.')();
+            if (props.debugWebGL) {
+                log.level = Math.max(log.level, 1);
+            }
         }
     }
     /**
@@ -131,7 +153,7 @@ export class WebGLDevice extends Device {
         throw new Error('WebGL only supports a single canvas');
     }
     createBuffer(props) {
-        const newProps = this._getBufferProps(props);
+        const newProps = this._normalizeBufferProps(props);
         return new WEBGLBuffer(this, newProps);
     }
     createTexture(props) {
@@ -257,18 +279,27 @@ export class WebGLDevice extends Device {
      * Be aware that there are some duplicates especially for constants that are 0,
      * so this isn't guaranteed to return the right key in all cases.
      */
-    getGLKey(value, gl) {
-        // @ts-ignore expect-error depends on settings
-        gl = gl || this.gl2 || this.gl;
+    getGLKey(value, options) {
         const number = Number(value);
-        for (const key in gl) {
+        for (const key in this.gl) {
             // @ts-ignore expect-error depends on settings
-            if (gl[key] === number) {
+            if (this.gl[key] === number) {
                 return `GL.${key}`;
             }
         }
         // No constant found. Stringify the value and return it.
-        return String(value);
+        return options?.emptyIfUnknown ? '' : String(value);
+    }
+    /**
+     * Returns a map with any GL.<KEY> constants mapped to strings, both for keys and values
+     */
+    getGLKeys(glParameters) {
+        const opts = { emptyIfUnknown: true };
+        return Object.entries(glParameters).reduce((keys, [key, value]) => {
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
+            keys[`${key}:${this.getGLKey(key, opts)}`] = `${value}:${this.getGLKey(value, opts)}`;
+            return keys;
+        }, {});
     }
     /** Store constants */
     _constants;

package/dist/context/debug/spector-types.js

@@ -1,5 +1,5 @@
 // Forked from https://github.com/BabylonJS/Spector.js/blob/master/dist/spector.d.ts
-/* eslint-disable camelcase */
+/* eslint-disable camelcase, no-shadow */
 var LogLevel;
 (function (LogLevel) {
     LogLevel[LogLevel["noLog"] = 0] = "noLog";

package/dist/context/debug/spector.d.ts

@@ -1,10 +1,10 @@
-import { Spector } from "./spector-types.js";
+import type { Spector } from "./spector-types.js";
 /** Spector debug initialization options */
 type SpectorProps = {
-    /** Whether spector is enabled */
-    debugWithSpectorJS?: boolean;
+    /** Whether spector.js is enabled */
+    debugSpectorJS?: boolean;
     /** URL to load spector script from. Typically a CDN URL */
-    spectorUrl?: string;
+    debugSpectorJSUrl?: string;
     /** Canvas to monitor */
     gl?: WebGL2RenderingContext;
 };
@@ -14,7 +14,7 @@ declare global {
 export declare const DEFAULT_SPECTOR_PROPS: Required<SpectorProps>;
 /** Loads spector from CDN if not already installed */
 export declare function loadSpectorJS(props: {
-    spectorUrl?: string;
+    debugSpectorJSUrl?: string;
 }): Promise<void>;
 export declare function initializeSpectorJS(props: SpectorProps): Spector | null;
 export {};

package/dist/context/debug/spector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spector.d.ts","sourceRoot":"","sources":["../../../src/context/debug/spector.ts"],"names":[],"mappings":"AAOA,OAAO,EAAC,OAAO,EAAC,2BAAwB;AAExC,2CAA2C;AAC3C,KAAK,YAAY,GAAG;IAClB,iCAAiC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,EAAE,CAAC,EAAE,sBAAsB,CAAC;CAC7B,CAAC;AAOF,OAAO,CAAC,MAAM,CAAC;IAGb,IAAI,OAAO,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,YAAY,CAOxD,CAAC;AAEF,sDAAsD;AACtD,wBAAsB,aAAa,CAAC,KAAK,EAAE;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAQ/E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,IAAI,CAyDvE"}
+{"version":3,"file":"spector.d.ts","sourceRoot":"","sources":["../../../src/context/debug/spector.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,OAAO,EAAC,2BAAwB;AAE7C,2CAA2C;AAC3C,KAAK,YAAY,GAAG;IAClB,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB;IACxB,EAAE,CAAC,EAAE,sBAAsB,CAAC;CAC7B,CAAC;AAOF,OAAO,CAAC,MAAM,CAAC;IAGb,IAAI,OAAO,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,YAAY,CAOxD,CAAC;AAEF,sDAAsD;AACtD,wBAAsB,aAAa,CAAC,KAAK,EAAE;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAQtF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,IAAI,CAyDvE"}

package/dist/context/debug/spector.js

@@ -7,18 +7,18 @@ const LOG_LEVEL = 1;
 let spector = null;
 let initialized = false;
 export const DEFAULT_SPECTOR_PROPS = {
-    debugWithSpectorJS: log.get('spector') || log.get('spectorjs'),
+    debugSpectorJS: log.get('debug-spectorjs'),
     // https://github.com/BabylonJS/Spector.js#basic-usage
     // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
     // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
-    spectorUrl: 'https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js',
+    debugSpectorJSUrl: 'https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js',
     gl: undefined
 };
 /** Loads spector from CDN if not already installed */
 export async function loadSpectorJS(props) {
     if (!globalThis.SPECTOR) {
         try {
-            await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
+            await loadScript(props.debugSpectorJSUrl || DEFAULT_SPECTOR_PROPS.debugSpectorJSUrl);
         }
         catch (error) {
             log.warn(String(error));
@@ -27,13 +27,13 @@ export async function loadSpectorJS(props) {
 }
 export function initializeSpectorJS(props) {
     props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-    if (!props.debugWithSpectorJS) {
+    if (!props.debugSpectorJS) {
         return null;
     }
     if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
         log.probe(LOG_LEVEL, 'SPECTOR found and initialized. Start with `luma.spector.displayUI()`')();
-        const { Spector } = globalThis.SPECTOR;
-        spector = new Spector();
+        const { Spector: SpectorJS } = globalThis.SPECTOR;
+        spector = new SpectorJS();
         if (globalThis.luma) {
             globalThis.luma.spector = spector;
         }

package/dist/context/debug/webgl-developer-tools.d.ts

@@ -1,7 +1,6 @@
 type DebugContextProps = {
-    debug?: boolean;
-    throwOnError?: boolean;
-    break?: string[];
+    debugWebGL?: boolean;
+    traceWebGL?: boolean;
 };
 declare global {
     var WebGLDebugUtils: any;

package/dist/context/debug/webgl-developer-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl-developer-tools.d.ts","sourceRoot":"","sources":["../../../src/context/debug/webgl-developer-tools.ts"],"names":[],"mappings":"AAYA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAoBF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,eAAe,EAAE,GAAG,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CAO7D;AAID,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,GAAE,iBAAsB,GAC5B,sBAAsB,CAExB"}
+{"version":3,"file":"webgl-developer-tools.d.ts","sourceRoot":"","sources":["../../../src/context/debug/webgl-developer-tools.ts"],"names":[],"mappings":"AAYA,KAAK,iBAAiB,GAAG;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAaF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,eAAe,EAAE,GAAG,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CAO7D;AAID,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,GAAE,iBAAsB,GAC5B,sBAAsB,CAExB"}

package/dist/context/debug/webgl-developer-tools.js

@@ -29,7 +29,7 @@ export async function loadWebGLDeveloperTools() {
 // Returns (a potentially new) context with debug instrumentation turned off or on.
 // Note that this actually returns a new context
 export function makeDebugContext(gl, props = {}) {
-    return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
+    return props.debugWebGL || props.traceWebGL ? getDebugContext(gl, props) : getRealContext(gl);
 }
 // Returns the real context from either of the real/debug contexts
 function getRealContext(gl) {
@@ -88,35 +88,22 @@ function onGLError(props, err, functionName, args) {
     const message = `${errorMessage} in gl.${functionName}(${functionArgs})`;
     log.error(message)();
     debugger; // eslint-disable-line
-    if (props.throwOnError) {
-        throw new Error(message);
-    }
+    // throw new Error(message);
 }
 // Don't generate function string until it is needed
 function onValidateGLFunc(props, functionName, functionArgs) {
     let functionString = '';
     if (log.level >= 1) {
         functionString = getFunctionString(functionName, functionArgs);
-        log.log(1, functionString)();
-    }
-    // If array of breakpoint strings supplied, check if any of them is contained in current GLEnum function
-    if (props.break && props.break.length > 0) {
-        functionString = functionString || getFunctionString(functionName, functionArgs);
-        const isBreakpoint = props.break.every((breakOn) => functionString.indexOf(breakOn) !== -1);
-        if (isBreakpoint) {
-            debugger; // eslint-disable-line
+        if (props.traceWebGL) {
+            log.log(1, functionString)();
         }
     }
     for (const arg of functionArgs) {
         if (arg === undefined) {
             functionString = functionString || getFunctionString(functionName, functionArgs);
-            if (props.throwOnError) {
-                throw new Error(`Undefined argument: ${functionString}`);
-            }
-            else {
-                log.error(`Undefined argument: ${functionString}`)();
-                debugger; // eslint-disable-line
-            }
+            debugger; // eslint-disable-line
+            // throw new Error(`Undefined argument: ${functionString}`);
         }
     }
 }

package/dist/context/helpers/create-browser-context.d.ts

@@ -1,35 +1,19 @@
 /**
  * ContextProps
  * @param onContextLost
- * @param onContextRestored
- *
- * BROWSER CONTEXT PARAMETERS
- * @param debug Instrument context (at the expense of performance).
- * @param alpha Default render target has an alpha buffer.
- * @param depth Default render target has a depth buffer of at least 16 bits.
- * @param stencil Default render target has a stencil buffer of at least 8 bits.
- * @param antialias Boolean that indicates whether or not to perform anti-aliasing.
- * @param premultipliedAlpha Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
- * @param preserveDrawingBuffer Default render target buffers will not be automatically cleared and will preserve their values until cleared or overwritten
- * @param failIfMajorPerformanceCaveat Do not create if the system performance is low.
+ * @param onContextRestored *
  */
 type ContextProps = {
-    onContextLost?: (event: Event) => void;
-    onContextRestored?: (event: Event) => void;
-    alpha?: boolean;
-    desynchronized?: boolean;
-    antialias?: boolean;
-    depth?: boolean;
-    failIfMajorPerformanceCaveat?: boolean;
-    powerPreference?: 'default' | 'high-performance' | 'low-power';
-    premultipliedAlpha?: boolean;
-    preserveDrawingBuffer?: boolean;
+    /** Called when a context is lost */
+    onContextLost: (event: Event) => void;
+    /** Called when a context is restored */
+    onContextRestored: (event: Event) => void;
 };
 /**
  * Create a WebGL context for a canvas
  * Note calling this multiple time on the same canvas does return the same context
  * @param canvas A canvas element or offscreen canvas
  */
-export declare function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGL2RenderingContext;
+export declare function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps, webglContextAttributes: WebGLContextAttributes): WebGL2RenderingContext;
 export {};
 //# sourceMappingURL=create-browser-context.d.ts.map

package/dist/context/helpers/create-browser-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-browser-context.d.ts","sourceRoot":"","sources":["../../../src/context/helpers/create-browser-context.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AACH,KAAK,YAAY,GAAG;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,eAAe,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,WAAW,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,KAAK,EAAE,YAAY,GAClB,sBAAsB,CA+CxB"}
+{"version":3,"file":"create-browser-context.d.ts","sourceRoot":"","sources":["../../../src/context/helpers/create-browser-context.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,KAAK,YAAY,GAAG;IAClB,oCAAoC;IACpC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,wCAAwC;IACxC,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,KAAK,EAAE,YAAY,EACnB,sBAAsB,EAAE,sBAAsB,GAC7C,sBAAsB,CA4DxB"}

package/dist/context/helpers/create-browser-context.js

@@ -1,49 +1,57 @@
 // luma.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-const DEFAULT_CONTEXT_PROPS = {
-    powerPreference: 'high-performance', // After all, most apps are using WebGL for performance reasons
-    // eslint-disable-next-line no-console
-    onContextLost: () => console.error('WebGL context lost'),
-    // eslint-disable-next-line no-console
-    onContextRestored: () => console.info('WebGL context restored')
-};
 /**
  * Create a WebGL context for a canvas
  * Note calling this multiple time on the same canvas does return the same context
  * @param canvas A canvas element or offscreen canvas
  */
-export function createBrowserContext(canvas, props) {
-    props = { ...DEFAULT_CONTEXT_PROPS, ...props };
+export function createBrowserContext(canvas, props, webglContextAttributes) {
     // Try to extract any extra information about why context creation failed
-    let errorMessage = null;
-    const onCreateError = error => (errorMessage = error.statusMessage || errorMessage);
-    canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+    let errorMessage = '';
+    // const onCreateError = error => (errorMessage = error.statusMessage || errorMessage);
+    // Avoid multiple listeners?
+    // canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
+    // canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+    const webglProps = {
+        preserveDrawingBuffer: true,
+        // failIfMajorPerformanceCaveat: true,
+        ...webglContextAttributes
+    };
     // Create the desired context
     let gl = null;
-    // props.failIfMajorPerformanceCaveat = true;
-    // We require webgl2 context
-    gl ||= canvas.getContext('webgl2', props);
-    // Software GPU
-    // props.failIfMajorPerformanceCaveat = false;
-    // if (!gl && props.webgl1) {
-    //   gl = canvas.getContext('webgl', props);
-    // }
-    // TODO are we removing this listener before giving it a chance to fire?
-    canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
-    if (!gl) {
-        throw new Error(`Failed to create WebGL context: ${errorMessage || 'Unknown error'}`);
+    // Create a webgl2 context
+    gl ||= canvas.getContext('webgl2', webglProps);
+    if (webglProps.failIfMajorPerformanceCaveat) {
+        errorMessage ||=
+            'Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.';
+    }
+    // Creation failed with failIfMajorPerformanceCaveat - Try a Software GPU
+    if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
+        webglProps.failIfMajorPerformanceCaveat = false;
+        gl = canvas.getContext('webgl2', webglProps);
+        // @ts-expect-error
+        gl.luma ||= {};
+        // @ts-expect-error
+        gl.luma.softwareRenderer = true;
     }
-    if (props.onContextLost) {
-        // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
-        const { onContextLost } = props;
-        canvas.addEventListener('webglcontextlost', (event) => onContextLost(event), false);
+    if (!gl) {
+        gl = canvas.getContext('webgl', {});
+        if (gl) {
+            gl = null;
+            errorMessage ||= 'Your browser only supports WebGL1';
+        }
     }
-    if (props.onContextRestored) {
-        // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
-        const { onContextRestored } = props;
-        canvas.addEventListener('webglcontextrestored', (event) => onContextRestored(event), false);
+    if (!gl) {
+        errorMessage ||= 'Your browser does not support WebGL';
+        throw new Error(`Failed to create WebGL context: ${errorMessage}`);
     }
+    // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+    const { onContextLost, onContextRestored } = props;
+    canvas.addEventListener('webglcontextlost', (event) => onContextLost(event), false);
+    canvas.addEventListener('webglcontextrestored', (event) => onContextRestored(event), false);
+    // @ts-expect-error
+    gl.luma ||= {};
     return gl;
 }
 /* TODO - can we call this asynchronously to catch the error events?