@antv/l7-renderer 2.19.10 → 2.20.0

package/lib/device/DeviceElements.js

@@ -0,0 +1,66 @@
+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/device/DeviceElements.ts
+var DeviceElements_exports = {};
+__export(DeviceElements_exports, {
+  default: () => DeviceElements
+});
+module.exports = __toCommonJS(DeviceElements_exports);
+var import_g_device_api = require("@antv/g-device-api");
+var import_l7_core = require("@antv/l7-core");
+var import_constants = require("./constants");
+var import_typedarray = require("./utils/typedarray");
+var DeviceElements = class {
+  constructor(device, options) {
+    const { data, type, count = 0 } = options;
+    let typed;
+    if ((0, import_typedarray.isTypedArray)(data)) {
+      typed = data;
+    } else {
+      typed = new import_constants.typedArrayCtorMap[this.type || import_l7_core.gl.UNSIGNED_INT](
+        data
+      );
+    }
+    this.type = type;
+    this.count = count;
+    this.indexBuffer = device.createBuffer({
+      viewOrSize: typed,
+      usage: import_g_device_api.BufferUsage.INDEX
+    });
+  }
+  get() {
+    return this.indexBuffer;
+  }
+  subData({
+    data
+  }) {
+    let typed;
+    if ((0, import_typedarray.isTypedArray)(data)) {
+      typed = data;
+    } else {
+      typed = new import_constants.typedArrayCtorMap[this.type || import_l7_core.gl.UNSIGNED_INT](
+        data
+      );
+    }
+    this.indexBuffer.setSubData(0, new Uint8Array(typed.buffer));
+  }
+  destroy() {
+    this.indexBuffer.destroy();
+  }
+};

package/lib/device/DeviceFramebuffer.js

@@ -0,0 +1,67 @@
+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/device/DeviceFramebuffer.ts
+var DeviceFramebuffer_exports = {};
+__export(DeviceFramebuffer_exports, {
+  default: () => DeviceFramebuffer
+});
+module.exports = __toCommonJS(DeviceFramebuffer_exports);
+var import_g_device_api = require("@antv/g-device-api");
+var import_DeviceTexture2D = require("./DeviceTexture2D");
+var DeviceFramebuffer = class {
+  constructor(device, options) {
+    this.device = device;
+    const { width, height, color } = options;
+    if ((0, import_DeviceTexture2D.isTexture2D)(color)) {
+      this.renderTarget = device.createRenderTargetFromTexture(
+        color.get()
+      );
+      this.width = color["width"];
+      this.height = color["height"];
+    } else if (width && height) {
+      this.renderTarget = device.createRenderTarget({
+        format: import_g_device_api.Format.U8_RGBA_RT,
+        width,
+        height
+      });
+      this.width = width;
+      this.height = height;
+    }
+  }
+  get() {
+    return this.renderTarget;
+  }
+  destroy() {
+    this.renderTarget.destroy();
+  }
+  resize({ width, height }) {
+    if (this.width !== width || this.height !== height) {
+      if (this.renderTarget) {
+        this.renderTarget.destroy();
+      }
+      this.renderTarget = this.device.createRenderTarget({
+        format: import_g_device_api.Format.U8_RGBA_RT,
+        width,
+        height
+      });
+      this.width = width;
+      this.height = height;
+    }
+  }
+};

package/lib/device/DeviceModel.js

