@luma.gl/webgl 9.0.0-alpha.14 → 9.0.0-alpha.16

package/dist/adapter/webgl-device.js

@@ -1,346 +1,296 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Device, CanvasContext, log, uid } from '@luma.gl/api';
 import { isBrowser } from '@probe.gl/env';
-import { polyfillContext } from '../context/polyfill/polyfill-context';
-import { popContextState, pushContextState, trackContextState } from '../context/state-tracker/track-context-state';
-import { createBrowserContext } from '../context/context/create-browser-context';
-import { createHeadlessContext, isHeadlessGLRegistered } from '../context/context/create-headless-context';
-import { getDeviceInfo } from './device-helpers/get-device-info';
-import { getDeviceFeatures } from './device-helpers/device-features';
-import { getDeviceLimits, getWebGLLimits } from './device-helpers/device-limits';
-import WebGLCanvasContext from './webgl-canvas-context';
-import { loadSpectorJS, initializeSpectorJS } from '../context/debug/spector';
-import { loadWebGLDeveloperTools, makeDebugContext } from '../context/debug/webgl-developer-tools';
-import { isTextureFormatSupported, isTextureFormatRenderable, isTextureFormatFilterable } from './converters/texture-formats';
-import ClassicBuffer from '../classic/buffer';
-import WEBGLShader from './resources/webgl-shader';
-import WEBGLSampler from './resources/webgl-sampler';
-import WEBGLTexture from './resources/webgl-texture';
-import WEBGLFramebuffer from './resources/webgl-framebuffer';
-import WEBGLRenderPass from './resources/webgl-render-pass';
-import WEBGLRenderPipeline from './resources/webgl-render-pipeline';
+import { polyfillContext } from '../context/polyfill/polyfill-context.js';
+import { popContextState, pushContextState, trackContextState } from '../context/state-tracker/track-context-state.js';
+import { createBrowserContext } from '../context/context/create-browser-context.js';
+import { createHeadlessContext, isHeadlessGLRegistered } from '../context/context/create-headless-context.js';
+import { getDeviceInfo } from './device-helpers/get-device-info.js';
+import { getDeviceFeatures } from './device-helpers/device-features.js';
+import { getDeviceLimits, getWebGLLimits } from './device-helpers/device-limits.js';
+import WebGLCanvasContext from './webgl-canvas-context.js';
+import { loadSpectorJS, initializeSpectorJS } from '../context/debug/spector.js';
+import { loadWebGLDeveloperTools, makeDebugContext } from '../context/debug/webgl-developer-tools.js';
+import { isTextureFormatSupported, isTextureFormatRenderable, isTextureFormatFilterable } from './converters/texture-formats.js';
+import ClassicBuffer from '../classic/buffer.js';
+import WEBGLShader from './resources/webgl-shader.js';
+import WEBGLSampler from './resources/webgl-sampler.js';
+import WEBGLTexture from './resources/webgl-texture.js';
+import WEBGLFramebuffer from './resources/webgl-framebuffer.js';
+import WEBGLRenderPass from './resources/webgl-render-pass.js';
+import WEBGLRenderPipeline from './resources/webgl-render-pipeline.js';
 const LOG_LEVEL = 1;
