@luma.gl/webgl 8.6.0-alpha.5 → 9.0.0-alpha.10

package/dist/es5/adapter/webgl-device.js

@@ -5,9 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWebGLDevice = getWebGLDevice;
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -24,17 +27,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _api = require("@luma.gl/api");
 
+var _env = require("@probe.gl/env");
+
 var _polyfillContext = require("../context/polyfill/polyfill-context");
 
 var _trackContextState = require("../context/state-tracker/track-context-state");
 
-var _devicePixels = require("../context/context/device-pixels");
-
-var _createContext2 = require("../context/context/create-context");
+var _createBrowserContext = require("../context/context/create-browser-context");
 
-var _getCanvas = require("../context/context/get-canvas");
-
-var _webglChecks = require("../context/context/webgl-checks");
+var _createHeadlessContext = require("../context/context/create-headless-context");
 
 var _getDeviceInfo = require("./device-helpers/get-device-info");
 
@@ -42,11 +43,27 @@ var _deviceFeatures = require("./device-helpers/device-features");
 
 var _deviceLimits = require("./device-helpers/device-limits");
 
-var _webglBuffer = _interopRequireDefault(require("../classes/webgl-buffer"));
+var _webglCanvasContext = _interopRequireDefault(require("./webgl-canvas-context"));
+
+var _spector = require("../context/debug/spector");
+
+var _webglDeveloperTools = require("../context/debug/webgl-developer-tools");
+
+var _textureFormats = require("./converters/texture-formats");
+
+var _buffer = _interopRequireDefault(require("../classic/buffer"));
+
+var _webglShader = _interopRequireDefault(require("./resources/webgl-shader"));
+
+var _webglSampler = _interopRequireDefault(require("./resources/webgl-sampler"));
+
+var _webglTexture = _interopRequireDefault(require("./resources/webgl-texture"));
+
+var _webglFramebuffer = _interopRequireDefault(require("./resources/webgl-framebuffer"));
 
-var _webglShader = require("../adapter/webgl-shader");
+var _webglRenderPass = _interopRequireDefault(require("./resources/webgl-render-pass"));
 
