@antv/l7-renderer 2.20.12 → 2.20.14

package/es/device/index.js

@@ -4,16 +4,19 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Format, TextureUsage, TransparentBlack, WebGLDeviceContribution, WebGPUDeviceContribution, colorNewFromRGBA } from '@antv/g-device-api';
+import { Format, TextureUsage, TransparentBlack, ViewportOrigin, WebGLDeviceContribution, WebGPUDeviceContribution, colorNewFromRGBA } from '@antv/g-device-api';
+import { lodashUtil } from '@antv/l7-utils';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 import DeviceAttribute from "./DeviceAttribute";
 import DeviceBuffer from "./DeviceBuffer";
+import { RenderCache } from "./DeviceCache";
 import DeviceElements from "./DeviceElements";
 import DeviceFramebuffer from "./DeviceFramebuffer";
 import DeviceModel from "./DeviceModel";
 import DeviceTexture2D from "./DeviceTexture2D";
 import { isWebGL2 } from "./utils/webgl";
+var isUndefined = lodashUtil.isUndefined;
 
 /**
  * Device API renderer
@@ -51,6 +54,30 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
       _this.endFrame();
       _this.currentFramebuffer = null;
     });
+    _defineProperty(this, "useFramebufferAsync", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(framebuffer, drawCommands) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this.currentFramebuffer = framebuffer;
+              _this.preRenderPass = _this.renderPass;
+              _this.beginFrame();
+              _context.next = 5;
+              return drawCommands();
+            case 5:
+              _this.endFrame();
+              _this.currentFramebuffer = null;
+              _this.renderPass = _this.preRenderPass;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "clear", function (options) {
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
       var color = options.color,
@@ -65,18 +92,37 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
           depth: depth,
           stencil: stencil
         };
+      } else {
+        var platformString = _this.queryVerdorInfo();
+        if (platformString === 'WebGL1') {
+          var gl = _this.getGLContext();
+          if (!isUndefined(stencil)) {
+            gl.clearStencil(stencil);
+            gl.clear(gl.STENCIL_BUFFER_BIT);
+          } else if (!isUndefined(depth)) {
+            gl.clearDepth(depth);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+          }
+        } else if (platformString === 'WebGL2') {
+          var _gl = _this.getGLContext();
+          if (!isUndefined(stencil)) {
+            _gl.clearBufferiv(_gl.STENCIL, 0, [stencil]);
+          } else if (!isUndefined(depth)) {
+            _gl.clearBufferfv(_gl.DEPTH, 0, [depth]);
+          }
+        }
       }
+      // Recreate render pass
+      // this.beginFrame();
     });
-    _defineProperty(this, "viewport", function (_ref) {
-      var width = _ref.width,
-        height = _ref.height;
-      // use WebGL context directly
-      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
-      // this.gl._gl.viewport(x, y, width, height);
+    _defineProperty(this, "viewport", function (_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
+      // @see https://observablehq.com/@antv/g-device-api#cell-267
+      _this.swapChain.configureSwapChain(width, height);
+      _this.createMainColorDepthRT(width, height);
       _this.width = width;
       _this.height = height;
-      // Will be used in `setViewport` from RenderPass later.
-      // this.gl._refresh();
     });
     _defineProperty(this, "readPixels", function (options) {
       var framebuffer = options.framebuffer,
@@ -86,8 +132,54 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
         height = options.height;
       var readback = _this.device.createReadback();
       var texture = framebuffer['colorTexture'];
-      return readback.readTextureSync(texture, x, y, width, height, new Uint8Array(width * height * 4));
+      var result = readback.readTextureSync(texture, x,
+      /**
+       * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+       * WebGPU needs flipY
+       */
+      _this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : _this.height - y, width, height, new Uint8Array(width * height * 4));
+      readback.destroy();
+      return result;
     });
