@luma.gl/webgl 9.0.0-alpha.9 → 9.0.0-beta.2

package/dist/adapter/webgl-device.js

@@ -1,170 +1,151 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { Device, CanvasContext, log } from '@luma.gl/api';
+import { Device, CanvasContext, log, uid, assert } from '@luma.gl/core';
 import { isBrowser } from '@probe.gl/env';
-import { polyfillContext } from '../context/polyfill/polyfill-context';
-import { 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 { WEBGLBuffer } from "./resources/webgl-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";
+import { WEBGLCommandEncoder } from "./resources/webgl-command-encoder.js";
+import { WEBGLVertexArray } from "./resources/webgl-vertex-array.js";
+import { WEBGLTransformFeedback } from "./resources/webgl-transform-feedback.js";
+import { readPixelsToArray, readPixelsToBuffer } from "../classic/copy-and-blit.js";
+import { setGLParameters } from "../context/parameters/unified-parameter-api.js";
+import { withGLParameters } from "../context/state-tracker/with-parameters.js";
+import { clear } from "../classic/clear.js";
 const LOG_LEVEL = 1;
-let counter = 0;
-export default class WebGLDevice extends Device {
+export 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;
   }
-
-  get webglLimits() {
-    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
-    return this._webglLimits;
-  }
-
   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');
-
+  static async create() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
     if (typeof props.canvas === 'string') {
       await CanvasContext.pageLoaded;
     }
-
-    if (props.debug) {
+    if (log.get('debug') || props.debug) {
       await loadWebGLDeveloperTools();
     }
-
-    if (props.spector) {
+    const {
+      spector
+    } = props;
+    if (log.get('spector') || 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);
+    const device = new WebGLDevice(props);
+    const message = `\
+Created ${device.info.type}${device.debug ? ' debug' : ''} context: \
+${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
+    log.probe(LOG_LEVEL, message)();
+    log.table(LOG_LEVEL, device.info)();
+    log.groupEnd(LOG_LEVEL)();
+    return device;
   }
-
   constructor(props) {
-    var _props$gl;
-
-    super(props);
-
-    _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, "gl", void 0);
-
-    _defineProperty(this, "gl2", null);
-
-    _defineProperty(this, "debug", false);
-
-    _defineProperty(this, "isWebGL1", void 0);
-
-    _defineProperty(this, "isWebGL2", void 0);
-
-    _defineProperty(this, "_webglLimits", void 0);
-
-    _defineProperty(this, "_canvasSizeInfo", {
+    var _props$gl, _props$gl2;
+    super({
+      ...props,
+      id: props.id || uid('webgl-device')
+    });
+    this.info = void 0;
+    this.canvasContext = void 0;
+    this.handle = void 0;
+    this.lost = void 0;
+    this._resolveContextLost = void 0;
+    this._features = void 0;
+    this._limits = void 0;
+    this.renderPass = null;
+    this.gl = void 0;
+    this.gl2 = null;
+    this.debug = false;
+    this.isWebGL1 = void 0;
+    this.isWebGL2 = void 0;
+    this._canvasSizeInfo = {
       clientWidth: 0,
       clientHeight: 0,
       devicePixelRatio: 1
-    });
-
-    _defineProperty(this, "_extensions", {});
-
-    _defineProperty(this, "_polyfilled", false);
-
-    _defineProperty(this, "spector", void 0);
-
-    _defineProperty(this, "renderPass", null);
-
+    };
+    this._extensions = {};
+    this._polyfilled = false;
+    this.spector = void 0;
+    this._webglLimits = void 0;
+    this._constants = 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));
+      throw new Error(`WebGL context already attached to device ${device.id}`);
     }
-
-    this.canvasContext = new WebGLCanvasContext(this, props);
+    const canvas = props.canvas || ((_props$gl2 = props.gl) === null || _props$gl2 === void 0 ? void 0 : _props$gl2.canvas);
+    this.canvasContext = new WebGLCanvasContext(this, {
+      ...props,
+      canvas
+    });
     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;
-    gl = gl || (isBrowser() ? createBrowserContext(this.canvasContext.canvas, { ...props,
+    let gl = props.gl || null;
+    gl = gl || (isBrowser() ? createBrowserContext(this.canvasContext.canvas, {
+      ...props,
       onContextLost
     }) : null);
-    gl = gl || (!isBrowser() ? createHeadlessContext({ ...props,
+    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.canvasContext.resize();
     this.info = getDeviceInfo(this.gl);
     this.gl.device = this;
     this.gl._version = this.isWebGL2 ? 2 : 1;
@@ -176,11 +157,16 @@ export default class WebGLDevice extends Device {
     trackContextState(this.gl, {
       enable,
       copyState,
-      log: (...args) => log.log(1, ...args)()
+      log: function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return log.log(1, ...args)();
+      }
     });
-
     if (isBrowser() && props.debug) {
-      this.gl = makeDebugContext(this.gl, { ...props,
+      this.gl = makeDebugContext(this.gl, {
+        ...props,
         webgl2: this.isWebGL2,
         throwOnError: true
       });
@@ -189,149 +175,222 @@ export default class WebGLDevice extends Device {
       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,
+      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();
     }
   }
-
-  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'
-    });
-  }
-
   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);
+  createBuffer(props) {
+    const newProps = this._getBufferProps(props);
+    return new WEBGLBuffer(this, newProps);
   }
-
   _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);
   }
-
+  createVertexArray(props) {
+    return new WEBGLVertexArray(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');
+    throw new Error('ComputePass not supported in WebGL');
+  }
+  createTransformFeedback(props) {
+    return new WEBGLTransformFeedback(this, props);
   }
-
   getDefaultRenderPass() {
     this.renderPass = this.renderPass || this.beginRenderPass({
       framebuffer: this.canvasContext.getCurrentFramebuffer()
     });
     return this.renderPass;
   }
-
+  createCommandEncoder(props) {
+    return new WEBGLCommandEncoder(this, props);
+  }
   submit() {
     var _this$renderPass;
-
-    (_this$renderPass = this.renderPass) === null || _this$renderPass === void 0 ? void 0 : _this$renderPass.endPass();
+    (_this$renderPass = this.renderPass) === null || _this$renderPass === void 0 ? void 0 : _this$renderPass.end();
     this.renderPass = null;
   }
-
+  readPixelsToArrayWebGL(source, options) {
+    return readPixelsToArray(source, options);
+  }
+  readPixelsToBufferWebGL2(source, options) {
+    return readPixelsToBuffer(source, options);
+  }
+  setParametersWebGL(parameters) {
+    setGLParameters(this, parameters);
+  }
+  withParametersWebGL(parameters, func) {
+    withGLParameters(this, parameters, func);
+  }
+  clearWebGL(options) {
+    clear(this, options);
+  }
+  get webglLimits() {
+    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
+    return this._webglLimits;
+  }
+  loseDevice() {
+    var _this$_resolveContext2;
+    let deviceLossTriggered = false;
+    const ext = this.gl.getExtension('WEBGL_lose_context');
+    if (ext) {
+      deviceLossTriggered = true;
+      ext.loseContext();
+    }
+    (_this$_resolveContext2 = this._resolveContextLost) === null || _this$_resolveContext2 === void 0 ? void 0 : _this$_resolveContext2.call(this, {
+      reason: 'destroyed',
+      message: 'Application triggered context loss'
+    });
+    return deviceLossTriggered;
+  }
+  pushState() {
+    pushContextState(this.gl);
+  }
+  popState() {
+    popContextState(this.gl);
+  }
+  setSpectorMetadata(handle, props) {
+    handle.__SPECTOR_Metadata = props;
+  }
+  getGLKey(value, gl) {
+    gl = gl || this.gl2 || this.gl;
+    const number = Number(value);
+    for (const key in gl) {
+      if (gl[key] === number) {
+        return `GL.${key}`;
+      }
+    }
+    return String(value);
+  }
+  setConstantAttribute(location, constant) {
+    this._constants = this._constants || new Array(this.limits.maxVertexAttributes).fill(null);
+    const currentConstant = this._constants[location];
+    if (currentConstant && compareConstantArrayValues(currentConstant, constant)) {
+      log.info(1, `setConstantAttribute(${location}) could have been skipped, value unchanged`)();
+    }
+    this._constants[location] = constant;
+    switch (constant.constructor) {
+      case Float32Array:
+        setConstantFloatArray(this, location, constant);
+        break;
+      case Int32Array:
+        setConstantIntArray(this, location, constant);
+        break;
+      case Uint32Array:
+        setConstantUintArray(this, location, constant);
+        break;
+      default:
+        assert(false);
+    }
+  }
 }
-
-_defineProperty(WebGLDevice, "type", 'webgl');
-
+WebGLDevice.type = 'webgl';
 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));
 }
-
 function isWebGL2(gl) {
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
     return true;
   }
-
   return Boolean(gl && gl._version === 2);
 }
+function setConstantFloatArray(device, location, array) {
+  switch (array.length) {
+    case 1:
+      device.gl.vertexAttrib1fv(location, array);
+      break;
+    case 2:
+      device.gl.vertexAttrib2fv(location, array);
+      break;
+    case 3:
+      device.gl.vertexAttrib3fv(location, array);
+      break;
+    case 4:
+      device.gl.vertexAttrib4fv(location, array);
+      break;
+    default:
+      assert(false);
+  }
+}
+function setConstantIntArray(device, location, array) {
+  var _device$gl;
+  device.assertWebGL2();
+  (_device$gl = device.gl2) === null || _device$gl === void 0 ? void 0 : _device$gl.vertexAttribI4iv(location, array);
+}
+function setConstantUintArray(device, location, array) {
+  var _device$gl2;
+  device.assertWebGL2();
+  (_device$gl2 = device.gl2) === null || _device$gl2 === void 0 ? void 0 : _device$gl2.vertexAttribI4uiv(location, array);
+}
+function compareConstantArrayValues(v1, v2) {
+  if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
+    return false;
+  }
+  for (let i = 0; i < v1.length; ++i) {
+    if (v1[i] !== v2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
 //# sourceMappingURL=webgl-device.js.map