@antv/l7-renderer 2.9.37-alpha.2 → 2.9.37-alpha.3

package/es/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ */
+import ReglRendererService from './regl';
+export { ReglRendererService };

package/es/index.js

@@ -0,0 +1,5 @@
+/**
+ *
+ */
+import ReglRendererService from "./regl";
+export { ReglRendererService };

package/es/regl/ReglAttribute.d.ts

@@ -0,0 +1,16 @@
+import { IAttribute, IAttributeInitializationOptions } from '@antv/l7-core';
+import regl from 'l7regl';
+/**
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#attributes
+ */
+export default class ReglAttribute implements IAttribute {
+    private attribute;
+    private buffer;
+    constructor(gl: regl.Regl, options: IAttributeInitializationOptions);
+    get(): regl.Attribute;
+    updateBuffer(options: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+        offset: number;
+    }): void;
+    destroy(): void;
+}

package/es/regl/ReglAttribute.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+
+/**
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#attributes
+ */
+var ReglAttribute = /*#__PURE__*/function () {
+  function ReglAttribute(gl, options) {
+    _classCallCheck(this, ReglAttribute);
+
+    var buffer = options.buffer,
+        offset = options.offset,
+        stride = options.stride,
+        normalized = options.normalized,
+        size = options.size,
+        divisor = options.divisor;
+    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;
+    }
+  }
+
+  _createClass(ReglAttribute, [{
+    key: "get",
+    value: function get() {
+      return this.attribute;
+    }
+  }, {
+    key: "updateBuffer",
+    value: function updateBuffer(options) {
+      this.buffer.subData(options);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.buffer.destroy();
+    }
+  }]);
+
+  return ReglAttribute;
+}();
+
+export { ReglAttribute as default };

package/es/regl/ReglBuffer.d.ts

@@ -0,0 +1,16 @@
+import { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
+import regl from 'l7regl';
+/**
+ * adaptor for regl.Buffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers
+ */
+export default class ReglBuffer implements IBuffer {
+    private buffer;
+    constructor(reGl: regl.Regl, options: IBufferInitializationOptions);
+    get(): regl.Buffer;
+    destroy(): void;
+    subData({ data, offset, }: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+        offset: number;
+    }): void;
+}

package/es/regl/ReglBuffer.js

@@ -0,0 +1,47 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { gl } from '@antv/l7-core';
+import { dataTypeMap, usageMap } from "./constants";
+/**
+ * adaptor for regl.Buffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers
+ */
+
+var ReglBuffer = /*#__PURE__*/function () {
+  function ReglBuffer(reGl, options) {
+    _classCallCheck(this, ReglBuffer);
+
+    var data = options.data,
+        usage = options.usage,
+        type = options.type;
+    this.buffer = reGl.buffer({
+      data: data,
+      usage: usageMap[usage || gl.STATIC_DRAW],
+      type: dataTypeMap[type || gl.UNSIGNED_BYTE] // length: 0,
+
+    });
+  }
+
+  _createClass(ReglBuffer, [{
+    key: "get",
+    value: function get() {
+      return this.buffer;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.buffer.destroy();
+    }
+  }, {
+    key: "subData",
+    value: function subData(_ref) {
+      var data = _ref.data,
+          offset = _ref.offset;
+      this.buffer.subdata(data, offset);
+    }
+  }]);
+
+  return ReglBuffer;
+}();
+
+export { ReglBuffer as default };

package/es/regl/ReglElements.d.ts

@@ -0,0 +1,14 @@
+import { IElements, IElementsInitializationOptions } from '@antv/l7-core';
+import regl from 'l7regl';
+/**
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#elements
+ */
+export default class ReglElements implements IElements {
+    private elements;
+    constructor(reGl: regl.Regl, options: IElementsInitializationOptions);
+    get(): regl.Elements;
+    subData({ data, }: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+    }): void;
+    destroy(): void;
+}

package/es/regl/ReglElements.js