+    _defineProperty(this, "readPixelsAsync", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
+        var framebuffer, x, y, width, height, readback, texture, result, j, t;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              framebuffer = options.framebuffer, x = options.x, y = options.y, width = options.width, height = options.height;
+              readback = _this.device.createReadback();
+              texture = framebuffer['colorTexture'];
+              _context2.next = 5;
+              return readback.readTexture(texture, x,
+              /**
+               * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+               * WebGPU needs flipY
+               */
+              _this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : _this.height - y, width, height, new Uint8Array(width * height * 4));
+            case 5:
+              result = _context2.sent;
+              // Since we use U8_RGBA_RT format in render target, need to change bgranorm -> rgba here.
+              if (_this.viewportOrigin !== ViewportOrigin.LOWER_LEFT) {
+                for (j = 0; j < result.length; j += 4) {
+                  // Switch b and r components.
+                  t = result[j];
+                  result[j] = result[j + 2];
+                  result[j + 2] = t;
+                }
+              }
+              readback.destroy();
+              return _context2.abrupt("return", result);
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "getViewportSize", function () {
       // FIXME: add viewport size in Device API.
       return {
@@ -100,7 +192,6 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
       return (_this$canvas = _this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.parentElement;
     });
     _defineProperty(this, "getCanvas", function () {
-      // return this.$container?.getElementsByTagName('canvas')[0] || null;
       return _this.canvas;
     });
     _defineProperty(this, "getGLContext", function () {
@@ -116,6 +207,7 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
         buffer.destroy();
       });
       _this.device.destroy();
+      _this.renderCache.destroy();
 
       // make sure release webgl context
       // this.gl?._gl?.getExtension('WEBGL_lose_context')?.loseContext();
@@ -130,10 +222,10 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
   _createClass(DeviceRendererService, [{
     key: "init",
     value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg) {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(canvas, cfg) {
         var enableWebGPU, shaderCompilerPath, deviceContribution, swapChain, gl;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               enableWebGPU = cfg.enableWebGPU, shaderCompilerPath = cfg.shaderCompilerPath; // this.$container = $container;
               this.canvas = canvas;
@@ -154,16 +246,18 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
                   console.warn('context restored', e);
                 }
               });
-              _context.next = 5;
+              _context3.next = 5;
               return deviceContribution.createSwapChain(canvas);
             case 5:
-              swapChain = _context.sent;
+              swapChain = _context3.sent;
               swapChain.configureSwapChain(canvas.width, canvas.height);
               this.device = swapChain.getDevice();
               this.swapChain = swapChain;
+              this.renderCache = new RenderCache(this.device);
 
               // Create default RT
               this.currentFramebuffer = null;
+              this.viewportOrigin = this.device.queryVendorInfo().viewportOrigin;
 
               // @ts-ignore
               gl = this.device['gl'];
@@ -171,29 +265,40 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
                 // @ts-ignore
                 OES_texture_float: !isWebGL2(gl) && this.device['OES_texture_float']
               };
-              this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
-                format: Format.U8_RGBA_RT,
-                width: canvas.width,
-                height: canvas.height,
-                usage: TextureUsage.RENDER_TARGET
-              }));
-              this.mainDepthRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
-                format: Format.D24_S8,
-                width: canvas.width,
-                height: canvas.height,
-                usage: TextureUsage.RENDER_TARGET
-              }));
-            case 14:
+              this.createMainColorDepthRT(canvas.width, canvas.height);
+            case 15:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function init(_x, _x2) {
+      function init(_x4, _x5) {
         return _init.apply(this, arguments);
       }
       return init;
     }()
