@antv/l7-renderer 2.21.0 → 2.21.2

package/es/regl/ReglModel.js

@@ -1,366 +1,326 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { ClipSpaceNearZ, preprocessShader_GLSL, ViewportOrigin } from '@antv/g-device-api';
-import { gl, removeDuplicateUniforms } from '@antv/l7-core';
-import { lodashUtil } from '@antv/l7-utils';
-import { blendEquationMap, blendFuncMap, cullFaceMap, depthFuncMap, primitiveMap, stencilFuncMap, stencilOpMap } from "./constants";
-var isPlainObject = lodashUtil.isPlainObject,
-  isTypedArray = lodashUtil.isTypedArray;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
-/**
- * adaptor for regl.DrawCommand
- */
-var ReglModel = /*#__PURE__*/function () {
-  function ReglModel(reGl, options) {
-    _classCallCheck(this, ReglModel);
-    _defineProperty(this, "destroyed", false);
-    _defineProperty(this, "uniforms", {});
+// src/regl/ReglModel.ts
+import {
+  ClipSpaceNearZ,
+  preprocessShader_GLSL,
+  ViewportOrigin
+} from "@antv/g-device-api";
+import { gl, removeDuplicateUniforms } from "@antv/l7-core";
+import { lodashUtil } from "@antv/l7-utils";
+import {
+  blendEquationMap,
+  blendFuncMap,
+  cullFaceMap,
+  depthFuncMap,
+  primitiveMap,
+  stencilFuncMap,
+  stencilOpMap
+} from "./constants";
+var { isPlainObject, isTypedArray } = lodashUtil;
+var ReglModel = class {
+  constructor(reGl, options) {
+    this.destroyed = false;
+    this.uniforms = {};
     this.reGl = reGl;
-    var vs = options.vs,
-      fs = options.fs,
-      attributes = options.attributes,
-      uniforms = options.uniforms,
-      primitive = options.primitive,
-      count = options.count,
-      elements = options.elements,
-      depth = options.depth,
-      cull = options.cull,
-      instances = options.instances;
-
-    /**
-     * try to compile GLSL 300 to 100
-     */
-    var vendorInfo = {
-      platformString: 'WebGL1',
-      glslVersion: '#version 100',
+    const {
+      vs,
+      fs,
+      attributes,
+      uniforms,
+      primitive,
+      count,
+      elements,
+      depth,
+      cull,
+      instances
+    } = options;
+    const vendorInfo = {
+      platformString: "WebGL1",
+      glslVersion: "#version 100",
       explicitBindingLocations: false,
       separateSamplerTextures: false,
       viewportOrigin: ViewportOrigin.LOWER_LEFT,
       clipSpaceNearZ: ClipSpaceNearZ.NEGATIVE_ONE,
       supportMRT: false
     };
-    var reglUniforms = {};
+    const reglUniforms = {};
     this.options = options;
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
-      Object.keys(uniforms).forEach(function (uniformName) {
-        // use regl prop API
-        // @ts-ignore
+      Object.keys(uniforms).forEach((uniformName) => {
         reglUniforms[uniformName] = reGl.prop(uniformName);
       });
     }
-    var reglAttributes = {};
-    Object.keys(attributes).forEach(function (name) {
+    const reglAttributes = {};
+    Object.keys(attributes).forEach((name) => {
       reglAttributes[name] = attributes[name].get();
     });
-    var frag = removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'frag', fs, null, false));
-    var vert = removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'vert', vs, null, false));
-    var drawParams = {
+    const frag = removeDuplicateUniforms(
+      preprocessShader_GLSL(vendorInfo, "frag", fs, null, false)
+    );
+    const vert = removeDuplicateUniforms(
+      preprocessShader_GLSL(vendorInfo, "vert", vs, null, false)
+    );
+    const drawParams = {
       attributes: reglAttributes,
-      frag: frag,
+      frag,
       uniforms: reglUniforms,
-      vert: vert,
+      vert,
       // @ts-ignore
-      colorMask: reGl.prop('colorMask'),
+      colorMask: reGl.prop("colorMask"),
       lineWidth: 1,
       blend: {
         // @ts-ignore
-        enable: reGl.prop('blend.enable'),
+        enable: reGl.prop("blend.enable"),
         // @ts-ignore
-        func: reGl.prop('blend.func'),
+        func: reGl.prop("blend.func"),
         // @ts-ignore
-        equation: reGl.prop('blend.equation'),
+        equation: reGl.prop("blend.equation"),
         // @ts-ignore
-        color: reGl.prop('blend.color')
+        color: reGl.prop("blend.color")
       },
       stencil: {
         // @ts-ignore
-        enable: reGl.prop('stencil.enable'),
+        enable: reGl.prop("stencil.enable"),
         // @ts-ignore
-        mask: reGl.prop('stencil.mask'),
+        mask: reGl.prop("stencil.mask"),
         // @ts-ignore
-        func: reGl.prop('stencil.func'),
+        func: reGl.prop("stencil.func"),
         // @ts-ignore
-        opFront: reGl.prop('stencil.opFront'),
+        opFront: reGl.prop("stencil.opFront"),
         // @ts-ignore
-        opBack: reGl.prop('stencil.opBack')
+        opBack: reGl.prop("stencil.opBack")
       },
-      primitive: primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive]
+      primitive: primitiveMap[primitive === void 0 ? 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 }, drawParams);
-    // this.initStencilDrawParams({ stencil }, drawParams);
-    this.initCullDrawParams({
-      cull: cull
-    }, drawParams);
+    this.initDepthDrawParams({ depth }, drawParams);
+    this.initCullDrawParams({ cull }, drawParams);
     this.drawCommand = reGl(drawParams);
     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);
-    }
-  }, {
-    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);
-    }
-  }, {
-    key: "addUniforms",
-    value: function addUniforms(uniforms) {
-      this.uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(uniforms));
+  updateAttributesAndElements(attributes, elements) {
+    const reglAttributes = {};
+    Object.keys(attributes).forEach((name) => {
+      reglAttributes[name] = attributes[name].get();
+    });
+    this.drawParams.attributes = reglAttributes;
+    this.drawParams.elements = elements.get();
+    this.drawCommand = this.reGl(this.drawParams);
+  }
+  updateAttributes(attributes) {
+    const reglAttributes = {};
+    Object.keys(attributes).forEach((name) => {
+      reglAttributes[name] = attributes[name].get();
+    });
+    this.drawParams.attributes = reglAttributes;
+    this.drawCommand = this.reGl(this.drawParams);
+  }
+  addUniforms(uniforms) {
+    this.uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(uniforms));
+  }
+  draw(options, pick) {
+    if (this.drawParams.attributes && Object.keys(this.drawParams.attributes).length === 0) {
+      return;
     }
-  }, {
-    key: "draw",
-    value: function draw(options, pick) {
-      if (this.drawParams.attributes && Object.keys(this.drawParams.attributes).length === 0) {
-        return;
+    const uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(options.uniforms || {}));
+    const reglDrawProps = {};
+    Object.keys(uniforms).forEach((uniformName) => {
+      const 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();
       }
-      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();
-        }
+    });
+    reglDrawProps.blend = pick ? this.getBlendDrawParams({
+      blend: { enable: false }
+    }) : this.getBlendDrawParams(options);
+    reglDrawProps.stencil = this.getStencilDrawParams(options);
+    reglDrawProps.colorMask = this.getColorMaskDrawParams(options, pick);
+    this.drawCommand(reglDrawProps);
+  }
+  destroy() {
+    var _a, _b;
+    (_b = (_a = this.drawParams) == null ? void 0 : _a.elements) == null ? void 0 : _b.destroy();
+    if (this.options.attributes) {
+      Object.values(this.options.attributes).forEach((attr) => {
+        attr == null ? void 0 : attr.destroy();
       });
-      // 更新 blend
-      // @ts-ignore
-      reglDrawProps.blend = pick // picking 操作不应该使用 blend
-      ? this.getBlendDrawParams({
-        blend: {
-          enable: false
-        }
-      }) : this.getBlendDrawParams(options);
-
-      // 更新stentil 配置
-      // @ts-ignore
-      reglDrawProps.stencil = this.getStencilDrawParams(options);
-      // @ts-ignore
-      reglDrawProps.colorMask = this.getColorMaskDrawParams(options, pick);
-
-      // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
-      this.drawCommand(reglDrawProps);
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      var _this$drawParams;
-      // @ts-ignore
-      (_this$drawParams = this.drawParams) === null || _this$drawParams === void 0 || (_this$drawParams = _this$drawParams.elements) === null || _this$drawParams === void 0 || _this$drawParams.destroy();
-      if (this.options.attributes) {
-        Object.values(this.options.attributes).forEach(function (attr) {
-          // @ts-ignore
-          attr === null || attr === 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]
-        };
-      }
     }
-  }, {
-    key: "getBlendDrawParams",
-    value: function getBlendDrawParams(_ref2) {
-      var blend = _ref2.blend;
-      var _ref3 = blend || {},
-        enable = _ref3.enable,
-        func = _ref3.func,
-        equation = _ref3.equation,
-        _ref3$color = _ref3.color,
-        color = _ref3$color === void 0 ? [0, 0, 0, 0] : _ref3$color;
-      // @ts-ignore
-      return {
-        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
+    this.destroyed = true;
+  }
+  /**
+   * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#depth-buffer
+   */
+  initDepthDrawParams({ depth }, drawParams) {
+    if (depth) {
+      drawParams.depth = {
+        enable: depth.enable === void 0 ? true : !!depth.enable,
+        mask: depth.mask === void 0 ? 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#stencil
-     */
-  }, {
-    key: "getStencilDrawParams",
-    value: function getStencilDrawParams(_ref4) {
-      var stencil = _ref4.stencil;
-      var _ref5 = stencil || {},
-        enable = _ref5.enable,
-        _ref5$mask = _ref5.mask,
-        mask = _ref5$mask === void 0 ? -1 : _ref5$mask,
-        _ref5$func = _ref5.func,
-        func = _ref5$func === void 0 ? {
-          cmp: gl.ALWAYS,
-          ref: 0,
-          mask: -1
-        } : _ref5$func,
-        _ref5$opFront = _ref5.opFront,
-        opFront = _ref5$opFront === void 0 ? {
-          fail: gl.KEEP,
-          zfail: gl.KEEP,
-          zpass: gl.KEEP
-        } : _ref5$opFront,
-        _ref5$opBack = _ref5.opBack,
-        opBack = _ref5$opBack === void 0 ? {
-          fail: gl.KEEP,
-          zfail: gl.KEEP,
-          zpass: gl.KEEP
-        } : _ref5$opBack;
-      return {
+  }
+  getBlendDrawParams({
+    blend
+  }) {
+    const { enable, func, equation, color = [0, 0, 0, 0] } = blend || {};
+    return {
+      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
+    };
+  }
+  /**
+   * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil
+   */
+  getStencilDrawParams({
+    stencil
+  }) {
+    const {
+      enable,
+      mask = -1,
+      func = {
+        cmp: gl.ALWAYS,
+        ref: 0,
+        mask: -1
+      },
+      opFront = {
+        fail: gl.KEEP,
+        zfail: gl.KEEP,
+        zpass: gl.KEEP
+      },
+      opBack = {
+        fail: gl.KEEP,
+        zfail: gl.KEEP,
+        zpass: gl.KEEP
+      }
+    } = stencil || {};
+    return {
+      enable: !!enable,
+      mask,
+      func: __spreadProps(__spreadValues({}, 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]
+      }
+    };
+  }
+  getColorMaskDrawParams({ stencil }, pick) {
+    const colorMask = (stencil == null ? void 0 : stencil.enable) && stencil.opFront && !pick ? [false, false, false, false] : [true, true, true, true];
+    return colorMask;
+  }
+  /**
+   * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
+   */
+  initCullDrawParams({ cull }, drawParams) {
+    if (cull) {
+      const { enable, face = gl.BACK } = cull;
+      drawParams.cull = {
         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]
-        }
+        face: cullFaceMap[face]
       };
     }
-  }, {
-    key: "getColorMaskDrawParams",
-    value: function getColorMaskDrawParams(_ref6, pick) {
-      var stencil = _ref6.stencil;
-      // TODO: 重构相关参数
-      // 掩膜模式下，颜色通道全部关闭
-      var colorMask = stencil !== null && stencil !== void 0 && stencil.enable && stencil.opFront && !pick ? [false, false, false, false] : [true, true, true, true]; // 非掩码模式下，颜色通道全部开启
-      return colorMask;
-    }
-
-    /**
-     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
-     */
-  }, {
-    key: "initCullDrawParams",
-    value: function initCullDrawParams(_ref7, drawParams) {
-      var cull = _ref7.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'
+   */
+  extractUniforms(uniforms) {
+    const extractedUniforms = {};
+    Object.keys(uniforms).forEach((uniformName) => {
+      this.extractUniformsRecursively(
+        uniformName,
+        uniforms[uniformName],
+        extractedUniforms,
+        ""
+      );
+    });
+    return extractedUniforms;
+  }
+  extractUniformsRecursively(uniformName, uniformValue, uniforms, prefix) {
+    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[`${prefix && prefix + "."}${uniformName}`] = uniformValue;
+      return;
     }
-
-    /**
-     * 考虑结构体命名, 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, '');
+    if (isPlainObject(uniformValue)) {
+      Object.keys(uniformValue).forEach((childName) => {
+        this.extractUniformsRecursively(
+          childName,
+          // @ts-ignore
+          uniformValue[childName],
+          uniforms,
+          `${prefix && prefix + "."}${uniformName}`
+        );
       });
-      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,
+    if (Array.isArray(uniformValue)) {
+      uniformValue.forEach((child, idx) => {
+        Object.keys(child).forEach((childName) => {
+          this.extractUniformsRecursively(
+            childName,
             // @ts-ignore
-            child[childName], uniforms, "".concat(prefix && prefix + '.').concat(uniformName, "[").concat(idx, "]"));
-          });
+            child[childName],
+            uniforms,
+            `${prefix && prefix + "."}${uniformName}[${idx}]`
+          );
         });
-      }
+      });
     }
-  }]);
-  return ReglModel;
-}();
-export { ReglModel as default };
+  }
+};
+export {
+  ReglModel as default
+};