@@ -0,0 +1,370 @@
+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/device/DeviceModel.ts
+var DeviceModel_exports = {};
+__export(DeviceModel_exports, {
+  default: () => DeviceModel
+});
+module.exports = __toCommonJS(DeviceModel_exports);
+var import_g_device_api = require("@antv/g-device-api");
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_constants = require("./constants");
+var { isPlainObject, isTypedArray } = import_l7_utils.lodashUtil;
+var DeviceModel = class {
+  constructor(device, options) {
+    this.device = device;
+    this.options = options;
+    this.destroyed = false;
+    this.uniforms = {};
+    this.vertexBuffers = [];
+    const { vs, fs, attributes, uniforms, count, elements } = options;
+    this.options = options;
+    const program = device.createProgram({
+      vertex: {
+        glsl: vs
+      },
+      fragment: {
+        glsl: fs
+      }
+    });
+    this.program = program;
+    if (uniforms) {
+      this.uniforms = this.extractUniforms(uniforms);
+    }
+    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: import_g_device_api.VertexStepMode.VERTEX,
+        attributes: [
+          {
+            format: import_constants.sizeFormatMap[size],
+            shaderLocation,
+            offset,
+            divisor
+          }
+        ]
+      });
+      inferredCount = buffer["size"] / size;
+    });
+    if (!count) {
+      this.options.count = inferredCount;
+    }
+    if (elements) {
+      this.indexBuffer = elements.get();
+    }
+    const inputLayout = device.createInputLayout({
+      vertexBufferDescriptors,
+      indexBufferFormat: elements ? import_g_device_api.Format.U32_R : null,
+      program
+    });
+    this.inputLayout = inputLayout;
+    this.pipeline = this.createPipeline(options);
+  }
+  createPipeline(options) {
+    const { primitive = import_l7_core.gl.TRIANGLES, depth, cull, blend } = 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);
+    return this.device.createRenderPipeline({
+      inputLayout: this.inputLayout,
+      program: this.program,
+      topology: import_constants.primitiveMap[primitive],
+      colorAttachmentFormats: [import_g_device_api.Format.U8_RGBA_RT],
+      depthStencilAttachmentFormat: import_g_device_api.Format.D24_S8,
+      megaStateDescriptor: {
+        attachmentsState: [
+          {
+            channelWriteMask: import_g_device_api.ChannelWriteMask.ALL,
+            rgbBlendState: {
+              blendMode: blendEnabled && blendParams.equation.rgb || import_g_device_api.BlendMode.ADD,
+              blendSrcFactor: blendEnabled && blendParams.func.srcRGB || import_g_device_api.BlendFactor.SRC_ALPHA,
+              blendDstFactor: blendEnabled && blendParams.func.dstRGB || import_g_device_api.BlendFactor.ONE_MINUS_SRC_ALPHA
+            },
+            alphaBlendState: {
+              blendMode: blendEnabled && blendParams.equation.alpha || import_g_device_api.BlendMode.ADD,
+              blendSrcFactor: blendEnabled && blendParams.func.srcAlpha || import_g_device_api.BlendFactor.ONE,
+              blendDstFactor: blendEnabled && blendParams.func.dstAlpha || import_g_device_api.BlendFactor.ONE_MINUS_SRC_ALPHA
+            }
+          }
+        ],
+        blendConstant: import_g_device_api.TransparentBlack,
+        depthWrite: depthEnabled,
+        depthCompare: depthEnabled && depthParams.func || import_g_device_api.CompareFunction.LESS,
+        cullMode: cullEnabled && cullParams.face || import_g_device_api.CullMode.NONE,
+        stencilWrite: false
+      }
+    });
+  }
+  updateAttributesAndElements() {
+  }
+  updateAttributes() {
+  }
+  addUniforms(uniforms) {
+    this.uniforms = {
+      ...this.uniforms,
+      ...this.extractUniforms(uniforms)
+    };
+  }
+  draw(options) {
+    const mergedOptions = {
+      ...this.options,
+      ...options
+    };
+    const {
+      count = 0,
+      instances,
+      elements,
+      uniforms = {},
+      uniformBuffers,
+      textures
+    } = mergedOptions;
+    this.uniforms = {
+      ...this.uniforms,
+      ...this.extractUniforms(uniforms)
+    };
+    const { width, height } = this.device;
+    const renderPass = this.device.renderPass;
+    this.pipeline = this.createPipeline(mergedOptions);
+    renderPass.setPipeline(this.pipeline);
+    renderPass.setVertexInput(
+      this.inputLayout,
+      this.vertexBuffers.map((buffer) => ({
+        buffer
+      })),
+      elements ? {
+        buffer: this.indexBuffer,
+        offset: 0
+        // TODO: use defaule value
+      } : null
+    );
+    renderPass.setViewport(0, 0, width, height);
+    if (uniformBuffers) {
+      this.bindings = this.device.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"]
+        }))
+      });
+    }
+    if (this.bindings) {
+      renderPass.setBindings(this.bindings);
+      this.program.setUniformsLegacy(this.uniforms);
+    }
+    if (elements) {
+      const indexCount = elements["count"];
+      if (indexCount === 0) {
+        renderPass.draw(count, instances);
+      } else {
+        renderPass.drawIndexed(indexCount, instances);
+      }
+    } else {
+      renderPass.draw(count, instances);
+    }
+  }
+  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: depth.enable === void 0 ? true : !!depth.enable,
+        mask: depth.mask === void 0 ? true : !!depth.mask,
+        func: import_constants.depthFuncMap[depth.func || import_l7_core.gl.LESS],
+        range: depth.range || [0, 1]
+      };
+    }
+  }
+  getBlendDrawParams({
+    blend
+  }) {
+    const { enable, func, equation, color = [0, 0, 0, 0] } = blend || {};
+    return {
+      enable: !!enable,
+      func: {
+        srcRGB: import_constants.blendFuncMap[func && func.srcRGB || import_l7_core.gl.SRC_ALPHA],
+        srcAlpha: import_constants.blendFuncMap[func && func.srcAlpha || import_l7_core.gl.SRC_ALPHA],
+        dstRGB: import_constants.blendFuncMap[func && func.dstRGB || import_l7_core.gl.ONE_MINUS_SRC_ALPHA],
+        dstAlpha: import_constants.blendFuncMap[func && func.dstAlpha || import_l7_core.gl.ONE_MINUS_SRC_ALPHA]
+      },
+      equation: {
+        rgb: import_constants.blendEquationMap[equation && equation.rgb || import_l7_core.gl.FUNC_ADD],
+        alpha: import_constants.blendEquationMap[equation && equation.alpha || import_l7_core.gl.FUNC_ADD]
+      },
+      color
+    };
+  }
+  // /**
+  //  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil
+  //  */
+  // private getStencilDrawParams({
+  //   stencil,
+  // }: Pick<IModelInitializationOptions, '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: {
+  //       ...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],
+  //     },
+  //   };
+  // }
+  // private getColorMaskDrawParams(
+  //   { stencil }: Pick<IModelInitializationOptions, 'stencil'>,
+  //   pick: boolean,
+  // ) {
+  //   // TODO: 重构相关参数
+  //   // 掩膜模式下，颜色通道全部关闭
+  //   const colorMask =
+  //     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
+  }) {
+    if (cull) {
+      const { enable, face = import_l7_core.gl.BACK } = cull;
+      return {
+        enable: !!enable,
+        face: import_constants.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;
+    }
+    if (isPlainObject(uniformValue)) {
+      Object.keys(uniformValue).forEach((childName) => {
+        this.extractUniformsRecursively(
+          childName,
+          // @ts-ignore
+          uniformValue[childName],
+          uniforms,
+          `${prefix && prefix + "."}${uniformName}`
+        );
+      });
+    }
+    if (Array.isArray(uniformValue)) {
+      uniformValue.forEach((child, idx) => {
+        Object.keys(child).forEach((childName) => {
+          this.extractUniformsRecursively(
+            childName,
+            // @ts-ignore
+            child[childName],
+            uniforms,
+            `${prefix && prefix + "."}${uniformName}[${idx}]`
+          );
+        });
+      });
+    }
+  }
+};