-export default class WebGLDevice extends Device {
-  static isSupported() {
-    return typeof WebGLRenderingContext !== 'undefined' || isHeadlessGLRegistered();
-  }
-
-  get features() {
-    this._features = this._features || getDeviceFeatures(this.gl);
-    return this._features;
-  }
-
-  get limits() {
-    this._limits = this._limits || getDeviceLimits(this.gl);
-    return this._limits;
-  }
-
-  static attach(gl) {
-    if (gl instanceof WebGLDevice) {
-      return gl;
-    }
-
-    if ((gl === null || gl === void 0 ? void 0 : gl.device) instanceof Device) {
-      return gl.device;
-    }
-
-    if (!isWebGL(gl)) {
-      throw new Error('Invalid WebGLRenderingContext');
-    }
-
-    return new WebGLDevice({
-      gl: gl
-    });
-  }
-
-  static async create(props = {}) {
-    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
-
-    if (typeof props.canvas === 'string') {
-      await CanvasContext.pageLoaded;
-    }
-
-    if (props.debug) {
-      await loadWebGLDeveloperTools();
-    }
-
-    if (props.spector) {
-      await loadSpectorJS();
-    }
-
-    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
-
-    if (props.gl && props.gl.device) {
-      return WebGLDevice.attach(props.gl);
-    }
-
-    return new WebGLDevice(props);
-  }
-
-  constructor(props) {
-    var _props$gl;
-
-    super({ ...props,
-      id: props.id || uid('webgl-device')
-    });
-
-    _defineProperty(this, "info", void 0);
-
-    _defineProperty(this, "canvasContext", void 0);
-
-    _defineProperty(this, "handle", void 0);
-
-    _defineProperty(this, "lost", void 0);
-
-    _defineProperty(this, "_resolveContextLost", void 0);
-
-    _defineProperty(this, "_features", void 0);
-
-    _defineProperty(this, "_limits", void 0);
-
-    _defineProperty(this, "renderPass", null);
-
-    _defineProperty(this, "gl", void 0);
-
-    _defineProperty(this, "gl2", null);
-
-    _defineProperty(this, "debug", false);
-
-    _defineProperty(this, "isWebGL1", void 0);
-
-    _defineProperty(this, "isWebGL2", void 0);
-
-    _defineProperty(this, "_canvasSizeInfo", {
-      clientWidth: 0,
-      clientHeight: 0,
-      devicePixelRatio: 1
-    });
-
-    _defineProperty(this, "_extensions", {});
-
-    _defineProperty(this, "_polyfilled", false);
-
-    _defineProperty(this, "spector", void 0);
-
-    _defineProperty(this, "_webglLimits", void 0);
-
-    const device = (_props$gl = props.gl) === null || _props$gl === void 0 ? void 0 : _props$gl.device;
-
-    if (device) {
-      throw new Error("WebGL context already attached to device ".concat(device.id));
-    }
-
-    this.canvasContext = new WebGLCanvasContext(this, props);
-    this.lost = new Promise(resolve => {
-      this._resolveContextLost = resolve;
-    });
-
-    const onContextLost = event => {
-      var _this$_resolveContext;
-
-      return (_this$_resolveContext = this._resolveContextLost) === null || _this$_resolveContext === void 0 ? void 0 : _this$_resolveContext.call(this, {
-        reason: 'destroyed',
-        message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
-      });
-    };
-
-    let gl = props.gl || null;
-    gl = gl || (isBrowser() ? createBrowserContext(this.canvasContext.canvas, { ...props,
-      onContextLost
-    }) : null);
-    gl = gl || (!isBrowser() ? createHeadlessContext({ ...props,
-      onContextLost
-    }) : null);
-
-    if (!gl) {
-      throw new Error('WebGL context creation failed');
-    }
-
-    this.handle = gl;
-    this.gl = this.handle;
-    this.gl2 = this.gl;
-    this.isWebGL2 = isWebGL2(this.gl);
-    this.isWebGL1 = !this.isWebGL2;
-    this.info = getDeviceInfo(this.gl);
-    this.gl.device = this;
-    this.gl._version = this.isWebGL2 ? 2 : 1;
-    polyfillContext(this.gl);
-    const {
-      enable = true,
-      copyState = false
-    } = props;
-    trackContextState(this.gl, {
-      enable,
-      copyState,
-      log: (...args) => log.log(1, ...args)()
-    });
-
-    if (isBrowser() && props.debug) {
-      this.gl = makeDebugContext(this.gl, { ...props,
-        webgl2: this.isWebGL2,
-        throwOnError: true
-      });
-      this.gl2 = this.gl;
-      this.debug = true;
-      log.level = Math.max(log.level, 1);
-      log.warn('WebGL debug mode activated. Performance reduced.')();
-    }
-
-    if (isBrowser() && props.spector) {
-      const canvas = this.handle.canvas || props.canvas;
-      this.spector = initializeSpectorJS({ ...this.props,
-        canvas
-      });
-    }
-
-    const message = "Created ".concat(this.info.type).concat(this.debug ? ' debug' : '', " context: ").concat(this.info.vendor, ", ").concat(this.info.renderer, " for canvas: ").concat(this.canvasContext.id);
-    log.probe(LOG_LEVEL, message)();
-    log.groupEnd(LOG_LEVEL)();
-  }
-
-  destroy() {
-    const ext = this.gl.getExtension('STACKGL_destroy_context');
-
-    if (ext) {
-      ext.destroy();
-    }
-  }
-
-  get isLost() {
-    return this.gl.isContextLost();
-  }
-
-  getSize() {
-    return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
-  }
-
-  isTextureFormatSupported(format) {
-    return isTextureFormatSupported(this.gl, format);
-  }
-
-  isTextureFormatFilterable(format) {
-    return isTextureFormatFilterable(this.gl, format);
-  }
-
-  isTextureFormatRenderable(format) {
-    return isTextureFormatRenderable(this.gl, format);
-  }
-
-  assertWebGL2() {
-    if (!this.gl2) {
-      throw new Error('Requires WebGL2');
-    }
-
-    return this.gl2;
-  }
-
-  createCanvasContext(props) {
-    throw new Error('WebGL only supports a single canvas');
-  }
-
-  _createBuffer(props) {
-    return new ClassicBuffer(this, props);
-  }
-
-  _createTexture(props) {
-    return new WEBGLTexture(this, props);
-  }
-
-  createExternalTexture(props) {
-    throw new Error('createExternalTexture() not implemented');
-  }
-
-  createSampler(props) {
-    return new WEBGLSampler(this, props);
-  }
-
-  createShader(props) {
-    return new WEBGLShader(this, props);
-  }
-
-  createFramebuffer(props) {
-    return new WEBGLFramebuffer(this, props);
-  }
-
-  createRenderPipeline(props) {
-    return new WEBGLRenderPipeline(this, props);
-  }
-
-  beginRenderPass(props) {
-    return new WEBGLRenderPass(this, props);
-  }
-
-  createComputePipeline(props) {
-    throw new Error('ComputePipeline not supported in WebGL');
-  }
-
-  beginComputePass(props) {
-    throw new Error('compute shaders not supported in WebGL');
-  }
-
-  getDefaultRenderPass() {
-    this.renderPass = this.renderPass || this.beginRenderPass({
-      framebuffer: this.canvasContext.getCurrentFramebuffer()
-    });
-    return this.renderPass;
-  }
-
-  submit() {
-    var _this$renderPass;
-
-    (_this$renderPass = this.renderPass) === null || _this$renderPass === void 0 ? void 0 : _this$renderPass.endPass();
-    this.renderPass = null;
-  }
-
-  get webglLimits() {
-    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
-    return this._webglLimits;
-  }
-
-  loseDevice() {
-    var _this$_resolveContext2;
-
-    const ext = this.gl.getExtension('WEBGL_lose_context');
-
-    if (ext) {
-      ext.loseContext();
-    }
-
-    (_this$_resolveContext2 = this._resolveContextLost) === null || _this$_resolveContext2 === void 0 ? void 0 : _this$_resolveContext2.call(this, {
-      reason: 'destroyed',
-      message: 'Application triggered context loss'
-    });
-  }
-
-  pushState() {
-    pushContextState(this.gl);
-  }
-
-  popState() {
-    popContextState(this.gl);
-  }
-
+/** WebGPU style Device API for a WebGL context */
+class WebGLDevice extends Device {
+    static isSupported() {
+        return typeof WebGLRenderingContext !== 'undefined' || isHeadlessGLRegistered();
+    }
+    get features() {
+        this._features = this._features || getDeviceFeatures(this.gl);
+        return this._features;
+    }
+    get limits() {
+        this._limits = this._limits || getDeviceLimits(this.gl);
+        return this._limits;
+    }
+    //
+    // Static methods, expected to be present by `luma.createDevice()`
+    //
+    /**
+     * Get a device instance from a GL context
+     * Creates and instruments the device if not already created
+     * @param gl
+     * @returns
+     */
+    static attach(gl) {
+        if (gl instanceof WebGLDevice) {
+            return gl;
+        }
+        // @ts-expect-error
+        if (gl?.device instanceof Device) {
+            // @ts-expect-error
+            return gl.device;
+        }
+        if (!isWebGL(gl)) {
+            throw new Error('Invalid WebGLRenderingContext');
+        }
+        return new WebGLDevice({ gl: gl });
+    }
+    static async create(props = {}) {
+        log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
+        // Wait for page to load. Only wait when props. canvas is string
+        // to avoid setting page onload callback unless necessary
+        if (typeof props.canvas === 'string') {
+            await CanvasContext.pageLoaded;
+        }
+        // Load webgl and spector debug scripts from CDN if requested
+        if (props.debug) {
+            await loadWebGLDeveloperTools();
+        }
+        // @ts-expect-error spector not on props
+        if (props.spector) {
+            await loadSpectorJS();
+        }
+        log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
+        // @ts-expect-error
+        if (props.gl && props.gl.device) {
+            return WebGLDevice.attach(props.gl);
+        }
+        return new WebGLDevice(props);
+    }
+    //
+    // Public API
+    //
+    constructor(props) {
+        super({ ...props, id: props.id || uid('webgl-device') });
+        this.renderPass = null;
+        /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
+        this.gl2 = null;
+        this.debug = false;
+        /** State used by luma.gl classes: TODO - move to canvasContext*/
+        this._canvasSizeInfo = { clientWidth: 0, clientHeight: 0, devicePixelRatio: 1 };
+        /** State used by luma.gl classes - TODO - not used? */
+        this._extensions = {};
+        this._polyfilled = false;
+        // If attaching to an already attached context, return the attached device
+        // @ts-expect-error device is attached to context
+        const device = props.gl?.device;
+        if (device) {
+            throw new Error(`WebGL context already attached to device ${device.id}`);
+        }
+        // Create and instrument context
+        this.canvasContext = new WebGLCanvasContext(this, props);
+        this.lost = new Promise((resolve) => {
+            this._resolveContextLost = resolve;
+        });
+        const onContextLost = (event) => this._resolveContextLost?.({
+            reason: 'destroyed',
+            message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
+        });
+        let gl = props.gl || null;
+        gl =
+            gl ||
+                (isBrowser() ? createBrowserContext(this.canvasContext.canvas, { ...props, onContextLost }) : null);
+        gl = gl || (!isBrowser() ? createHeadlessContext({ ...props, onContextLost }) : null);
+        if (!gl) {
+            throw new Error('WebGL context creation failed');
+        }
+        this.handle = gl;
+        this.gl = this.handle;
+        this.gl2 = this.gl;
+        this.isWebGL2 = isWebGL2(this.gl);
+        this.isWebGL1 = !this.isWebGL2;
+        // luma Device fields
+        this.info = getDeviceInfo(this.gl);
+        // @ts-expect-error Link webgl context back to device
+        this.gl.device = this;
+        // @ts-expect-error Annotate webgl context to handle
+        this.gl._version = this.isWebGL2 ? 2 : 1;
+        // Add subset of WebGL2 methods to WebGL1 context
+        polyfillContext(this.gl);
+        // Install context state tracking
+        // @ts-expect-error - hidden parameters
+        const { enable = true, copyState = false } = props;
+        trackContextState(this.gl, {
+            enable,
+            copyState,
+            log: (...args) => log.log(1, ...args)()
+        });
+        // DEBUG contexts: Add debug instrumentation to the context, force log level to at least 1
+        if (isBrowser() && props.debug) {
+            this.gl = makeDebugContext(this.gl, { ...props, webgl2: this.isWebGL2, throwOnError: true });
+            this.gl2 = this.gl;
+            this.debug = true;
+            log.level = Math.max(log.level, 1);
+            log.warn('WebGL debug mode activated. Performance reduced.')();
+        }
+        // @ts-expect-error spector not on props
+        if (isBrowser() && props.spector) {
+            const canvas = this.handle.canvas || props.canvas;
+            this.spector = initializeSpectorJS({ ...this.props, canvas });
+        }
+        // Log some debug info about the newly created context
+        const message = `\
+Created ${this.info.type}${this.debug ? ' debug' : ''} context: \
+${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`;
+        log.probe(LOG_LEVEL, message)();
+        log.groupEnd(LOG_LEVEL)();
+    }
+    /**
+     * Destroys the context
+     * @note Has no effect for browser contexts, there is no browser API for destroying contexts
+     */
+    destroy() {
+        const ext = this.gl.getExtension('STACKGL_destroy_context');
+        if (ext) {
+            ext.destroy();
+        }
+    }
+    get isLost() {
+        return this.gl.isContextLost();
+    }
+    getSize() {
+        return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
+    }
+    isTextureFormatSupported(format) {
+        return isTextureFormatSupported(this.gl, format);
+    }
+    isTextureFormatFilterable(format) {
+        return isTextureFormatFilterable(this.gl, format);
+    }
+    isTextureFormatRenderable(format) {
+        return isTextureFormatRenderable(this.gl, format);
+    }
+    // WEBGL SPECIFIC METHODS
+    /** Returns a WebGL2RenderingContext or throws an error */
+    assertWebGL2() {
+        if (!this.gl2) {
+            throw new Error('Requires WebGL2');
+        }
+        return this.gl2;
+    }
+    // IMPLEMENTATION OF ABSTRACT DEVICE
+    createCanvasContext(props) {
+        throw new Error('WebGL only supports a single canvas');
+    }
+    _createBuffer(props) {
+        return new ClassicBuffer(this, props);
+    }
+    _createTexture(props) {
+        return new WEBGLTexture(this, props);
+    }
+    createExternalTexture(props) {
+        throw new Error('createExternalTexture() not implemented'); // return new Program(props);
+    }
+    createSampler(props) {
+        return new WEBGLSampler(this, props);
+    }
+    createShader(props) {
+        return new WEBGLShader(this, props);
+    }
+    createFramebuffer(props) {
+        return new WEBGLFramebuffer(this, props);
+    }
+    createRenderPipeline(props) {
+        return new WEBGLRenderPipeline(this, props);
+    }
+    beginRenderPass(props) {
+        return new WEBGLRenderPass(this, props);
+    }
+    createComputePipeline(props) {
+        throw new Error('ComputePipeline not supported in WebGL');
+    }
+    beginComputePass(props) {
+        throw new Error('compute shaders not supported in WebGL');
+    }
+    getDefaultRenderPass() {
+        this.renderPass =
+            this.renderPass ||
+                this.beginRenderPass({
+                    framebuffer: this.canvasContext.getCurrentFramebuffer()
+                });
+        return this.renderPass;
+    }
+    /**
+     * Offscreen Canvas Support: Commit the frame
+     * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
+     * Chrome's offscreen canvas does not require gl.commit
+     */
+    submit() {
+        this.renderPass?.end();
+        this.renderPass = null;
+        // this.canvasContext.commit();
+    }
+    /** Return WebGL specific limits */
+    get webglLimits() {
+        this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
+        return this._webglLimits;
+    }
+    /**
+     * Loses the context
+     * @note Triggers context loss, mainly for testing
+     * @todo Promote to `Device` API?
+     */
+    loseDevice() {
+        const ext = this.gl.getExtension('WEBGL_lose_context');
+        if (ext) {
+            ext.loseContext();
+        }
+        // loseContext should trigger context loss callback but 
+        this._resolveContextLost?.({
+            reason: 'destroyed',
+            message: 'Application triggered context loss'
+        });
+    }
+    /** Save current WebGL context state onto an internal stack */
+    pushState() {
+        pushContextState(this.gl);
+    }
+    /** Restores previously saved context state */
+    popState() {
+        popContextState(this.gl);
+    }
 }
-
-_defineProperty(WebGLDevice, "type", 'webgl');
-
+//
+// Public `Device` API
+//
+WebGLDevice.type = 'webgl';
+export default WebGLDevice;
+/** Check if supplied parameter is a WebGLRenderingContext */
 function isWebGL(gl) {
-  if (typeof WebGLRenderingContext !== 'undefined' && gl instanceof WebGLRenderingContext) {
-    return true;
-  }
-
-  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
-    return true;
-  }
-
-  return Boolean(gl && Number.isFinite(gl._version));
+    if (typeof WebGLRenderingContext !== 'undefined' && gl instanceof WebGLRenderingContext) {
+        return true;
+    }
+    if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+        return true;
+    }
+    // Look for debug contexts, headless gl etc
+    return Boolean(gl && Number.isFinite(gl._version));
 }
-
+/** Check if supplied parameter is a WebGL2RenderingContext */
 function isWebGL2(gl) {
-  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
-    return true;
-  }
-
-  return Boolean(gl && gl._version === 2);
+    if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+        return true;
+    }
+    // Look for debug contexts, headless gl etc
+    return Boolean(gl && gl._version === 2);
 }
-//# sourceMappingURL=webgl-device.js.map

package/dist/bundle.js

@@ -1,5 +1,4 @@
+// @ts-nocheck
 const moduleExports = require('./index');
-
 globalThis.luma = globalThis.luma || {};
 module.exports = Object.assign(globalThis.luma, moduleExports);
-//# sourceMappingURL=bundle.js.map