+  }, {
+    key: "createMainColorDepthRT",
+    value: function createMainColorDepthRT(width, height) {
+      if (this.mainColorRT) {
+        this.mainColorRT.destroy();
+      }
+      if (this.mainDepthRT) {
+        this.mainDepthRT.destroy();
+      }
+      this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
+        format: Format.U8_RGBA_RT,
+        width: width,
+        height: height,
+        usage: TextureUsage.RENDER_TARGET
+      }));
+      this.mainDepthRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
+        format: Format.D24_S8,
+        width: width,
+        height: height,
+        usage: TextureUsage.RENDER_TARGET
+      }));
+    }
   }, {
     key: "beginFrame",
     value: function beginFrame() {
@@ -201,19 +306,18 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
         swapChain = this.swapChain,
         mainColorRT = this.mainColorRT,
         mainDepthRT = this.mainDepthRT;
-      var onscreenTexture = swapChain.getOnscreenTexture();
       var colorAttachment = currentFramebuffer ? currentFramebuffer['colorRenderTarget'] : mainColorRT;
-      var colorResolveTo = currentFramebuffer ? null : onscreenTexture;
+      var colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
       var depthStencilAttachment = currentFramebuffer ? currentFramebuffer['depthRenderTarget'] : mainDepthRT;
-      var _ref2 =
+      var _ref4 =
         // @ts-ignore
         (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer.clearOptions) || {},
-        _ref2$color = _ref2.color,
-        color = _ref2$color === void 0 ? [0, 0, 0, 0] : _ref2$color,
-        _ref2$depth = _ref2.depth,
-        depth = _ref2$depth === void 0 ? 1 : _ref2$depth,
-        _ref2$stencil = _ref2.stencil,
-        stencil = _ref2$stencil === void 0 ? 0 : _ref2$stencil;
+        _ref4$color = _ref4.color,
+        color = _ref4$color === void 0 ? [0, 0, 0, 0] : _ref4$color,
+        _ref4$depth = _ref4.depth,
+        depth = _ref4$depth === void 0 ? 1 : _ref4$depth,
+        _ref4$stencil = _ref4.stencil,
+        stencil = _ref4$stencil === void 0 ? 0 : _ref4$stencil;
       var colorClearColor = colorAttachment ? colorNewFromRGBA(color[0] * 255, color[1] * 255, color[2] * 255, color[3]) : TransparentBlack;
       var depthClearValue = depthStencilAttachment ? depth : undefined;
       var stencilClearValue = depthStencilAttachment ? stencil : undefined;
@@ -221,6 +325,8 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
         colorAttachment: [colorAttachment],
         colorResolveTo: [colorResolveTo],
         colorClearColor: [colorClearColor],
+        // colorStore: [!!currentFramebuffer],
+        colorStore: [true],
         depthStencilAttachment: depthStencilAttachment,
         depthClearValue: depthClearValue,
         stencilClearValue: stencilClearValue

package/es/device/utils/HashMap.d.ts

@@ -0,0 +1,24 @@
+export declare function hashCodeNumberUpdate(hash: number, v?: number): number;
+export declare function hashCodeNumberFinish(hash: number): number;
+export declare function nullHashFunc<T>(k: T): number;
+export type EqualFunc<K> = (a: K, b: K) => boolean;
+export type HashFunc<K> = (a: K) => number;
+declare class HashBucket<K, V> {
+    keys: K[];
+    values: V[];
+}
+export declare class HashMap<K, V> {
+    private keyEqualFunc;
+    private keyHashFunc;
+    buckets: Map<number, HashBucket<K, V>>;
+    constructor(keyEqualFunc: EqualFunc<K>, keyHashFunc: HashFunc<K>);
+    private findBucketIndex;
+    private findBucket;
+    get(k: K): V | null;
+    add(k: K, v: V): void;
+    delete(k: K): void;
+    clear(): void;
+    size(): number;
+    values(): IterableIterator<V>;
+}
+export {};

package/es/device/utils/HashMap.js

@@ -0,0 +1,153 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+// Jenkins One-at-a-Time hash from http://www.burtleburtle.net/bob/hash/doobs.html
+export function hashCodeNumberUpdate(hash) {
+  var v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  hash += v;
+  hash += hash << 10;
+  hash += hash >>> 6;
+  return hash >>> 0;
+}
+export function hashCodeNumberFinish(hash) {
+  hash += hash << 3;
+  hash ^= hash >>> 11;
+  hash += hash << 15;
+  return hash >>> 0;
+}
+
+// Pass this as a hash function to use a one-bucket HashMap (equivalent to linear search in an array),
+// which can be efficient for small numbers of items.
+export function nullHashFunc(k) {
+  return 0;
+}
+var HashBucket = /*#__PURE__*/_createClass(function HashBucket() {
+  _classCallCheck(this, HashBucket);
+  _defineProperty(this, "keys", []);
+  _defineProperty(this, "values", []);
+});
+export var HashMap = /*#__PURE__*/function () {
+  function HashMap(keyEqualFunc, keyHashFunc) {
+    _classCallCheck(this, HashMap);
+    _defineProperty(this, "buckets", new Map());
+    this.keyEqualFunc = keyEqualFunc;
+    this.keyHashFunc = keyHashFunc;
+  }
+  _createClass(HashMap, [{
+    key: "findBucketIndex",
+    value: function findBucketIndex(bucket, k) {
+      for (var i = 0; i < bucket.keys.length; i++) if (this.keyEqualFunc(k, bucket.keys[i])) return i;
+      return -1;
+    }
+  }, {
+    key: "findBucket",
+    value: function findBucket(k) {
+      var bw = this.keyHashFunc(k);
+      return this.buckets.get(bw);
+    }
+  }, {
+    key: "get",
+    value: function get(k) {
+      var bucket = this.findBucket(k);
+      if (bucket === undefined) return null;
+      var bi = this.findBucketIndex(bucket, k);
+      if (bi < 0) return null;
+      return bucket.values[bi];
+    }
+  }, {
+    key: "add",
+    value: function add(k, v) {
+      var bw = this.keyHashFunc(k);
+      if (this.buckets.get(bw) === undefined) this.buckets.set(bw, new HashBucket());
+      var bucket = this.buckets.get(bw);
+      bucket.keys.push(k);
+      bucket.values.push(v);
+    }
+  }, {
+    key: "delete",
+    value: function _delete(k) {
+      var bucket = this.findBucket(k);
+      if (bucket === undefined) return;
+      var bi = this.findBucketIndex(bucket, k);
+      if (bi === -1) return;
+      bucket.keys.splice(bi, 1);
+      bucket.values.splice(bi, 1);
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.buckets.clear();
+    }
+  }, {
+    key: "size",
+    value: function size() {
+      var acc = 0;
+      var _iterator = _createForOfIteratorHelper(this.buckets.values()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var bucket = _step.value;
+          acc += bucket.values.length;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return acc;
+    }
+  }, {
+    key: "values",
+    value: /*#__PURE__*/_regeneratorRuntime.mark(function values() {
+      var _iterator2, _step2, bucket, j;
+      return _regeneratorRuntime.wrap(function values$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _iterator2 = _createForOfIteratorHelper(this.buckets.values());
+            _context.prev = 1;
+            _iterator2.s();
+          case 3:
+            if ((_step2 = _iterator2.n()).done) {
+              _context.next = 14;
+              break;
+            }
+            bucket = _step2.value;
+            j = bucket.values.length - 1;
+          case 6:
+            if (!(j >= 0)) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 9;
+            return bucket.values[j];
+          case 9:
+            j--;
+            _context.next = 6;
+            break;
+          case 12:
+            _context.next = 3;
+            break;
+          case 14:
+            _context.next = 19;
+            break;
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](1);
+            _iterator2.e(_context.t0);
+          case 19:
+            _context.prev = 19;
+            _iterator2.f();
+            return _context.finish(19);
+          case 22:
+          case "end":
+            return _context.stop();
+        }
+      }, values, this, [[1, 16, 19, 22]]);
+    })
+  }]);
+  return HashMap;
+}();