package/lib/device/DeviceTexture2D.js

@@ -0,0 +1,119 @@
+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/device/DeviceTexture2D.ts
+var DeviceTexture2D_exports = {};
+__export(DeviceTexture2D_exports, {
+  default: () => DeviceTexture2D,
+  isTexture2D: () => isTexture2D
+});
+module.exports = __toCommonJS(DeviceTexture2D_exports);
+var import_g_device_api = require("@antv/g-device-api");
+var import_l7_core = require("@antv/l7-core");
+var import_constants = require("./constants");
+function isTexture2D(t) {
+  return false;
+}
+var DeviceTexture2D = class {
+  constructor(device, options) {
+    this.isDestroy = false;
+    const {
+      data,
+      type = import_l7_core.gl.UNSIGNED_BYTE,
+      width,
+      height,
+      flipY = false,
+      format = import_l7_core.gl.RGBA,
+      wrapS = import_l7_core.gl.CLAMP_TO_EDGE,
+      wrapT = import_l7_core.gl.CLAMP_TO_EDGE,
+      // aniso = 0,
+      alignment = 1
+      // mipmap = false,
+      // premultiplyAlpha = false,
+      // mag = gl.NEAREST,
+      // min = gl.NEAREST,
+      // colorSpace = gl.BROWSER_DEFAULT_WEBGL,
+      // x = 0,
+      // y = 0,
+      // copy = false,
+    } = options;
+    this.width = width;
+    this.height = height;
+    let pixelFormat = import_g_device_api.Format.U8_RGBA_RT;
+    if (type === import_l7_core.gl.UNSIGNED_BYTE && format === import_l7_core.gl.RGBA) {
+      pixelFormat = import_g_device_api.Format.U8_RGBA_RT;
+    } else if (format === import_l7_core.gl.LUMINANCE && type === import_l7_core.gl.FLOAT) {
+      pixelFormat = import_g_device_api.Format.F32_LUMINANCE;
+    } else if (format === import_l7_core.gl.LUMINANCE && type === import_l7_core.gl.UNSIGNED_BYTE) {
+      pixelFormat = import_g_device_api.Format.U8_LUMINANCE;
+    } else {
+      throw new Error(`create texture error, type: ${type}, format: ${format}`);
+    }
+    this.texture = device.createTexture({
+      format: pixelFormat,
+      width,
+      height,
+      usage: import_g_device_api.TextureUsage.SAMPLED,
+      pixelStore: {
+        unpackFlipY: flipY,
+        packAlignment: alignment
+      }
+    });
+    if (data) {
+      this.texture.setImageData([data]);
+    }
+    this.sampler = device.createSampler({
+      addressModeU: import_constants.wrapModeMap[wrapS],
+      addressModeV: import_constants.wrapModeMap[wrapT],
+      minFilter: import_g_device_api.FilterMode.POINT,
+      // TODO: use mag & min
+      magFilter: import_g_device_api.FilterMode.BILINEAR,
+      mipmapFilter: import_g_device_api.MipmapFilterMode.NO_MIP,
+      lodMinClamp: 0,
+      lodMaxClamp: 0
+      // maxAnisotropy: aniso,
+    });
+  }
+  get() {
+    return this.texture;
+  }
+  update(props) {
+    const { data } = props;
+    this.texture.setImageData([data]);
+  }
+  bind() {
+  }
+  resize({ width, height }) {
+    this.width = width;
+    this.height = height;
+  }
+  getSize() {
+    return [this.width, this.height];
+  }
+  destroy() {
+    var _a;
+    if (!this.isDestroy) {
+      (_a = this.texture) == null ? void 0 : _a.destroy();
+    }
+    this.isDestroy = true;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isTexture2D
+});