@antv/l7-renderer 2.23.2 → 2.23.3-beta.1

package/es/device/DeviceModel.d.ts

@@ -13,7 +13,15 @@ export default class DeviceModel implements IModel {
     private indexBuffer;
     private vertexBuffers;
     private bindings;
+    private pipelineCache;
+    private currentPipelineKey;
     constructor(device: Device, options: IModelInitializationOptions, service: DeviceRendererService);
+    /**
+     * 生成 Pipeline 缓存键，用于判断是否需要重新创建 Pipeline
+     * 包含所有影响 Pipeline 创建的参数
+     * 注意：当 blend/stencil 禁用时，使用简化的 key 以避免创建重复 Pipeline
+     */
+    private getPipelineKey;
     private createPipeline;
     updateAttributesAndElements(): void;
     /**

package/es/device/DeviceModel.js

@@ -54,6 +54,9 @@ var DeviceModel = class {
     this.destroyed = false;
     this.uniforms = {};
     this.vertexBuffers = [];
+    // Pipeline cache to avoid recreating pipeline on every draw call
+    this.pipelineCache = /* @__PURE__ */ new Map();
+    this.currentPipelineKey = "";
     const { vs, fs, attributes, uniforms, count, elements, diagnosticDerivativeUniformityEnabled } = options;
     this.options = options;
     const diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? "" : this.service["viewportOrigin"] === ViewportOrigin.UPPER_LEFT ? "diagnostic(off,derivative_uniformity);" : "";
@@ -111,6 +114,61 @@ var DeviceModel = class {
     });
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
+    const initialKey = this.getPipelineKey(options);
+    this.pipelineCache.set(initialKey, this.pipeline);
+    this.currentPipelineKey = initialKey;
+  }
+  /**
+   * 生成 Pipeline 缓存键，用于判断是否需要重新创建 Pipeline
+   * 包含所有影响 Pipeline 创建的参数
+   * 注意：当 blend/stencil 禁用时，使用简化的 key 以避免创建重复 Pipeline
+   */
+  getPipelineKey(options, pick) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+    const { primitive = gl.TRIANGLES, depth, cull, blend, stencil } = options;
+    let stencilKey;
+    if (stencil == null ? void 0 : stencil.enable) {
+      stencilKey = [
+        1,
+        // enabled
+        (_a = stencil.mask) != null ? _a : 4294967295,
+        (_c = (_b = stencil.func) == null ? void 0 : _b.cmp) != null ? _c : gl.ALWAYS,
+        (_e = (_d = stencil.func) == null ? void 0 : _d.ref) != null ? _e : 0,
+        (_g = (_f = stencil.func) == null ? void 0 : _f.mask) != null ? _g : 4294967295,
+        (_i = (_h = stencil.opFront) == null ? void 0 : _h.fail) != null ? _i : gl.KEEP,
+        (_k = (_j = stencil.opFront) == null ? void 0 : _j.zfail) != null ? _k : gl.KEEP,
+        (_m = (_l = stencil.opFront) == null ? void 0 : _l.zpass) != null ? _m : gl.KEEP,
+        (_o = (_n = stencil.opBack) == null ? void 0 : _n.fail) != null ? _o : gl.KEEP,
+        (_q = (_p = stencil.opBack) == null ? void 0 : _p.zfail) != null ? _q : gl.KEEP,
+        (_s = (_r = stencil.opBack) == null ? void 0 : _r.zpass) != null ? _s : gl.KEEP
+      ].join(",");
+    } else {
+      stencilKey = "0";
+    }
+    let blendKey;
+    if (blend == null ? void 0 : blend.enable) {
+      blendKey = [
+        1,
+        // enabled
+        (_u = (_t = blend.func) == null ? void 0 : _t.srcRGB) != null ? _u : gl.SRC_ALPHA,
+        (_w = (_v = blend.func) == null ? void 0 : _v.dstRGB) != null ? _w : gl.ONE_MINUS_SRC_ALPHA,
+        (_y = (_x = blend.func) == null ? void 0 : _x.srcAlpha) != null ? _y : gl.SRC_ALPHA,
+        (_A = (_z = blend.func) == null ? void 0 : _z.dstAlpha) != null ? _A : gl.ONE_MINUS_SRC_ALPHA,
+        (_C = (_B = blend.equation) == null ? void 0 : _B.rgb) != null ? _C : gl.FUNC_ADD,
+        (_E = (_D = blend.equation) == null ? void 0 : _D.alpha) != null ? _E : gl.FUNC_ADD
+      ].join(",");
+    } else {
+      blendKey = "0";
+    }
+    const parts = [
+      `primitive:${primitive}`,
+      `pick:${!!pick}`,
+      `depth:${(_F = depth == null ? void 0 : depth.enable) != null ? _F : true}:${(_G = depth == null ? void 0 : depth.func) != null ? _G : gl.LESS}:${(_H = depth == null ? void 0 : depth.mask) != null ? _H : true}`,
+      `cull:${(_I = cull == null ? void 0 : cull.enable) != null ? _I : false}:${(_J = cull == null ? void 0 : cull.face) != null ? _J : gl.BACK}`,
+      `blend:${blendKey}`,
+      `stencil:${stencilKey}`
+    ];
+    return parts.join("|");
   }
   createPipeline(options, pick) {
     var _a;
@@ -213,20 +271,28 @@ var DeviceModel = class {
     } = mergedOptions;
     this.uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(uniforms));
     const { renderPass, currentFramebuffer, width, height } = this.service;