@@ -0,0 +1,45 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { gl } from '@antv/l7-core';
+import { dataTypeMap, usageMap } from "./constants";
+/**
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#elements
+ */
+
+var ReglElements = /*#__PURE__*/function () {
+  function ReglElements(reGl, options) {
+    _classCallCheck(this, ReglElements);
+
+    var data = options.data,
+        usage = options.usage,
+        type = options.type,
+        count = options.count;
+    this.elements = reGl.elements({
+      data: data,
+      usage: usageMap[usage || gl.STATIC_DRAW],
+      type: dataTypeMap[type || gl.UNSIGNED_BYTE],
+      count: count
+    });
+  }
+
+  _createClass(ReglElements, [{
+    key: "get",
+    value: function get() {
+      return this.elements;
+    }
+  }, {
+    key: "subData",
+    value: function subData(_ref) {
+      var data = _ref.data;
+      this.elements.subdata(data);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {// this.elements.destroy();
+    }
+  }]);
+
+  return ReglElements;
+}();
+
+export { ReglElements as default };

package/es/regl/ReglFramebuffer.d.ts

@@ -0,0 +1,16 @@
+import { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
+import regl from 'l7regl';
+/**
+ * adaptor for regl.Framebuffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#framebuffers
+ */
+export default class ReglFramebuffer implements IFramebuffer {
+    private framebuffer;
+    constructor(reGl: regl.Regl, options: IFramebufferInitializationOptions);
+    get(): regl.Framebuffer;
+    destroy(): void;
+    resize({ width, height }: {
+        width: number;
+        height: number;
+    }): void;
+}

package/es/regl/ReglFramebuffer.js

@@ -0,0 +1,57 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+
+/**
+ * adaptor for regl.Framebuffer
+ * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#framebuffers
+ */
+var ReglFramebuffer = /*#__PURE__*/function () {
+  function ReglFramebuffer(reGl, options) {
+    _classCallCheck(this, ReglFramebuffer);
+
+    var width = options.width,
+        height = options.height,
+        color = options.color,
+        colors = options.colors;
+    var framebufferOptions = {
+      width: width,
+      height: height
+    };
+
+    if (Array.isArray(colors)) {
+      framebufferOptions.colors = colors.map(function (c) {
+        return c.get();
+      });
+    }
+
+    if (color && typeof color !== 'boolean') {
+      framebufferOptions.color = color.get();
+    } // TODO: depth & stencil
+
+
+    this.framebuffer = reGl.framebuffer(framebufferOptions);
+  }
+
+  _createClass(ReglFramebuffer, [{
+    key: "get",
+    value: function get() {
+      return this.framebuffer;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.framebuffer.destroy();
+    }
+  }, {
+    key: "resize",
+    value: function resize(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      this.framebuffer.resize(width, height);
+    }
+  }]);
+
+  return ReglFramebuffer;
+}();
+
+export { ReglFramebuffer as default };

package/es/regl/ReglModel.d.ts

@@ -0,0 +1,49 @@
+import { IAttribute, IElements, IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
+import regl from 'l7regl';
+/**
+ * adaptor for regl.DrawCommand
+ */
+export default class ReglModel implements IModel {
+    private reGl;
+    private destroyed;
+    private drawCommand;
+    private drawPickCommand;
+    private drawParams;
+    private options;
+    private uniforms;
+    constructor(reGl: regl.Regl, options: IModelInitializationOptions);
+    updateAttributesAndElements(attributes: {
+        [key: string]: IAttribute;
+    }, elements: IElements): void;
+    updateAttributes(attributes: {
+        [key: string]: IAttribute;
+    }): void;
+    addUniforms(uniforms: {
+        [key: string]: IUniform;
+    }): void;
+    draw(options: IModelDrawOptions, pick?: boolean): void;
+    destroy(): void;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#depth-buffer
+     */
+    private initDepthDrawParams;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#blending
+     */
+    private initBlendDrawParams;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil
+     */
+    private initStencilDrawParams;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
+     */
+    private initCullDrawParams;
+    /**
+     * 考虑结构体命名, eg:
+     * a: { b: 1 }  ->  'a.b'
+     * a: [ { b: 1 } ] -> 'a[0].b'
+     */
+    private extractUniforms;
+    private extractUniformsRecursively;
+}

package/es/regl/ReglModel.js

@@ -0,0 +1,362 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { gl } from '@antv/l7-core';
+import { cloneDeep, isPlainObject, isTypedArray } from 'lodash';
+import { blendEquationMap, blendFuncMap, cullFaceMap, depthFuncMap, primitiveMap, stencilFuncMap, stencilOpMap } from "./constants";
+
+/**
+ * adaptor for regl.DrawCommand
+ */
+var ReglModel = /*#__PURE__*/function () {
+  function ReglModel(reGl, options) {
+    _classCallCheck(this, ReglModel);
+
+    _defineProperty(this, "destroyed", false);
+
+    _defineProperty(this, "uniforms", {});
+
+    this.reGl = reGl;
+    var _options$pick = options.pick,
+        pick = _options$pick === void 0 ? true : _options$pick,
+        vs = options.vs,
+        fs = options.fs,
+        attributes = options.attributes,
+        uniforms = options.uniforms,
+        primitive = options.primitive,
+        count = options.count,
+        elements = options.elements,
+        depth = options.depth,
+        blend = options.blend,
+        stencil = options.stencil,
+        cull = options.cull,
+        instances = options.instances;
+    var reglUniforms = {};
+    this.options = options;
+
+    if (uniforms) {
+      this.uniforms = this.extractUniforms(uniforms);
+      Object.keys(uniforms).forEach(function (uniformName) {
+        // use regl prop API
+        // @ts-ignore
+        reglUniforms[uniformName] = reGl.prop(uniformName);
+      });
+    }
+
+    var reglAttributes = {};
+    Object.keys(attributes).forEach(function (name) {
+      reglAttributes[name] = attributes[name].get();
+    });
+    var drawParams = {
+      attributes: reglAttributes,
+      frag: fs,
+      uniforms: reglUniforms,
+      vert: vs,
+      blend: {},
+      primitive: primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive]
+    };
+
+    if (instances) {
+      drawParams.instances = instances;
+    } // Tip:
+    // elements 中可能包含 count，此时不应传入
+    // count 和 elements 相比、count 优先
+
+
+    if (count) {
+      drawParams.count = count;
+    } else if (elements) {
+      drawParams.elements = elements.get();
+    }
+
+    this.initDepthDrawParams({
+      depth: depth
+    }, drawParams);
+    this.initBlendDrawParams({
+      blend: blend
+    }, drawParams);
+    this.initStencilDrawParams({
+      stencil: stencil
+    }, drawParams);
+    this.initCullDrawParams({
+      cull: cull
+    }, drawParams);
+    this.drawCommand = reGl(drawParams);
+
+    if (pick) {
+      var pickDrawParams = cloneDeep(drawParams);
+      pickDrawParams.blend = _objectSpread(_objectSpread({}, pickDrawParams.blend), {}, {
+        enable: false
+      });
+      this.drawPickCommand = reGl(pickDrawParams);
+    }
+
+    this.drawParams = drawParams;
+  }
+
+  _createClass(ReglModel, [{
+    key: "updateAttributesAndElements",
+    value: function updateAttributesAndElements(attributes, elements) {
+      var reglAttributes = {};
+      Object.keys(attributes).forEach(function (name) {
+        reglAttributes[name] = attributes[name].get();
+      });
+      this.drawParams.attributes = reglAttributes;
+      this.drawParams.elements = elements.get();
+      this.drawCommand = this.reGl(this.drawParams);
+
+      if (this.options.pick) {
+        var pickDrawParams = cloneDeep(this.drawParams);
+        pickDrawParams.blend = _objectSpread(_objectSpread({}, pickDrawParams.blend), {}, {
+          enable: false
+        });
+        this.drawPickCommand = this.reGl(pickDrawParams);
+      }
+    }
+  }, {
+    key: "updateAttributes",
+    value: function updateAttributes(attributes) {
+      var reglAttributes = {};
+      Object.keys(attributes).forEach(function (name) {
+        reglAttributes[name] = attributes[name].get();
+      });
+      this.drawParams.attributes = reglAttributes;
+      this.drawCommand = this.reGl(this.drawParams);
+
+      if (this.options.pick) {
+        var pickDrawParams = cloneDeep(this.drawParams);
+        pickDrawParams.blend = _objectSpread(_objectSpread({}, pickDrawParams.blend), {}, {
+          enable: false
+        });
+        this.drawPickCommand = this.reGl(pickDrawParams);
+      }
+    }
+  }, {
+    key: "addUniforms",
+    value: function addUniforms(uniforms) {
+      this.uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(uniforms));
+    }
+  }, {
+    key: "draw",
+    value: function draw(options, pick) {
+      // console.log('options', this.drawParams)
+      if (this.drawParams.attributes && Object.keys(this.drawParams.attributes).length === 0) {
+        return;
+      }
+
+      var uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(options.uniforms || {}));
+
+      var reglDrawProps = {};
+      Object.keys(uniforms).forEach(function (uniformName) {
+        var type = _typeof(uniforms[uniformName]);
+
+        if (type === 'boolean' || type === 'number' || Array.isArray(uniforms[uniformName]) || // @ts-ignore
+        uniforms[uniformName].BYTES_PER_ELEMENT) {
+          reglDrawProps[uniformName] = uniforms[uniformName];
+        } else {
+          reglDrawProps[uniformName] = uniforms[uniformName].get();
+        }
+      }); // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
+
+      if (!pick) {
+        this.drawCommand(reglDrawProps);
+      } else {
+        this.drawPickCommand && this.drawPickCommand(reglDrawProps);
+      } // this.drawCommand(reglDrawProps);
+      // this.drawPickCommand(reglDrawProps);
+
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$drawParams, _this$drawParams$elem;
+
+      // @ts-ignore
+      (_this$drawParams = this.drawParams) === null || _this$drawParams === void 0 ? void 0 : (_this$drawParams$elem = _this$drawParams.elements) === null || _this$drawParams$elem === void 0 ? void 0 : _this$drawParams$elem.destroy();
+
+      if (this.options.attributes) {
+        Object.values(this.options.attributes).forEach(function (attr) {
+          // @ts-ignore
+          attr === null || attr === void 0 ? void 0 : attr.destroy();
+        });
+      }
+
+      this.destroyed = true;
+    }
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#depth-buffer
+     */
+
+  }, {
+    key: "initDepthDrawParams",
+    value: function initDepthDrawParams(_ref, drawParams) {
+      var depth = _ref.depth;
+
+      if (depth) {
+        drawParams.depth = {
+          enable: depth.enable === undefined ? true : !!depth.enable,
+          mask: depth.mask === undefined ? true : !!depth.mask,
+          func: depthFuncMap[depth.func || gl.LESS],
+          range: depth.range || [0, 1]
+        };
+      }
+    }
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#blending
+     */
+
+  }, {
+    key: "initBlendDrawParams",
+    value: function initBlendDrawParams(_ref2, drawParams) {
+      var blend = _ref2.blend;
+
+      if (blend) {
+        var enable = blend.enable,
+            func = blend.func,
+            equation = blend.equation,
+            _blend$color = blend.color,
+            color = _blend$color === void 0 ? [0, 0, 0, 0] : _blend$color; // @ts-ignore
+
+        drawParams.blend = {
+          enable: !!enable,
+          func: {
+            srcRGB: blendFuncMap[func && func.srcRGB || gl.SRC_ALPHA],
+            srcAlpha: blendFuncMap[func && func.srcAlpha || gl.SRC_ALPHA],
+            dstRGB: blendFuncMap[func && func.dstRGB || gl.ONE_MINUS_SRC_ALPHA],
+            dstAlpha: blendFuncMap[func && func.dstAlpha || gl.ONE_MINUS_SRC_ALPHA]
+          },
+          equation: {
+            rgb: blendEquationMap[equation && equation.rgb || gl.FUNC_ADD],
+            alpha: blendEquationMap[equation && equation.alpha || gl.FUNC_ADD]
+          },
+          color: color
+        };
+      }
+    }
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil
+     */
+
+  }, {
+    key: "initStencilDrawParams",
+    value: function initStencilDrawParams(_ref3, drawParams) {
+      var stencil = _ref3.stencil;
+
+      if (stencil) {
+        var enable = stencil.enable,
+            _stencil$mask = stencil.mask,
+            mask = _stencil$mask === void 0 ? -1 : _stencil$mask,
+            _stencil$func = stencil.func,
+            func = _stencil$func === void 0 ? {
+          cmp: gl.ALWAYS,
+          ref: 0,
+          mask: -1
+        } : _stencil$func,
+            _stencil$opFront = stencil.opFront,
+            opFront = _stencil$opFront === void 0 ? {
+          fail: gl.KEEP,
+          zfail: gl.KEEP,
+          zpass: gl.KEEP
+        } : _stencil$opFront,
+            _stencil$opBack = stencil.opBack,
+            opBack = _stencil$opBack === void 0 ? {
+          fail: gl.KEEP,
+          zfail: gl.KEEP,
+          zpass: gl.KEEP
+        } : _stencil$opBack;
+        drawParams.stencil = {
+          enable: !!enable,
+          mask: mask,
+          func: _objectSpread(_objectSpread({}, func), {}, {
+            cmp: stencilFuncMap[func.cmp]
+          }),
+          opFront: {
+            fail: stencilOpMap[opFront.fail],
+            zfail: stencilOpMap[opFront.zfail],
+            zpass: stencilOpMap[opFront.zpass]
+          },
+          opBack: {
+            fail: stencilOpMap[opBack.fail],
+            zfail: stencilOpMap[opBack.zfail],
+            zpass: stencilOpMap[opBack.zpass]
+          }
+        };
+      }
+    }
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
+     */
+
+  }, {
+    key: "initCullDrawParams",
+    value: function initCullDrawParams(_ref4, drawParams) {
+      var cull = _ref4.cull;
+
+      if (cull) {
+        var enable = cull.enable,
+            _cull$face = cull.face,
+            face = _cull$face === void 0 ? gl.BACK : _cull$face;
+        drawParams.cull = {
+          enable: !!enable,
+          face: cullFaceMap[face]
+        };
+      }
+    }
+    /**
+     * 考虑结构体命名, eg:
+     * a: { b: 1 }  ->  'a.b'
+     * a: [ { b: 1 } ] -> 'a[0].b'
+     */
+
+  }, {
+    key: "extractUniforms",
+    value: function extractUniforms(uniforms) {
+      var _this = this;
+
+      var extractedUniforms = {};
+      Object.keys(uniforms).forEach(function (uniformName) {
+        _this.extractUniformsRecursively(uniformName, uniforms[uniformName], extractedUniforms, '');
+      });
+      return extractedUniforms;
+    }
+  }, {
+    key: "extractUniformsRecursively",
+    value: function extractUniformsRecursively(uniformName, uniformValue, uniforms, prefix) {
+      var _this2 = this;
+
+      if (uniformValue === null || typeof uniformValue === 'number' || // u_A: 1
+      typeof uniformValue === 'boolean' || // u_A: false
+      Array.isArray(uniformValue) && typeof uniformValue[0] === 'number' || // u_A: [1, 2, 3]
+      isTypedArray(uniformValue) || // u_A: Float32Array
+      // @ts-ignore
+      uniformValue === '' || 'resize' in uniformValue) {
+        uniforms["".concat(prefix && prefix + '.').concat(uniformName)] = uniformValue;
+        return;
+      } // u_Struct.a.b.c
+
+
+      if (isPlainObject(uniformValue)) {
+        Object.keys(uniformValue).forEach(function (childName) {
+          _this2.extractUniformsRecursively(childName, // @ts-ignore
+          uniformValue[childName], uniforms, "".concat(prefix && prefix + '.').concat(uniformName));
+        });
+      } // u_Struct[0].a
+
+
+      if (Array.isArray(uniformValue)) {
+        uniformValue.forEach(function (child, idx) {
+          Object.keys(child).forEach(function (childName) {
+            _this2.extractUniformsRecursively(childName, // @ts-ignore
+            child[childName], uniforms, "".concat(prefix && prefix + '.').concat(uniformName, "[").concat(idx, "]"));
+          });
+        });
+      }
+    }
+  }]);
+
+  return ReglModel;
+}();
+
+export { ReglModel as default };