@antv/l7-renderer 2.21.0 → 2.21.2

package/es/device/DeviceModel.js

@@ -1,80 +1,110 @@
-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 { BlendFactor, BlendMode, ChannelWriteMask, CompareFunction, CullMode, Format, StencilOp, TransparentBlack, VertexStepMode, ViewportOrigin } from '@antv/g-device-api';
-import { gl } from '@antv/l7-core';
-import { lodashUtil } from '@antv/l7-utils';
+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));
+
+// src/device/DeviceModel.ts
+import {
+  BlendFactor,
+  BlendMode,
+  ChannelWriteMask,
+  CompareFunction,
+  CullMode,
+  Format,
+  StencilOp,
+  TransparentBlack,
+  VertexStepMode,
+  ViewportOrigin
+} from "@antv/g-device-api";
+import { gl } from "@antv/l7-core";
+import { lodashUtil } from "@antv/l7-utils";
 import DeviceFramebuffer from "./DeviceFramebuffer";
 import DeviceTexture2D from "./DeviceTexture2D";
-import { blendEquationMap, blendFuncMap, cullFaceMap, depthFuncMap, primitiveMap, sizeFormatMap, stencilFuncMap, stencilOpMap } from "./constants";
-var isPlainObject = lodashUtil.isPlainObject,
-  isTypedArray = lodashUtil.isTypedArray;
-var DeviceModel = /*#__PURE__*/function () {
-  function DeviceModel(device, options, service) {
-    var _this = this;
-    _classCallCheck(this, DeviceModel);
-    _defineProperty(this, "destroyed", false);
-    _defineProperty(this, "uniforms", {});
-    _defineProperty(this, "vertexBuffers", []);
+import {
+  blendEquationMap,
+  blendFuncMap,
+  cullFaceMap,
+  depthFuncMap,
+  primitiveMap,
+  sizeFormatMap,
+  stencilFuncMap,
+  stencilOpMap
+} from "./constants";
+var { isPlainObject, isTypedArray } = lodashUtil;
+var DeviceModel = class {
+  constructor(device, options, service) {
     this.device = device;
     this.options = options;
     this.service = service;
-    var vs = options.vs,
-      fs = options.fs,
-      attributes = options.attributes,
-      uniforms = options.uniforms,
-      count = options.count,
-      elements = options.elements,
-      diagnosticDerivativeUniformityEnabled = options.diagnosticDerivativeUniformityEnabled;
+    this.destroyed = false;
+    this.uniforms = {};
+    this.vertexBuffers = [];
+    const {
+      vs,
+      fs,
+      attributes,
+      uniforms,
+      count,
+      elements,
+      diagnosticDerivativeUniformityEnabled
+    } = options;
     this.options = options;
-    var diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? '' : this.service['viewportOrigin'] === ViewportOrigin.UPPER_LEFT ? 'diagnostic(off,derivative_uniformity);' : '';
+    const diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? "" : this.service["viewportOrigin"] === ViewportOrigin.UPPER_LEFT ? "diagnostic(off,derivative_uniformity);" : "";
     this.program = service.renderCache.createProgram({
       vertex: {
         glsl: vs
       },
       fragment: {
         glsl: fs,
-        postprocess: function postprocess(fs) {
-          return diagnosticDerivativeUniformityHeader + fs;
-        }
+        postprocess: (fs2) => diagnosticDerivativeUniformityHeader + fs2
       }
     });
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
     }
-    var vertexBufferDescriptors = [];
-
-    // Infer count from data if not provided.
-    var inferredCount = 0;
-    Object.keys(attributes).forEach(function (name) {
-      var attribute = attributes[name];
-      var buffer = attribute.get();
-      // Bind at each frame.
-      _this.vertexBuffers.push(buffer.get());
-      var _attribute$attribute = attribute['attribute'],
-        _attribute$attribute$ = _attribute$attribute.offset,
-        offset = _attribute$attribute$ === void 0 ? 0 : _attribute$attribute$,
-        _attribute$attribute$2 = _attribute$attribute.stride,
-        stride = _attribute$attribute$2 === void 0 ? 0 : _attribute$attribute$2,
-        _attribute$attribute$3 = _attribute$attribute.size,
-        size = _attribute$attribute$3 === void 0 ? 1 : _attribute$attribute$3,
-        _attribute$attribute$4 = _attribute$attribute.divisor,
-        divisor = _attribute$attribute$4 === void 0 ? 0 : _attribute$attribute$4,
-        _attribute$attribute$5 = _attribute$attribute.shaderLocation,
-        shaderLocation = _attribute$attribute$5 === void 0 ? 0 : _attribute$attribute$5;
+    const vertexBufferDescriptors = [];
+    let inferredCount = 0;
+    Object.keys(attributes).forEach((name) => {
+      const attribute = attributes[name];
+      const buffer = attribute.get();
+      this.vertexBuffers.push(buffer.get());
+      const {
+        offset = 0,
+        stride = 0,
+        // TODO: normalized
+        size = 1,
+        divisor = 0,
+        shaderLocation = 0
+      } = attribute["attribute"];
       vertexBufferDescriptors.push({
         arrayStride: stride || size * 4,
         // TODO: L7 hasn't use instanced array for now.
         stepMode: VertexStepMode.VERTEX,
-        attributes: [{
-          format: sizeFormatMap[size],
-          shaderLocation: shaderLocation,
-          offset: offset,
-          divisor: divisor
-        }]
+        attributes: [
+          {
+            format: sizeFormatMap[size],
+            shaderLocation,
+            offset,
+            divisor
+          }
+        ]
       });
-      inferredCount = buffer['size'] / size;
+      inferredCount = buffer["size"] / size;
     });
     if (!count) {
       this.options.count = inferredCount;
@@ -82,49 +112,34 @@ var DeviceModel = /*#__PURE__*/function () {
     if (elements) {
       this.indexBuffer = elements.get();
     }
-    var inputLayout = service.renderCache.createInputLayout({
-      vertexBufferDescriptors: vertexBufferDescriptors,
+    const inputLayout = service.renderCache.createInputLayout({
+      vertexBufferDescriptors,
       indexBufferFormat: elements ? Format.U32_R : null,
       program: this.program
     });
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
   }
-  _createClass(DeviceModel, [{
-    key: "createPipeline",
-    value: function createPipeline(options, pick) {
-      var _options$primitive = options.primitive,
-        primitive = _options$primitive === void 0 ? gl.TRIANGLES : _options$primitive,
-        depth = options.depth,
-        cull = options.cull,
-        blend = options.blend,
-        stencil = options.stencil;
-      var depthParams = this.initDepthDrawParams({
-        depth: depth
-      });
-      var depthEnabled = !!(depthParams && depthParams.enable);
-      var cullParams = this.initCullDrawParams({
-        cull: cull
-      });
-      var cullEnabled = !!(cullParams && cullParams.enable);
-      // Disable blend when picking.
-      var blendParams = this.getBlendDrawParams({
-        blend: blend
-      });
-      var blendEnabled = !!(blendParams && blendParams.enable);
-      var stencilParams = this.getStencilDrawParams({
-        stencil: stencil
-      });
-      var stencilEnabled = !!(stencilParams && stencilParams.enable);
-      return this.device.createRenderPipeline({
-        // return this.service.renderCache.createRenderPipeline({
-        inputLayout: this.inputLayout,
-        program: this.program,
-        topology: primitiveMap[primitive],
-        colorAttachmentFormats: [Format.U8_RGBA_RT],
-        depthStencilAttachmentFormat: Format.D24_S8,
-        megaStateDescriptor: {
-          attachmentsState: [pick ? {
+  createPipeline(options, pick) {
+    const { primitive = gl.TRIANGLES, depth, cull, blend, stencil } = options;
+    const depthParams = this.initDepthDrawParams({ depth });
+    const depthEnabled = !!(depthParams && depthParams.enable);
+    const cullParams = this.initCullDrawParams({ cull });
+    const cullEnabled = !!(cullParams && cullParams.enable);
+    const blendParams = this.getBlendDrawParams({ blend });
+    const blendEnabled = !!(blendParams && blendParams.enable);
+    const stencilParams = this.getStencilDrawParams({ stencil });
+    const stencilEnabled = !!(stencilParams && stencilParams.enable);
+    return this.device.createRenderPipeline({
+      // return this.service.renderCache.createRenderPipeline({
+      inputLayout: this.inputLayout,
+      program: this.program,
+      topology: primitiveMap[primitive],
+      colorAttachmentFormats: [Format.U8_RGBA_RT],
+      depthStencilAttachmentFormat: Format.D24_S8,
+      megaStateDescriptor: {
+        attachmentsState: [
+          pick ? {
             channelWriteMask: ChannelWriteMask.ALL,
             rgbBlendState: {
               blendMode: BlendMode.ADD,
@@ -148,317 +163,276 @@ var DeviceModel = /*#__PURE__*/function () {
               blendSrcFactor: blendEnabled && blendParams.func.srcAlpha || BlendFactor.ONE,
               blendDstFactor: blendEnabled && blendParams.func.dstAlpha || BlendFactor.ONE
             }
-          }],
-          blendConstant: blendEnabled ? TransparentBlack : undefined,
-          depthWrite: depthEnabled,
-          depthCompare: depthEnabled && depthParams.func || CompareFunction.LESS,
-          cullMode: cullEnabled && cullParams.face || CullMode.NONE,
-          stencilWrite: stencilEnabled,
-          stencilFront: {
-            compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
-            passOp: stencilParams.opFront.zpass,
-            failOp: stencilParams.opFront.fail,
-            depthFailOp: stencilParams.opFront.zfail,
-            mask: stencilParams.opFront.mask
-          },
-          stencilBack: {
-            compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
-            passOp: stencilParams.opBack.zpass,
-            failOp: stencilParams.opBack.fail,
-            depthFailOp: stencilParams.opBack.zfail,
-            mask: stencilParams.opBack.mask
           }
+        ],
+        blendConstant: blendEnabled ? TransparentBlack : void 0,
+        depthWrite: depthEnabled,
+        depthCompare: depthEnabled && depthParams.func || CompareFunction.LESS,
+        cullMode: cullEnabled && cullParams.face || CullMode.NONE,
+        stencilWrite: stencilEnabled,
+        stencilFront: {
+          compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
+          passOp: stencilParams.opFront.zpass,
+          failOp: stencilParams.opFront.fail,
+          depthFailOp: stencilParams.opFront.zfail,
+          mask: stencilParams.opFront.mask
+        },
+        stencilBack: {
+          compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
+          passOp: stencilParams.opBack.zpass,
+          failOp: stencilParams.opBack.fail,
+          depthFailOp: stencilParams.opBack.zfail,
+          mask: stencilParams.opBack.mask
         }
-      });
-    }
-  }, {
-    key: "updateAttributesAndElements",
-    value: function updateAttributesAndElements() {}
-
-    /**
-     * No need to implement this method, you should update data on `Attribute` like this:
-     *
-     * @example
-     * ```ts
-     * attribute.updateBuffer({
-     *   data: [],
-     *   offset: 0,
-     * });
-     * ```
-     */
-  }, {
-    key: "updateAttributes",
-    value: function updateAttributes() {}
-  }, {
-    key: "addUniforms",
-    value: function addUniforms(uniforms) {
-      this.uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(uniforms));
-    }
-  }, {
-    key: "draw",
-    value: function draw(options, pick) {
-      var _this2 = this;
-      var mergedOptions = _objectSpread(_objectSpread({}, this.options), options);
-      var _mergedOptions$count = mergedOptions.count,
-        count = _mergedOptions$count === void 0 ? 0 : _mergedOptions$count,
-        instances = mergedOptions.instances,
-        elements = mergedOptions.elements,
-        _mergedOptions$unifor = mergedOptions.uniforms,
-        uniforms = _mergedOptions$unifor === void 0 ? {} : _mergedOptions$unifor,
-        uniformBuffers = mergedOptions.uniformBuffers,
-        textures = mergedOptions.textures;
-      this.uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(uniforms));
-      var _this$service = this.service,
-        renderPass = _this$service.renderPass,
-        currentFramebuffer = _this$service.currentFramebuffer,
-        width = _this$service.width,
-        height = _this$service.height,
-        renderCache = _this$service.renderCache;
-
-      // TODO: Recreate pipeline only when blend / cull changed.
-      this.pipeline = this.createPipeline(mergedOptions, pick);
-
-      // const height = this.device['swapChainHeight'];
-      var device = this.service['device'];
-      // @ts-ignore
-      var tmpHeight = device['swapChainHeight'];
-      // @ts-ignore
-      device['swapChainHeight'] = (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['height']) || height;
-      renderPass.setViewport(0, 0, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['width']) || width, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['height']) || height);
-
-      // @ts-ignore
-      device['swapChainHeight'] = tmpHeight;
-      renderPass.setPipeline(this.pipeline);
-      renderPass.setStencilReference(1);
-      renderPass.setVertexInput(this.inputLayout, this.vertexBuffers.map(function (buffer) {
-        return {
-          buffer: buffer
-        };
-      }), elements ? {
+      }
+    });
+  }
+  updateAttributesAndElements() {
+  }
+  /**
+   * No need to implement this method, you should update data on `Attribute` like this:
+   *
+   * @example
+   * ```ts
+   * attribute.updateBuffer({
+   *   data: [],
+   *   offset: 0,
+   * });
+   * ```
+   */
+  updateAttributes() {
+  }
+  addUniforms(uniforms) {
+    this.uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(uniforms));
+  }
+  draw(options, pick) {
+    const mergedOptions = __spreadValues(__spreadValues({}, this.options), options);
+    const {
+      count = 0,
+      instances,
+      elements,
+      uniforms = {},
+      uniformBuffers,
+      textures
+    } = mergedOptions;
+    this.uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(uniforms));
+    const { renderPass, currentFramebuffer, width, height, renderCache } = this.service;
+    this.pipeline = this.createPipeline(mergedOptions, pick);
+    const device = this.service["device"];
+    const tmpHeight = device["swapChainHeight"];
+    device["swapChainHeight"] = (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height;
+    renderPass.setViewport(
+      0,
+      0,
+      (currentFramebuffer == null ? void 0 : currentFramebuffer["width"]) || width,
+      (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height
+    );
+    device["swapChainHeight"] = tmpHeight;
+    renderPass.setPipeline(this.pipeline);
+    renderPass.setStencilReference(1);
+    renderPass.setVertexInput(
+      this.inputLayout,
+      this.vertexBuffers.map((buffer) => ({
+        buffer
+      })),
+      elements ? {
         buffer: this.indexBuffer,
         offset: 0
-      } : null);
-      if (uniformBuffers) {
-        // this.bindings = device.createBindings({
-        this.bindings = renderCache.createBindings({
-          pipeline: this.pipeline,
-          uniformBufferBindings: uniformBuffers.map(function (uniformBuffer, i) {
-            var buffer = uniformBuffer;
-            return {
-              binding: i,
-              buffer: buffer.get(),
-              size: buffer['size']
-            };
-          }),
-          samplerBindings: textures === null || textures === void 0 ? void 0 : textures.map(function (t) {
-            return {
-              texture: t['texture'],
-              sampler: t['sampler']
-            };
-          })
-        });
-      }
-      if (this.bindings) {
-        renderPass.setBindings(this.bindings);
-        // Compatible to WebGL1.
-        Object.keys(this.uniforms).forEach(function (uniformName) {
-          var uniform = _this2.uniforms[uniformName];
-          if (uniform instanceof DeviceTexture2D) {
-            // @ts-ignore
-            _this2.uniforms[uniformName] = uniform.get();
-          } else if (uniform instanceof DeviceFramebuffer) {
-            // @ts-ignore
-            _this2.uniforms[uniformName] = uniform.get()['texture'];
-          }
-        });
-        this.program.setUniformsLegacy(this.uniforms);
-      }
-      if (elements) {
-        var indexCount = elements['count'];
-        if (indexCount === 0) {
-          renderPass.draw(count, instances);
-        } else {
-          renderPass.drawIndexed(indexCount, instances);
-        }
-      } else {
-        renderPass.draw(count, instances);
-      }
+      } : null
+    );
+    if (uniformBuffers) {
+      this.bindings = renderCache.createBindings({
+        pipeline: this.pipeline,
+        uniformBufferBindings: uniformBuffers.map((uniformBuffer, i) => {
+          const buffer = uniformBuffer;
+          return {
+            binding: i,
+            buffer: buffer.get(),
+            size: buffer["size"]
+          };
+        }),
+        samplerBindings: textures == null ? void 0 : textures.map((t) => ({
+          texture: t["texture"],
+          sampler: t["sampler"]
+        }))
+      });
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      var _this$vertexBuffers, _this$indexBuffer, _this$bindings;
-      this.program.destroy();
-      (_this$vertexBuffers = this.vertexBuffers) === null || _this$vertexBuffers === void 0 || _this$vertexBuffers.forEach(function (buffer) {
-        return buffer.destroy();
+    if (this.bindings) {
+      renderPass.setBindings(this.bindings);
+      Object.keys(this.uniforms).forEach((uniformName) => {
+        const uniform = this.uniforms[uniformName];
+        if (uniform instanceof DeviceTexture2D) {
+          this.uniforms[uniformName] = uniform.get();
+        } else if (uniform instanceof DeviceFramebuffer) {
+          this.uniforms[uniformName] = uniform.get()["texture"];
+        }
       });
-      (_this$indexBuffer = this.indexBuffer) === null || _this$indexBuffer === void 0 || _this$indexBuffer.destroy();
-      (_this$bindings = this.bindings) === null || _this$bindings === void 0 || _this$bindings.destroy();
-      this.inputLayout.destroy();
-      this.pipeline.destroy();
-      this.destroyed = true;
+      this.program.setUniformsLegacy(this.uniforms);
     }
-  }, {
-    key: "initDepthDrawParams",
-    value: function initDepthDrawParams(_ref) {
-      var depth = _ref.depth;
-      if (depth) {
-        return {
-          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]
-        };
+    if (elements) {
+      const indexCount = elements["count"];
+      if (indexCount === 0) {
+        renderPass.draw(count, instances);
+      } else {
+        renderPass.drawIndexed(indexCount, instances);
       }
+    } else {
+      renderPass.draw(count, instances);
     }
-  }, {
-    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;
+  }
+  destroy() {
+    var _a, _b, _c;
+    this.program.destroy();
+    (_a = this.vertexBuffers) == null ? void 0 : _a.forEach((buffer) => buffer.destroy());
+    (_b = this.indexBuffer) == null ? void 0 : _b.destroy();
+    (_c = this.bindings) == null ? void 0 : _c.destroy();
+    this.inputLayout.destroy();
+    this.pipeline.destroy();
+    this.destroyed = true;
+  }
+  initDepthDrawParams({
+    depth
+  }) {
+    if (depth) {
       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
+        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 ? 0xffffffff : _ref5$mask,
-        _ref5$func = _ref5.func,
-        func = _ref5$func === void 0 ? {
-          cmp: gl.ALWAYS,
-          ref: 0,
-          mask: 0xffffffff
-        } : _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;
+  }
+  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 = 4294967295,
+      func = {
+        cmp: gl.ALWAYS,
+        ref: 0,
+        mask: 4294967295
+      },
+      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],
+        mask: func.mask
+      },
+      opBack: {
+        fail: stencilOpMap[opBack.fail],
+        zfail: stencilOpMap[opBack.zfail],
+        zpass: stencilOpMap[opBack.zpass],
+        mask: func.mask
+      }
+    };
+  }
+  /**
+   * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
+   */
+  initCullDrawParams({
+    cull
+  }) {
+    if (cull) {
+      const { enable, face = gl.BACK } = cull;
       return {
         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],
-          mask: func.mask
-        },
-        opBack: {
-          fail: stencilOpMap[opBack.fail],
-          zfail: stencilOpMap[opBack.zfail],
-          zpass: stencilOpMap[opBack.zpass],
-          mask: func.mask
-        }
+        face: cullFaceMap[face]
       };
     }
-
-    /**
-     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
-     */
-  }, {
-    key: "initCullDrawParams",
-    value: function initCullDrawParams(_ref6) {
-      var cull = _ref6.cull;
-      if (cull) {
-        var enable = cull.enable,
-          _cull$face = cull.face,
-          face = _cull$face === void 0 ? gl.BACK : _cull$face;
-        return {
-          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 _this3 = this;
-      var extractedUniforms = {};
-      Object.keys(uniforms).forEach(function (uniformName) {
-        _this3.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 _this4 = 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) {
-          _this4.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) {
-            _this4.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 DeviceModel;
-}();
-export { DeviceModel as default };
+  }
+};
+export {
+  DeviceModel as default
+};