package/es/regl/index.d.ts

@@ -29,6 +29,7 @@ export default class ReglRendererService implements IRendererService {
     createTexture2D: (options: ITexture2DInitializationOptions) => ITexture2D;
     createFramebuffer: (options: IFramebufferInitializationOptions) => ReglFramebuffer;
     useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    useFramebufferAsync: (framebuffer: IFramebuffer | null, drawCommands: () => Promise<void>) => Promise<void>;
     clear: (options: IClearOptions) => void;
     viewport: ({ x, y, width, height, }: {
         x: number;
@@ -37,6 +38,7 @@ export default class ReglRendererService implements IRendererService {
         height: number;
     }) => void;
     readPixels: (options: IReadPixelsOptions) => Uint8Array;
+    readPixelsAsync: (options: IReadPixelsOptions) => Promise<Uint8Array>;
     getViewportSize: () => {
         width: number;
         height: number;

package/es/regl/index.js

@@ -53,6 +53,24 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
         framebuffer: framebuffer ? framebuffer.get() : null
       })(drawCommands);
     });
+    _defineProperty(this, "useFramebufferAsync", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(framebuffer, drawCommands) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this.gl({
+                framebuffer: framebuffer ? framebuffer.get() : null
+              })(drawCommands);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "clear", function (options) {
       var _this$gl;
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
@@ -69,11 +87,11 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
       reglClearOptions.framebuffer = framebuffer === null ? framebuffer : framebuffer.get();
       (_this$gl = _this.gl) === null || _this$gl === void 0 || _this$gl.clear(reglClearOptions);
     });
-    _defineProperty(this, "viewport", function (_ref) {
-      var x = _ref.x,
-        y = _ref.y,
-        width = _ref.width,
-        height = _ref.height;
+    _defineProperty(this, "viewport", function (_ref2) {
+      var x = _ref2.x,
+        y = _ref2.y,
+        width = _ref2.width,
+        height = _ref2.height;
       // use WebGL context directly
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
       _this.gl._gl.viewport(x, y, width, height);
@@ -98,6 +116,22 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
       }
       return _this.gl.read(readPixelsOptions);
     });
+    _defineProperty(this, "readPixelsAsync", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", _this.readPixels(options));
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "getViewportSize", function () {
       return {
         width: _this.gl._gl.drawingBufferWidth,
@@ -134,22 +168,22 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
   _createClass(ReglRendererService, [{
     key: "init",
     value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg, gl) {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(canvas, cfg, gl) {
         var _this2 = this;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               // this.$container = $container;
               this.canvas = canvas;
               if (!gl) {
-                _context.next = 5;
+                _context3.next = 5;
                 break;
               }
               this.gl = gl;
-              _context.next = 8;
+              _context3.next = 8;
               break;
             case 5:
-              _context.next = 7;
+              _context3.next = 7;
               return new Promise(function (resolve, reject) {
                 regl({
                   canvas: _this2.canvas,
@@ -180,18 +214,18 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
                 });
               });
             case 7:
-              this.gl = _context.sent;
+              this.gl = _context3.sent;
             case 8:
               this.extensionObject = {
                 OES_texture_float: this.testExtension('OES_texture_float')
               };
             case 9:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function init(_x, _x2, _x3) {
+      function init(_x4, _x5, _x6) {
         return _init.apply(this, arguments);
       }
       return init;