@antv/l7-renderer 2.18.2 → 2.18.3

package/es/regl/ReglRenderbuffer.js

@@ -0,0 +1,41 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { formatMap } from "./constants";
+
+/**
+ * adaptor for regl.Renderbuffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#renderbuffers
+ */
+var ReglRenderbuffer = /*#__PURE__*/function () {
+  function ReglRenderbuffer(reGl, options) {
+    _classCallCheck(this, ReglRenderbuffer);
+    var width = options.width,
+      height = options.height,
+      format = options.format;
+    this.renderbuffer = reGl.renderbuffer({
+      width: width,
+      height: height,
+      format: formatMap[format]
+    });
+  }
+  _createClass(ReglRenderbuffer, [{
+    key: "get",
+    value: function get() {
+      return this.renderbuffer;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.renderbuffer.destroy();
+    }
+  }, {
+    key: "resize",
+    value: function resize(_ref) {
+      var width = _ref.width,
+        height = _ref.height;
+      this.renderbuffer.resize(width, height);
+    }
+  }]);
+  return ReglRenderbuffer;
+}();
+export { ReglRenderbuffer as default };

package/es/regl/ReglTexture2D.d.ts

@@ -0,0 +1,22 @@
+import { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+import regl from 'regl';
+/**
+ * adaptor for regl.Buffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers
+ */
+export default class ReglTexture2D implements ITexture2D {
+    private texture;
+    private width;
+    private height;
+    private isDestroy;
+    constructor(reGl: regl.Regl, options: ITexture2DInitializationOptions);
+    get(): regl.Texture2D;
+    update(props?: regl.Texture2DOptions): void;
+    bind(): void;
+    resize({ width, height }: {
+        width: number;
+        height: number;
+    }): void;
+    getSize(): [number, number];
+    destroy(): void;
+}

package/es/regl/ReglTexture2D.js

@@ -0,0 +1,125 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { gl } from '@antv/l7-core';
+import { colorSpaceMap, dataTypeMap, filterMap, formatMap, mipmapMap, wrapModeMap } from "./constants";
+
+/**
+ * adaptor for regl.Buffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers
+ */
+var ReglTexture2D = /*#__PURE__*/function () {
+  function ReglTexture2D(reGl, options) {
+    _classCallCheck(this, ReglTexture2D);
+    _defineProperty(this, "isDestroy", false);
+    var data = options.data,
+      _options$type = options.type,
+      type = _options$type === void 0 ? gl.UNSIGNED_BYTE : _options$type,
+      width = options.width,
+      height = options.height,
+      _options$flipY = options.flipY,
+      flipY = _options$flipY === void 0 ? false : _options$flipY,
+      _options$format = options.format,
+      format = _options$format === void 0 ? gl.RGBA : _options$format,
+      _options$mipmap = options.mipmap,
+      mipmap = _options$mipmap === void 0 ? false : _options$mipmap,
+      _options$wrapS = options.wrapS,
+      wrapS = _options$wrapS === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapS,
+      _options$wrapT = options.wrapT,
+      wrapT = _options$wrapT === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapT,
+      _options$aniso = options.aniso,
+      aniso = _options$aniso === void 0 ? 0 : _options$aniso,
+      _options$alignment = options.alignment,
+      alignment = _options$alignment === void 0 ? 1 : _options$alignment,
+      _options$premultiplyA = options.premultiplyAlpha,
+      premultiplyAlpha = _options$premultiplyA === void 0 ? false : _options$premultiplyA,
+      _options$mag = options.mag,
+      mag = _options$mag === void 0 ? gl.NEAREST : _options$mag,
+      _options$min = options.min,
+      min = _options$min === void 0 ? gl.NEAREST : _options$min,
+      _options$colorSpace = options.colorSpace,
+      colorSpace = _options$colorSpace === void 0 ? gl.BROWSER_DEFAULT_WEBGL : _options$colorSpace,
+      _options$x = options.x,
+      x = _options$x === void 0 ? 0 : _options$x,
+      _options$y = options.y,
+      y = _options$y === void 0 ? 0 : _options$y,
+      _options$copy = options.copy,
+      copy = _options$copy === void 0 ? false : _options$copy;
+    this.width = width;
+    this.height = height;
+    var textureOptions = {
+      width: width,
+      height: height,
+      // @ts-ignore
+      type: dataTypeMap[type],
+      format: formatMap[format],
+      wrapS: wrapModeMap[wrapS],
+      wrapT: wrapModeMap[wrapT],
+      // @ts-ignore
+      mag: filterMap[mag],
+      min: filterMap[min],
+      alignment: alignment,
+      flipY: flipY,
+      colorSpace: colorSpaceMap[colorSpace],
+      premultiplyAlpha: premultiplyAlpha,
+      aniso: aniso,
+      // copy pixels from current bind framebuffer
+      x: x,
+      y: y,
+      copy: copy
+    };
+    if (data) {
+      // @ts-ignore
+      textureOptions.data = data;
+    }
+    if (typeof mipmap === 'number') {
+      textureOptions.mipmap = mipmapMap[mipmap];
+    } else if (typeof mipmap === 'boolean') {
+      textureOptions.mipmap = mipmap;
+    }
+    this.texture = reGl.texture(textureOptions);
+  }
+  _createClass(ReglTexture2D, [{
+    key: "get",
+    value: function get() {
+      return this.texture;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.texture(props);
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      // @ts-ignore
+      this.texture._texture.bind();
+    }
+  }, {
+    key: "resize",
+    value: function resize(_ref) {
+      var width = _ref.width,
+        height = _ref.height;
+      this.texture.resize(width, height);
+      this.width = width;
+      this.height = height;
+    }
+  }, {
+    key: "getSize",
+    value: function getSize() {
+      return [this.width, this.height];
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (!this.isDestroy) {
+        var _this$texture;
+        (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
+      }
+      this.isDestroy = true;
+    }
+  }]);
+  return ReglTexture2D;
+}();
+export { ReglTexture2D as default };

package/es/regl/constants.d.ts

@@ -0,0 +1,43 @@
+import regl from 'regl';
+export declare const primitiveMap: {
+    [key: string]: 'points' | 'lines' | 'line loop' | 'line strip' | 'triangles' | 'triangle strip' | 'triangle fan';
+};
+export declare const usageMap: {
+    [key: string]: 'static' | 'dynamic' | 'stream';
+};
+export declare const dataTypeMap: {
+    [key: string]: 'int8' | 'int16' | 'int32' | 'uint8' | 'uint16' | 'uint32' | 'float';
+};
+export declare const formatMap: {
+    [key: string]: 'alpha' | 'luminance' | 'luminance alpha' | 'rgb' | 'rgba' | 'rgba4' | 'rgb5 a1' | 'rgb565' | 'depth' | 'depth stencil';
+};
+export declare const mipmapMap: {
+    [key: string]: 'dont care' | 'nice' | 'fast';
+};
+export declare const filterMap: {
+    [key: string]: 'nearest' | 'linear' | 'mipmap' | 'nearest mipmap linear' | 'linear mipmap nearest' | 'nearest mipmap nearest';
+};
+export declare const wrapModeMap: {
+    [key: string]: 'repeat' | 'clamp' | 'mirror';
+};
+export declare const colorSpaceMap: {
+    [key: string]: 'none' | 'browser';
+};
+export declare const depthFuncMap: {
+    [key: string]: 'never' | 'always' | 'less' | 'lequal' | 'greater' | 'gequal' | 'equal' | 'notequal';
+};
+export declare const blendEquationMap: {
+    [key: string]: regl.BlendingEquation;
+};
+export declare const blendFuncMap: {
+    [key: string]: regl.BlendingFunction;
+};
+export declare const stencilFuncMap: {
+    [key: string]: regl.ComparisonOperatorType;
+};
+export declare const stencilOpMap: {
+    [key: string]: regl.StencilOperationType;
+};
+export declare const cullFaceMap: {
+    [key: string]: regl.FaceOrientationType;
+};

package/es/regl/constants.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _primitiveMap, _usageMap, _dataTypeMap, _formatMap, _mipmapMap, _filterMap, _wrapModeMap, _colorSpaceMap, _depthFuncMap, _blendEquationMap, _blendFuncMap, _stencilFuncMap, _stencilOpMap, _cullFaceMap;
+/**
+ * @desc 由于 regl 使用大量字符串而非 WebGL 常量，因此需要映射
+ */
+import { gl } from '@antv/l7-core';
+// @see https://github.com/regl-project/regl/blob/gh-pages/lib/constants/primitives.json
+export var primitiveMap = (_primitiveMap = {}, _defineProperty(_primitiveMap, gl.POINTS, 'points'), _defineProperty(_primitiveMap, gl.LINES, 'lines'), _defineProperty(_primitiveMap, gl.LINE_LOOP, 'line loop'), _defineProperty(_primitiveMap, gl.LINE_STRIP, 'line strip'), _defineProperty(_primitiveMap, gl.TRIANGLES, 'triangles'), _defineProperty(_primitiveMap, gl.TRIANGLE_FAN, 'triangle fan'), _defineProperty(_primitiveMap, gl.TRIANGLE_STRIP, 'triangle strip'), _primitiveMap);
+export var usageMap = (_usageMap = {}, _defineProperty(_usageMap, gl.STATIC_DRAW, 'static'), _defineProperty(_usageMap, gl.DYNAMIC_DRAW, 'dynamic'), _defineProperty(_usageMap, gl.STREAM_DRAW, 'stream'), _usageMap);
+export var dataTypeMap = (_dataTypeMap = {}, _defineProperty(_dataTypeMap, gl.BYTE, 'int8'), _defineProperty(_dataTypeMap, gl.UNSIGNED_INT, 'int16'), _defineProperty(_dataTypeMap, gl.INT, 'int32'), _defineProperty(_dataTypeMap, gl.UNSIGNED_BYTE, 'uint8'), _defineProperty(_dataTypeMap, gl.UNSIGNED_SHORT, 'uint16'), _defineProperty(_dataTypeMap, gl.UNSIGNED_INT, 'uint32'), _defineProperty(_dataTypeMap, gl.FLOAT, 'float'), _dataTypeMap);
+export var formatMap = (_formatMap = {}, _defineProperty(_formatMap, gl.ALPHA, 'alpha'), _defineProperty(_formatMap, gl.LUMINANCE, 'luminance'), _defineProperty(_formatMap, gl.LUMINANCE_ALPHA, 'luminance alpha'), _defineProperty(_formatMap, gl.RGB, 'rgb'), _defineProperty(_formatMap, gl.RGBA, 'rgba'), _defineProperty(_formatMap, gl.RGBA4, 'rgba4'), _defineProperty(_formatMap, gl.RGB5_A1, 'rgb5 a1'), _defineProperty(_formatMap, gl.RGB565, 'rgb565'), _defineProperty(_formatMap, gl.DEPTH_COMPONENT, 'depth'), _defineProperty(_formatMap, gl.DEPTH_STENCIL, 'depth stencil'), _formatMap);
+export var mipmapMap = (_mipmapMap = {}, _defineProperty(_mipmapMap, gl.DONT_CARE, 'dont care'), _defineProperty(_mipmapMap, gl.NICEST, 'nice'), _defineProperty(_mipmapMap, gl.FASTEST, 'fast'), _mipmapMap);
+export var filterMap = (_filterMap = {}, _defineProperty(_filterMap, gl.NEAREST, 'nearest'), _defineProperty(_filterMap, gl.LINEAR, 'linear'), _defineProperty(_filterMap, gl.LINEAR_MIPMAP_LINEAR, 'mipmap'), _defineProperty(_filterMap, gl.NEAREST_MIPMAP_LINEAR, 'nearest mipmap linear'), _defineProperty(_filterMap, gl.LINEAR_MIPMAP_NEAREST, 'linear mipmap nearest'), _defineProperty(_filterMap, gl.NEAREST_MIPMAP_NEAREST, 'nearest mipmap nearest'), _filterMap);
+export var wrapModeMap = (_wrapModeMap = {}, _defineProperty(_wrapModeMap, gl.REPEAT, 'repeat'), _defineProperty(_wrapModeMap, gl.CLAMP_TO_EDGE, 'clamp'), _defineProperty(_wrapModeMap, gl.MIRRORED_REPEAT, 'mirror'), _wrapModeMap);
+export var colorSpaceMap = (_colorSpaceMap = {}, _defineProperty(_colorSpaceMap, gl.NONE, 'none'), _defineProperty(_colorSpaceMap, gl.BROWSER_DEFAULT_WEBGL, 'browser'), _colorSpaceMap);
+export var depthFuncMap = (_depthFuncMap = {}, _defineProperty(_depthFuncMap, gl.NEVER, 'never'), _defineProperty(_depthFuncMap, gl.ALWAYS, 'always'), _defineProperty(_depthFuncMap, gl.LESS, 'less'), _defineProperty(_depthFuncMap, gl.LEQUAL, 'lequal'), _defineProperty(_depthFuncMap, gl.GREATER, 'greater'), _defineProperty(_depthFuncMap, gl.GEQUAL, 'gequal'), _defineProperty(_depthFuncMap, gl.EQUAL, 'equal'), _defineProperty(_depthFuncMap, gl.NOTEQUAL, 'notequal'), _depthFuncMap);
+export var blendEquationMap = (_blendEquationMap = {}, _defineProperty(_blendEquationMap, gl.FUNC_ADD, 'add'), _defineProperty(_blendEquationMap, gl.MIN_EXT, 'min'), _defineProperty(_blendEquationMap, gl.MAX_EXT, 'max'), _defineProperty(_blendEquationMap, gl.FUNC_SUBTRACT, 'subtract'), _defineProperty(_blendEquationMap, gl.FUNC_REVERSE_SUBTRACT, 'reverse subtract'), _blendEquationMap);
+export var blendFuncMap = (_blendFuncMap = {}, _defineProperty(_blendFuncMap, gl.ZERO, 'zero'), _defineProperty(_blendFuncMap, gl.ONE, 'one'), _defineProperty(_blendFuncMap, gl.SRC_COLOR, 'src color'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_SRC_COLOR, 'one minus src color'), _defineProperty(_blendFuncMap, gl.SRC_ALPHA, 'src alpha'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_SRC_ALPHA, 'one minus src alpha'), _defineProperty(_blendFuncMap, gl.DST_COLOR, 'dst color'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_DST_COLOR, 'one minus dst color'), _defineProperty(_blendFuncMap, gl.DST_ALPHA, 'dst alpha'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_DST_ALPHA, 'one minus dst alpha'), _defineProperty(_blendFuncMap, gl.CONSTANT_COLOR, 'constant color'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_CONSTANT_COLOR, 'one minus constant color'), _defineProperty(_blendFuncMap, gl.CONSTANT_ALPHA, 'constant alpha'), _defineProperty(_blendFuncMap, gl.ONE_MINUS_CONSTANT_ALPHA, 'one minus constant alpha'), _defineProperty(_blendFuncMap, gl.SRC_ALPHA_SATURATE, 'src alpha saturate'), _blendFuncMap);
+export var stencilFuncMap = (_stencilFuncMap = {}, _defineProperty(_stencilFuncMap, gl.NEVER, 'never'), _defineProperty(_stencilFuncMap, gl.ALWAYS, 'always'), _defineProperty(_stencilFuncMap, gl.LESS, 'less'), _defineProperty(_stencilFuncMap, gl.LEQUAL, 'lequal'), _defineProperty(_stencilFuncMap, gl.GREATER, 'greater'), _defineProperty(_stencilFuncMap, gl.GEQUAL, 'gequal'), _defineProperty(_stencilFuncMap, gl.EQUAL, 'equal'), _defineProperty(_stencilFuncMap, gl.NOTEQUAL, 'notequal'), _stencilFuncMap);
+export var stencilOpMap = (_stencilOpMap = {}, _defineProperty(_stencilOpMap, gl.ZERO, 'zero'), _defineProperty(_stencilOpMap, gl.KEEP, 'keep'), _defineProperty(_stencilOpMap, gl.REPLACE, 'replace'), _defineProperty(_stencilOpMap, gl.INVERT, 'invert'), _defineProperty(_stencilOpMap, gl.INCR, 'increment'), _defineProperty(_stencilOpMap, gl.DECR, 'decrement'), _defineProperty(_stencilOpMap, gl.INCR_WRAP, 'increment wrap'), _defineProperty(_stencilOpMap, gl.DECR_WRAP, 'decrement wrap'), _stencilOpMap);
+export var cullFaceMap = (_cullFaceMap = {}, _defineProperty(_cullFaceMap, gl.FRONT, 'front'), _defineProperty(_cullFaceMap, gl.BACK, 'back'), _cullFaceMap);

package/es/regl/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * render w/ regl
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
+ */
+import { IAttribute, IAttributeInitializationOptions, IBuffer, IBufferInitializationOptions, IClearOptions, IElements, IElementsInitializationOptions, IExtensions, IFramebuffer, IFramebufferInitializationOptions, IModel, IModelInitializationOptions, IReadPixelsOptions, IRenderConfig, IRendererService, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+import 'reflect-metadata';
+import regl from 'regl';
+import ReglFramebuffer from './ReglFramebuffer';
+/**
+ * regl renderer
+ */
+export default class ReglRendererService implements IRendererService {
+    extensionObject: IExtensions;
+    private gl;
+    private $container;
+    private canvas;
+    private width;
+    private height;
+    private isDirty;
+    init(canvas: HTMLCanvasElement, cfg: IRenderConfig, gl?: regl.Regl): Promise<void>;
+    getPointSizeRange(): any;
+    testExtension(name: string): boolean;
+    createModel: (options: IModelInitializationOptions) => IModel;
+    createAttribute: (options: IAttributeInitializationOptions) => IAttribute;
+    createBuffer: (options: IBufferInitializationOptions) => IBuffer;
+    createElements: (options: IElementsInitializationOptions) => IElements;
+    createTexture2D: (options: ITexture2DInitializationOptions) => ITexture2D;
+    createFramebuffer: (options: IFramebufferInitializationOptions) => ReglFramebuffer;
+    useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    clear: (options: IClearOptions) => void;
+    viewport: ({ x, y, width, height, }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    readPixels: (options: IReadPixelsOptions) => Uint8Array;
+    getViewportSize: () => {
+        width: number;
+        height: number;
+    };
+    getContainer: () => HTMLElement | null;
+    getCanvas: () => HTMLCanvasElement;
+    getGLContext: () => WebGLRenderingContext;
+    setState(): void;
+    setBaseState(): void;
+    setCustomLayerDefaults(): void;
+    setDirty(flag: boolean): void;
+    getDirty(): boolean;
+    destroy: () => void;
+}

package/es/regl/index.js

@@ -0,0 +1,271 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+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";
+/**
+ * render w/ regl
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
+ */
+
+import { injectable } from 'inversify';
+import 'reflect-metadata';
+import regl from 'regl';
+import ReglAttribute from "./ReglAttribute";
+import ReglBuffer from "./ReglBuffer";
+import ReglElements from "./ReglElements";
+import ReglFramebuffer from "./ReglFramebuffer";
+import ReglModel from "./ReglModel";
+import ReglTexture2D from "./ReglTexture2D";
+
+/**
+ * regl renderer
+ */
+var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/function () {
+  function ReglRendererService() {
+    var _this = this;
+    _classCallCheck(this, ReglRendererService);
+    _defineProperty(this, "createModel", function (options) {
+      return new ReglModel(_this.gl, options);
+    });
+    _defineProperty(this, "createAttribute", function (options) {
+      return new ReglAttribute(_this.gl, options);
+    });
+    _defineProperty(this, "createBuffer", function (options) {
+      return new ReglBuffer(_this.gl, options);
+    });
+    _defineProperty(this, "createElements", function (options) {
+      return new ReglElements(_this.gl, options);
+    });
+    _defineProperty(this, "createTexture2D", function (options) {
+      return new ReglTexture2D(_this.gl, options);
+    });
+    _defineProperty(this, "createFramebuffer", function (options) {
+      return new ReglFramebuffer(_this.gl, options);
+    });
+    _defineProperty(this, "useFramebuffer", function (framebuffer, drawCommands) {
+      _this.gl({
+        framebuffer: framebuffer ? framebuffer.get() : null
+      })(drawCommands);
+    });
+    _defineProperty(this, "clear", function (options) {
+      var _this$gl;
+      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
+      var color = options.color,
+        depth = options.depth,
+        stencil = options.stencil,
+        _options$framebuffer = options.framebuffer,
+        framebuffer = _options$framebuffer === void 0 ? null : _options$framebuffer;
+      var reglClearOptions = {
+        color: color,
+        depth: depth,
+        stencil: stencil
+      };
+      reglClearOptions.framebuffer = framebuffer === null ? framebuffer : framebuffer.get();
+      (_this$gl = _this.gl) === null || _this$gl === void 0 ? void 0 : _this$gl.clear(reglClearOptions);
+    });
+    _defineProperty(this, "viewport", function (_ref) {
+      var x = _ref.x,
+        y = _ref.y,
+        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);
+      _this.width = width;
+      _this.height = height;
+      _this.gl._refresh();
+    });
+    _defineProperty(this, "readPixels", function (options) {
+      var framebuffer = options.framebuffer,
+        x = options.x,
+        y = options.y,
+        width = options.width,
+        height = options.height;
+      var readPixelsOptions = {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      };
+      if (framebuffer) {
+        readPixelsOptions.framebuffer = framebuffer.get();
+      }
+      return _this.gl.read(readPixelsOptions);
+    });
+    _defineProperty(this, "getViewportSize", function () {
+      return {
+        width: _this.gl._gl.drawingBufferWidth,
+        height: _this.gl._gl.drawingBufferHeight
+      };
+    });
+    _defineProperty(this, "getContainer", function () {
+      var _this$canvas;
+      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 () {
+      return _this.gl._gl;
+    });
+    _defineProperty(this, "destroy", function () {
+      var _this$gl2, _this$gl2$_gl, _this$gl2$_gl$getExte;
+      // this.canvas = null 清除对 webgl 实例的引用
+      // @ts-ignore
+      _this.canvas = null;
+
+      // make sure release webgl context
+      (_this$gl2 = _this.gl) === null || _this$gl2 === void 0 ? void 0 : (_this$gl2$_gl = _this$gl2._gl) === null || _this$gl2$_gl === void 0 ? void 0 : (_this$gl2$_gl$getExte = _this$gl2$_gl.getExtension('WEBGL_lose_context')) === null || _this$gl2$_gl$getExte === void 0 ? void 0 : _this$gl2$_gl$getExte.loseContext();
+
+      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clean-up
+      _this.gl.destroy();
+
+      // @ts-ignore
+      _this.gl = null;
+    });
+  }
+  _createClass(ReglRendererService, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg, gl) {
+        var _this2 = this;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // this.$container = $container;
+              this.canvas = canvas;
+              if (!gl) {
+                _context.next = 5;
+                break;
+              }
+              this.gl = gl;
+              _context.next = 8;
+              break;
+            case 5:
+              _context.next = 7;
+              return new Promise(function (resolve, reject) {
+                regl({
+                  canvas: _this2.canvas,
+                  attributes: {
+                    alpha: true,
+                    // use TAA instead of MSAA
+                    // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
+                    antialias: cfg.antialias,
+                    premultipliedAlpha: true,
+                    preserveDrawingBuffer: cfg.preserveDrawingBuffer,
+                    stencil: cfg.stencil
+                  },
+                  // TODO: use extensions
+                  extensions: ['OES_element_index_uint', 'OES_standard_derivatives',
+                  // wireframe
+                  'ANGLE_instanced_arrays' // VSM shadow map
+                  ],
+
+                  optionalExtensions: ['oes_texture_float_linear', 'OES_texture_float', 'EXT_texture_filter_anisotropic', 'EXT_blend_minmax', 'WEBGL_depth_texture', 'WEBGL_lose_context'],
+                  profile: true,
+                  onDone: function onDone(err, r) {
+                    if (err || !r) {
+                      reject(err);
+                    }
+                    // @ts-ignore
+                    resolve(r);
+                  }
+                });
+              });
+            case 7:
+              this.gl = _context.sent;
+            case 8:
+              this.extensionObject = {
+                OES_texture_float: this.testExtension('OES_texture_float')
+              };
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function init(_x, _x2, _x3) {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "getPointSizeRange",
+    value: function getPointSizeRange() {
+      return this.gl._gl.getParameter(this.gl._gl.ALIASED_POINT_SIZE_RANGE);
+    }
+  }, {
+    key: "testExtension",
+    value: function testExtension(name) {
+      // OES_texture_float
+      return !!this.getGLContext().getExtension(name);
+    }
+  }, {
+    key: "setState",
+    value:
+    // TODO: 临时方法
+    function setState() {
+      this.gl({
+        cull: {
+          enable: false,
+          face: 'back'
+        },
+        viewport: {
+          x: 0,
+          y: 0,
+          height: this.width,
+          width: this.height
+        },
+        blend: {
+          enable: true,
+          equation: 'add'
+        },
+        framebuffer: null
+      });
+      this.gl._refresh();
+    }
+  }, {
+    key: "setBaseState",
+    value: function setBaseState() {
+      this.gl({
+        cull: {
+          enable: false,
+          face: 'back'
+        },
+        viewport: {
+          x: 0,
+          y: 0,
+          height: this.width,
+          width: this.height
+        },
+        blend: {
+          enable: false,
+          equation: 'add'
+        },
+        framebuffer: null
+      });
+      this.gl._refresh();
+    }
+  }, {
+    key: "setCustomLayerDefaults",
+    value: function setCustomLayerDefaults() {
+      var gl = this.getGLContext();
+      gl.disable(gl.CULL_FACE);
+    }
+  }, {
+    key: "setDirty",
+    value: function setDirty(flag) {
+      this.isDirty = flag;
+    }
+  }, {
+    key: "getDirty",
+    value: function getDirty() {
+      return this.isDirty;
+    }
+  }]);
+  return ReglRendererService;
+}()) || _class);
+export { ReglRendererService as default };

package/lib/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ReglRendererService: () => import_regl.default
+});
+module.exports = __toCommonJS(src_exports);
+var import_regl = __toESM(require("./regl"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReglRendererService
+});

package/lib/regl/ReglAttribute.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/regl/ReglAttribute.ts
+var ReglAttribute_exports = {};
+__export(ReglAttribute_exports, {
+  default: () => ReglAttribute
+});
+module.exports = __toCommonJS(ReglAttribute_exports);
+var ReglAttribute = class {
+  constructor(gl, options) {
+    const { buffer, offset, stride, normalized, size, divisor } = options;
+    this.buffer = buffer;
+    this.attribute = {
+      buffer: buffer.get(),
+      offset: offset || 0,
+      stride: stride || 0,
+      normalized: normalized || false,
+      divisor: divisor || 0
+    };
+    if (size) {
+      this.attribute.size = size;
+    }
+  }
+  get() {
+    return this.attribute;
+  }
+  updateBuffer(options) {
+    this.buffer.subData(options);
+  }
+  destroy() {
+    this.buffer.destroy();
+  }
+};