-var _texture2d = _interopRequireDefault(require("../classes/texture-2d"));
+var _webglRenderPipeline = _interopRequireDefault(require("./resources/webgl-render-pipeline"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -56,37 +73,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var DEFAULT_DEVICE_PROPS = {
-  canvas: undefined,
-  gl: undefined,
-  webgl2: true,
-  webgl1: true,
-  manageState: true,
-  width: 800,
-  height: 600,
-  debug: false,
-  break: undefined,
-  onContextLost: function onContextLost() {
-    return console.error('WebGL context lost');
-  },
-  onContextRestored: function onContextRestored() {
-    return console.info('WebGL context restored');
-  },
-  alpha: undefined,
-  depth: undefined,
-  stencil: undefined,
-  antialias: undefined,
-  premultipliedAlpha: undefined,
-  preserveDrawingBuffer: undefined,
-  failIfMajorPerformanceCaveat: undefined
-};
 var LOG_LEVEL = 1;
-var glToContextMap = new WeakMap();
-
-function getWebGLDevice(gl) {
-  return glToContextMap.get(gl);
-}
-
 var counter = 0;
 
 var WebGLDevice = function (_Device) {
@@ -95,26 +82,25 @@ var WebGLDevice = function (_Device) {
   var _super = _createSuper(WebGLDevice);
 
   function WebGLDevice(props) {
-    var _this$props$gl;
+    var _props$gl;
 
     var _this;
 
     (0, _classCallCheck2.default)(this, WebGLDevice);
-    _this = _super.call(this);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "features", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "limits", void 0);
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "info", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canvasContext", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handle", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lost", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "props", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "userData", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isWebGL2", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_resolveContextLost", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_features", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_limits", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "gl", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "gl2", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "offScreen", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "webglLimits", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultFramebuffer", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultVertexArray", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_state", 'uninitialized');
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "gl2", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "debug", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isWebGL1", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isWebGL2", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_webglLimits", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_canvasSizeInfo", {
       clientWidth: 0,
       clientHeight: 0,
@@ -122,46 +108,56 @@ var WebGLDevice = function (_Device) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_extensions", {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_polyfilled", false);
-    _this.props = _objectSpread(_objectSpread({}, DEFAULT_DEVICE_PROPS), props);
-    var device = (_this$props$gl = _this.props.gl) === null || _this$props$gl === void 0 ? void 0 : _this$props$gl.device;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "spector", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderPass", null);
+    var device = (_props$gl = props.gl) === null || _props$gl === void 0 ? void 0 : _props$gl.device;
 
     if (device) {
-      if (device._state !== 'initialized') {
-        _api.log.error('recursive context');
-
-        throw new Error('recursive context');
-      }
-
-      return (0, _possibleConstructorReturn2.default)(_this, device);
+      throw new Error("WebGL context already attached to device ".concat(device.id));
     }
 
-    _this.offScreen = typeof OffscreenCanvas !== 'undefined' && props.canvas instanceof OffscreenCanvas;
-    _this.gl = _this.props.gl || _this._createContext(props);
-    _this.gl2 = _this.gl;
-    _this.isWebGL2 = (0, _webglChecks.isWebGL2)(_this.gl);
-    _this._state = 'initializing';
+    _this.canvasContext = new _webglCanvasContext.default((0, _assertThisInitialized2.default)(_this), props);
+    _this.lost = new Promise(function (resolve) {
+      _this._resolveContextLost = resolve;
+    });
 
-    if (_this.gl.device) {
-      _api.log.error('device already created');
+    var onContextLost = function onContextLost(event) {
+      var _this$_resolveContext, _this2;
 
-      throw new Error('device already created');
+      return (_this$_resolveContext = (_this2 = _this)._resolveContextLost) === null || _this$_resolveContext === void 0 ? void 0 : _this$_resolveContext.call(_this2, {
+        reason: 'destroyed',
+        message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
+      });
+    };
+
+    var gl = props.gl;
+    gl = gl || ((0, _env.isBrowser)() ? (0, _createBrowserContext.createBrowserContext)(_this.canvasContext.canvas, _objectSpread(_objectSpread({}, props), {}, {
+      onContextLost: onContextLost
+    })) : null);
+    gl = gl || (!(0, _env.isBrowser)() ? (0, _createHeadlessContext.createHeadlessContext)(_objectSpread(_objectSpread({}, props), {}, {
+      onContextLost: onContextLost
+    })) : null);
+
+    if (!gl) {
+      throw new Error('WebGL context creation failed');
     }
 
-    _this.gl.device = (0, _assertThisInitialized2.default)(_this);
-    _this.gl._version = typeof WebGL2RenderingContext !== 'undefined' && _this.gl instanceof WebGL2RenderingContext ? 2 : 1;
-    glToContextMap.set(_this.gl, (0, _assertThisInitialized2.default)(_this));
+    _this.handle = gl;
+    _this.gl = _this.handle;
+    _this.gl2 = _this.gl;
+    _this.isWebGL2 = isWebGL2(_this.gl);
+    _this.isWebGL1 = !_this.isWebGL2;
     _this.info = (0, _getDeviceInfo.getDeviceInfo)(_this.gl);
-    var debug = _this.gl.debug ? ' debug' : '';
-    var webGL = (0, _webglChecks.isWebGL2)(_this.gl) ? 'WebGL2' : 'WebGL1';
-
-    _api.log.groupCollapsed(LOG_LEVEL, "".concat(webGL).concat(debug, " context: ").concat(_this.info.vendor, ", ").concat(_this.info.renderer))();
-
+    _this.gl.device = (0, _assertThisInitialized2.default)(_this);
+    _this.gl._version = _this.isWebGL2 ? 2 : 1;
     (0, _polyfillContext.polyfillContext)(_this.gl);
-
-    _api.log.probe(LOG_LEVEL, 'polyfilled context')();
-
+    var _props$enable = props.enable,
+        enable = _props$enable === void 0 ? true : _props$enable,
+        _props$copyState = props.copyState,
+        copyState = _props$copyState === void 0 ? false : _props$copyState;
     (0, _trackContextState.trackContextState)(_this.gl, {
-      copyState: false,
+      enable: enable,
+      copyState: copyState,
       log: function log() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
@@ -171,27 +167,53 @@ var WebGLDevice = function (_Device) {
       }
     });
 
-    _api.log.probe(LOG_LEVEL, 'instrumented context')();
-
-    _this.features = (0, _deviceFeatures.getDeviceFeatures)(_this.gl);
-
-    _api.log.probe(LOG_LEVEL, "queried device features ".concat(counter))();
+    if ((0, _env.isBrowser)() && props.debug) {
+      _this.gl = (0, _webglDeveloperTools.makeDebugContext)(_this.gl, _objectSpread(_objectSpread({}, props), {}, {
+        webgl2: _this.isWebGL2,
+        throwOnError: true
+      }));
+      _this.gl2 = _this.gl;
+      _this.debug = true;
+      _api.log.level = Math.max(_api.log.level, 1);
 
-    _this.limits = (0, _deviceLimits.getDeviceLimits)(_this.gl);
+      _api.log.warn('WebGL debug mode activated. Performance reduced.')();
+    }
 
-    _api.log.probe(LOG_LEVEL, 'queried device limits')();
+    if ((0, _env.isBrowser)() && props.spector) {
+      var canvas = _this.handle.canvas || props.canvas;
+      _this.spector = (0, _spector.initializeSpectorJS)(_objectSpread(_objectSpread({}, _this.props), {}, {
+        canvas: canvas
+      }));
+    }
 
-    _this.webglLimits = (0, _deviceLimits.getWebGLLimits)(_this.gl);
+    var 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);
 
-    _api.log.probe(LOG_LEVEL, 'queried webgl limits')();
+    _api.log.probe(LOG_LEVEL, message)();
 
     _api.log.groupEnd(LOG_LEVEL)();
 
-    _this._state = 'initialized';
     return _this;
   }
 
   (0, _createClass2.default)(WebGLDevice, [{
+    key: "features",
+    get: function get() {
+      this._features = this._features || (0, _deviceFeatures.getDeviceFeatures)(this.gl);
+      return this._features;
+    }
+  }, {
+    key: "limits",
+    get: function get() {
+      this._limits = this._limits || (0, _deviceLimits.getDeviceLimits)(this.gl);
+      return this._limits;
+    }
+  }, {
+    key: "webglLimits",
+    get: function get() {
+      this._webglLimits = this._webglLimits || (0, _deviceLimits.getWebGLLimits)(this.gl);
+      return this._webglLimits;
+    }
+  }, {
     key: "destroy",
     value: function destroy() {
       var ext = this.gl.getExtension('STACKGL_destroy_context');
@@ -201,79 +223,241 @@ var WebGLDevice = function (_Device) {
       }
     }
   }, {
-    key: "resize",
-    value: function resize(options) {
-      if (this.gl.canvas) {
-        var devicePixelRatio = (0, _devicePixels.getDevicePixelRatio)(options === null || options === void 0 ? void 0 : options.useDevicePixels);
-        (0, _devicePixels.setDevicePixelRatio)(this.gl, devicePixelRatio, options);
-        return;
-      }
+    key: "loseDevice",
+    value: function loseDevice() {
+      var _this$_resolveContext2;
+
+      var ext = this.gl.getExtension('WEBGL_lose_context');
 
-      var ext = this.gl.getExtension('STACKGL_resize_drawingbuffer');
+      if (ext) {
+        ext.loseContext();
+      }
 
-      if (ext && options && "width" in options && "height" in options) {
-        ext.resize(options.width, options.height);
+      (_this$_resolveContext2 = this._resolveContextLost) === null || _this$_resolveContext2 === void 0 ? void 0 : _this$_resolveContext2.call(this, {
+        reason: 'destroyed',
+        message: 'Application triggered context loss'
+      });
+    }
+  }, {
+    key: "isLost",
+    get: function get() {
+      return this.gl.isContextLost();
+    }
+  }, {
+    key: "getSize",
+    value: function getSize() {
+      return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
+    }
+  }, {
+    key: "isTextureFormatSupported",
+    value: function isTextureFormatSupported(format) {
+      return (0, _textureFormats.isTextureFormatSupported)(this.gl, format);
+    }
+  }, {
+    key: "isTextureFormatFilterable",
+    value: function isTextureFormatFilterable(format) {
+      return (0, _textureFormats.isTextureFormatFilterable)(this.gl, format);
+    }
+  }, {
+    key: "isTextureFormatRenderable",
+    value: function isTextureFormatRenderable(format) {
+      return (0, _textureFormats.isTextureFormatRenderable)(this.gl, format);
+    }
+  }, {
+    key: "assertWebGL2",
+    value: function assertWebGL2() {
+      if (!this.gl2) {
+        throw new Error('Requires WebGL2');
       }
+
+      return this.gl2;
+    }
+  }, {
+    key: "createCanvasContext",
+    value: function createCanvasContext(props) {
+      throw new Error('WebGL only supports a single canvas');
     }
   }, {
     key: "_createBuffer",
     value: function _createBuffer(props) {
-      return new _webglBuffer.default(this.gl, props);
+      return new _buffer.default(this, props);
+    }
+  }, {
+    key: "_createTexture",
+    value: function _createTexture(props) {
+      return new _webglTexture.default(this, props);
     }
   }, {
-    key: "createTexture",
-    value: function createTexture(props) {
-      return new _texture2d.default(this, props);
+    key: "createExternalTexture",
+    value: function createExternalTexture(props) {
+      throw new Error('createExternalTexture() not implemented');
+    }
+  }, {
+    key: "createSampler",
+    value: function createSampler(props) {
+      return new _webglSampler.default(this, props);
     }
   }, {
     key: "createShader",
     value: function createShader(props) {
-      return new _webglShader.WEBGLShader(this, props);
+      return new _webglShader.default(this, props);
     }
   }, {
-    key: "commit",
-    value: function commit() {
-      if (this.offScreen && this.gl.commit) {
-        this.gl.commit();
-      }
+    key: "createFramebuffer",
+    value: function createFramebuffer(props) {
+      return new _webglFramebuffer.default(this, props);
+    }
+  }, {
+    key: "createRenderPipeline",
+    value: function createRenderPipeline(props) {
+      return new _webglRenderPipeline.default(this, props);
+    }
+  }, {
+    key: "beginRenderPass",
+    value: function beginRenderPass(props) {
+      return new _webglRenderPass.default(this, props);
+    }
+  }, {
+    key: "createComputePipeline",
+    value: function createComputePipeline(props) {
+      throw new Error('ComputePipeline not supported in WebGL');
     }
   }, {
-    key: "_createContext",
-    value: function _createContext(options) {
-      var _this$props = this.props,
-          width = _this$props.width,
-          height = _this$props.height,
-          canvas = _this$props.canvas;
-      var targetCanvas = (0, _getCanvas.getCanvas)({
-        canvas: canvas,
-        width: width,
-        height: height
+    key: "beginComputePass",
+    value: function beginComputePass(props) {
+      throw new Error('compute shaders not supported in WebGL');
+    }
+  }, {
+    key: "getDefaultRenderPass",
+    value: function getDefaultRenderPass() {
+      this.renderPass = this.renderPass || this.beginRenderPass({
+        framebuffer: this.canvasContext.getCurrentFramebuffer()
       });
-      return (0, _createContext2.createBrowserContext)(targetCanvas, options);
+      return this.renderPass;
+    }
+  }, {
+    key: "submit",
+    value: function submit() {
+      var _this$renderPass;
+
+      (_this$renderPass = this.renderPass) === null || _this$renderPass === void 0 ? void 0 : _this$renderPass.endPass();
+      this.renderPass = null;
     }
   }], [{
-    key: "fromContext",
-    value: function fromContext(gl) {
-      return gl.device;
+    key: "isSupported",
+    value: function isSupported() {
+      return typeof WebGLRenderingContext !== 'undefined' || (0, _createHeadlessContext.isHeadlessGLRegistered)();
     }
   }, {
     key: "attach",
-    value: function attach(gl, props) {
+    value: function attach(gl) {
       if (gl instanceof WebGLDevice) {
         return gl;
       }
 
-      if (!(0, _webglChecks.isWebGL)(gl)) {
+      if ((gl === null || gl === void 0 ? void 0 : gl.device) instanceof _api.Device) {
+        return gl.device;
+      }
+
+      if (!isWebGL(gl)) {
         throw new Error('Invalid WebGLRenderingContext');
       }
 
-      return new WebGLDevice(_objectSpread(_objectSpread({}, props), {}, {
+      return new WebGLDevice({
         gl: gl
-      }));
+      });
     }
+  }, {
+    key: "create",
+    value: function () {
+      var _create = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee() {
+        var props,
+            _args = arguments;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                props = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+
+                _api.log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
+
+                if (!(typeof props.canvas === 'string')) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 5;
+                return _api.CanvasContext.pageLoaded;
+
+              case 5:
+                if (!props.debug) {
+                  _context.next = 8;
+                  break;
+                }
+
+                _context.next = 8;
+                return (0, _webglDeveloperTools.loadWebGLDeveloperTools)();
+
+              case 8:
+                if (!props.spector) {
+                  _context.next = 11;
+                  break;
+                }
+
+                _context.next = 11;
+                return (0, _spector.loadSpectorJS)();
+
+              case 11:
+                _api.log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
+
+                if (!(props.gl && props.gl.device)) {
+                  _context.next = 14;
+                  break;
+                }
+
+                return _context.abrupt("return", WebGLDevice.attach(props.gl));
+
+              case 14:
+                return _context.abrupt("return", new WebGLDevice(props));
+
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function create() {
+        return _create.apply(this, arguments);
+      }
+
+      return create;
+    }()
   }]);
   return WebGLDevice;
 }(_api.Device);
 
 exports.default = WebGLDevice;
+(0, _defineProperty2.default)(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);
+}
 //# sourceMappingURL=webgl-device.js.map