-    this.pipeline = this.createPipeline(mergedOptions, pick);
+    const pipelineKey = this.getPipelineKey(mergedOptions, pick);
+    let cachedPipeline = this.pipelineCache.get(pipelineKey);
+    if (!cachedPipeline) {
+      cachedPipeline = this.createPipeline(mergedOptions, pick);
+      this.pipelineCache.set(pipelineKey, cachedPipeline);
+    }
+    this.pipeline = cachedPipeline;
+    this.currentPipelineKey = pipelineKey;
     const device = this.service["device"];
-    const tmpHeight = device["swapChainHeight"];
-    device["swapChainHeight"] = (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height;
+    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;
+    device.swapChainHeight = tmpHeight;
     renderPass.setPipeline(this.pipeline);
-    if (!isNil(this.pipeline.stencilFuncReference)) {
-      renderPass.setStencilReference(this.pipeline.stencilFuncReference);
+    const extendedPipeline = this.pipeline;
+    if (!isNil(extendedPipeline.stencilFuncReference)) {
+      renderPass.setStencilReference(extendedPipeline.stencilFuncReference);
     }
     renderPass.setVertexInput(
       this.inputLayout,
@@ -262,7 +328,8 @@ var DeviceModel = class {
         if (uniform instanceof DeviceTexture2D) {
           this.uniforms[uniformName] = uniform.get();
         } else if (uniform instanceof DeviceFramebuffer) {
-          this.uniforms[uniformName] = uniform.get()["texture"];
+          const renderTarget = uniform.get();
+          this.uniforms[uniformName] = renderTarget.texture;
         }
       });
       this.program.setUniformsLegacy(this.uniforms);
@@ -283,7 +350,8 @@ var DeviceModel = class {
     (_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.pipeline.destroy();
+    this.pipelineCache.forEach((pipeline) => pipeline.destroy());
+    this.pipelineCache.clear();
     this.destroyed = true;
   }
   initDepthDrawParams({ depth }) {
@@ -381,21 +449,18 @@ var DeviceModel = class {
     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) {
+    const isPrimitiveType = uniformValue === null || typeof uniformValue === "string" || // 包括空字符串
+    typeof uniformValue === "number" || typeof uniformValue === "boolean" || Array.isArray(uniformValue) && typeof uniformValue[0] === "number" || isTypedArray(uniformValue);
+    if (isPrimitiveType || uniformValue !== null && typeof uniformValue === "object" && "resize" in uniformValue) {
       uniforms[`${prefix && prefix + "."}${uniformName}`] = uniformValue;
       return;
     }
     if (isPlainObject(uniformValue)) {
-      Object.keys(uniformValue).forEach((childName) => {
+      const obj = uniformValue;
+      Object.keys(obj).forEach((childName) => {
         this.extractUniformsRecursively(
           childName,
-          // @ts-ignore
-          uniformValue[childName],
+          obj[childName],
           uniforms,
           `${prefix && prefix + "."}${uniformName}`
         );
@@ -403,15 +468,17 @@ var DeviceModel = class {
     }
     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}]`
-          );
-        });
+        if (isPlainObject(child)) {
+          const childObj = child;
+          Object.keys(childObj).forEach((childName) => {
+            this.extractUniformsRecursively(
+              childName,
+              childObj[childName],
+              uniforms,
+              `${prefix && prefix + "."}${uniformName}[${idx}]`
+            );
+          });
+        }
       });
     }
   }

package/lib/device/DeviceModel.d.ts

@@ -13,7 +13,15 @@ export default class DeviceModel implements IModel {
     private indexBuffer;
     private vertexBuffers;
     private bindings;
+    private pipelineCache;
+    private currentPipelineKey;
     constructor(device: Device, options: IModelInitializationOptions, service: DeviceRendererService);
+    /**
+     * 生成 Pipeline 缓存键，用于判断是否需要重新创建 Pipeline
+     * 包含所有影响 Pipeline 创建的参数
+     * 注意：当 blend/stencil 禁用时，使用简化的 key 以避免创建重复 Pipeline
+     */
+    private getPipelineKey;
     private createPipeline;
     updateAttributesAndElements(): void;
     /**

package/lib/device/DeviceModel.js

@@ -64,6 +64,9 @@ var DeviceModel = class {
     this.destroyed = false;
     this.uniforms = {};
     this.vertexBuffers = [];
+    // Pipeline cache to avoid recreating pipeline on every draw call
+    this.pipelineCache = /* @__PURE__ */ new Map();
+    this.currentPipelineKey = "";
     const { vs, fs, attributes, uniforms, count, elements, diagnosticDerivativeUniformityEnabled } = options;
     this.options = options;
     const diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? "" : this.service["viewportOrigin"] === import_g_device_api.ViewportOrigin.UPPER_LEFT ? "diagnostic(off,derivative_uniformity);" : "";
@@ -121,6 +124,61 @@ var DeviceModel = class {
     });
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
+    const initialKey = this.getPipelineKey(options);
+    this.pipelineCache.set(initialKey, this.pipeline);
+    this.currentPipelineKey = initialKey;
+  }
+  /**
+   * 生成 Pipeline 缓存键，用于判断是否需要重新创建 Pipeline
+   * 包含所有影响 Pipeline 创建的参数
+   * 注意：当 blend/stencil 禁用时，使用简化的 key 以避免创建重复 Pipeline
+   */
+  getPipelineKey(options, pick) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+    const { primitive = import_l7_core.gl.TRIANGLES, depth, cull, blend, stencil } = options;
+    let stencilKey;
+    if (stencil == null ? void 0 : stencil.enable) {
+      stencilKey = [
+        1,
+        // enabled
+        (_a = stencil.mask) != null ? _a : 4294967295,
+        (_c = (_b = stencil.func) == null ? void 0 : _b.cmp) != null ? _c : import_l7_core.gl.ALWAYS,
+        (_e = (_d = stencil.func) == null ? void 0 : _d.ref) != null ? _e : 0,
+        (_g = (_f = stencil.func) == null ? void 0 : _f.mask) != null ? _g : 4294967295,
+        (_i = (_h = stencil.opFront) == null ? void 0 : _h.fail) != null ? _i : import_l7_core.gl.KEEP,
+        (_k = (_j = stencil.opFront) == null ? void 0 : _j.zfail) != null ? _k : import_l7_core.gl.KEEP,
+        (_m = (_l = stencil.opFront) == null ? void 0 : _l.zpass) != null ? _m : import_l7_core.gl.KEEP,
+        (_o = (_n = stencil.opBack) == null ? void 0 : _n.fail) != null ? _o : import_l7_core.gl.KEEP,
+        (_q = (_p = stencil.opBack) == null ? void 0 : _p.zfail) != null ? _q : import_l7_core.gl.KEEP,
+        (_s = (_r = stencil.opBack) == null ? void 0 : _r.zpass) != null ? _s : import_l7_core.gl.KEEP
+      ].join(",");
+    } else {
+      stencilKey = "0";
+    }
+    let blendKey;
+    if (blend == null ? void 0 : blend.enable) {
+      blendKey = [
+        1,
+        // enabled
+        (_u = (_t = blend.func) == null ? void 0 : _t.srcRGB) != null ? _u : import_l7_core.gl.SRC_ALPHA,
+        (_w = (_v = blend.func) == null ? void 0 : _v.dstRGB) != null ? _w : import_l7_core.gl.ONE_MINUS_SRC_ALPHA,
+        (_y = (_x = blend.func) == null ? void 0 : _x.srcAlpha) != null ? _y : import_l7_core.gl.SRC_ALPHA,
+        (_A = (_z = blend.func) == null ? void 0 : _z.dstAlpha) != null ? _A : import_l7_core.gl.ONE_MINUS_SRC_ALPHA,
+        (_C = (_B = blend.equation) == null ? void 0 : _B.rgb) != null ? _C : import_l7_core.gl.FUNC_ADD,
+        (_E = (_D = blend.equation) == null ? void 0 : _D.alpha) != null ? _E : import_l7_core.gl.FUNC_ADD
+      ].join(",");
+    } else {
+      blendKey = "0";
+    }
+    const parts = [
+      `primitive:${primitive}`,
+      `pick:${!!pick}`,
+      `depth:${(_F = depth == null ? void 0 : depth.enable) != null ? _F : true}:${(_G = depth == null ? void 0 : depth.func) != null ? _G : import_l7_core.gl.LESS}:${(_H = depth == null ? void 0 : depth.mask) != null ? _H : true}`,
+      `cull:${(_I = cull == null ? void 0 : cull.enable) != null ? _I : false}:${(_J = cull == null ? void 0 : cull.face) != null ? _J : import_l7_core.gl.BACK}`,
+      `blend:${blendKey}`,
+      `stencil:${stencilKey}`
+    ];
+    return parts.join("|");
   }
   createPipeline(options, pick) {
     var _a;
@@ -223,20 +281,28 @@ var DeviceModel = class {
     } = mergedOptions;
     this.uniforms = __spreadValues(__spreadValues({}, this.uniforms), this.extractUniforms(uniforms));
     const { renderPass, currentFramebuffer, width, height } = this.service;
-    this.pipeline = this.createPipeline(mergedOptions, pick);
+    const pipelineKey = this.getPipelineKey(mergedOptions, pick);
+    let cachedPipeline = this.pipelineCache.get(pipelineKey);
+    if (!cachedPipeline) {
+      cachedPipeline = this.createPipeline(mergedOptions, pick);
+      this.pipelineCache.set(pipelineKey, cachedPipeline);
+    }
+    this.pipeline = cachedPipeline;
+    this.currentPipelineKey = pipelineKey;
     const device = this.service["device"];
-    const tmpHeight = device["swapChainHeight"];
-    device["swapChainHeight"] = (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height;
+    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;
+    device.swapChainHeight = tmpHeight;
     renderPass.setPipeline(this.pipeline);
-    if (!isNil(this.pipeline.stencilFuncReference)) {
-      renderPass.setStencilReference(this.pipeline.stencilFuncReference);
+    const extendedPipeline = this.pipeline;
+    if (!isNil(extendedPipeline.stencilFuncReference)) {
+      renderPass.setStencilReference(extendedPipeline.stencilFuncReference);
     }
     renderPass.setVertexInput(
       this.inputLayout,
@@ -272,7 +338,8 @@ var DeviceModel = class {
         if (uniform instanceof import_DeviceTexture2D.default) {
           this.uniforms[uniformName] = uniform.get();
         } else if (uniform instanceof import_DeviceFramebuffer.default) {
-          this.uniforms[uniformName] = uniform.get()["texture"];
+          const renderTarget = uniform.get();
+          this.uniforms[uniformName] = renderTarget.texture;
         }
       });
       this.program.setUniformsLegacy(this.uniforms);
@@ -293,7 +360,8 @@ var DeviceModel = class {
     (_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.pipeline.destroy();
+    this.pipelineCache.forEach((pipeline) => pipeline.destroy());
+    this.pipelineCache.clear();
     this.destroyed = true;
   }
   initDepthDrawParams({ depth }) {
@@ -391,21 +459,18 @@ var DeviceModel = class {
     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) {
+    const isPrimitiveType = uniformValue === null || typeof uniformValue === "string" || // 包括空字符串
+    typeof uniformValue === "number" || typeof uniformValue === "boolean" || Array.isArray(uniformValue) && typeof uniformValue[0] === "number" || isTypedArray(uniformValue);
+    if (isPrimitiveType || uniformValue !== null && typeof uniformValue === "object" && "resize" in uniformValue) {
       uniforms[`${prefix && prefix + "."}${uniformName}`] = uniformValue;
       return;
     }
     if (isPlainObject(uniformValue)) {
-      Object.keys(uniformValue).forEach((childName) => {
+      const obj = uniformValue;
+      Object.keys(obj).forEach((childName) => {
         this.extractUniformsRecursively(
           childName,
-          // @ts-ignore
-          uniformValue[childName],
+          obj[childName],
           uniforms,
           `${prefix && prefix + "."}${uniformName}`
         );
@@ -413,15 +478,17 @@ var DeviceModel = class {
     }
     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}]`
-          );
-        });
+        if (isPlainObject(child)) {
+          const childObj = child;
+          Object.keys(childObj).forEach((childName) => {
+            this.extractUniformsRecursively(
+              childName,
+              childObj[childName],
+              uniforms,
+              `${prefix && prefix + "."}${uniformName}[${idx}]`
+            );
+          });
+        }
       });
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.23.2",
+  "version": "2.23.3-beta.1",
   "description": "",
   "license": "MIT",
   "author": "https://github.com/orgs/antvis/people",
@@ -16,11 +16,11 @@
     "@antv/g-device-api": "^1.6.4",
     "@babel/runtime": "^7.7.7",
     "regl": "1.6.1",
-    "@antv/l7-core": "2.23.2",
-    "@antv/l7-utils": "2.23.2"
+    "@antv/l7-core": "2.23.3-beta.1",
+    "@antv/l7-utils": "2.23.3-beta.1"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "^2.23.2"
+    "@antv/l7-test-utils": "^2.23.3-beta.1"
   },
   "publishConfig": {
     "access": "public",