fix: use stencil.func.ref for each pipeline (#2471)

* fix: use stencil.func.ref for each pipeline * chore: add multi stencil mask example * chore(CI): update snapshots (#2472) Co-authored-by: lvisei <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: lvisei <[email protected]>
antvis · May 16, 2024 · b9f4d02 · b9f4d02
1 parent d403440
commit b9f4d02
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 17 deletions.
diff --git a/__tests__/integration/mask.spec.ts b/__tests__/integration/mask.spec.ts
@@ -4,6 +4,10 @@ const TEST_CASES = [
   {
     name: 'single',
   },
+  {
+    name: 'multi',
+    sleepTime: 2500,
+  },
 ];
 
 describe('Mask Snapshot', () => {

diff --git a/__tests__/integration/snapshots/Mask_multi.png b/__tests__/integration/snapshots/Mask_multi.png
diff --git a/__tests__/integration/snapshots/Point_billboard.png b/__tests__/integration/snapshots/Point_billboard.png
diff --git a/__tests__/integration/snapshots/Point_fill_image.png b/__tests__/integration/snapshots/Point_fill_image.png
diff --git a/__tests__/integration/snapshots/Point_text.png b/__tests__/integration/snapshots/Point_text.png
diff --git a/examples/demos/mask/multi.ts b/examples/demos/mask/multi.ts
@@ -72,18 +72,6 @@ export function MapRender(options: RenderDemoOptions) {
       )
     ).json();
 
-    // 影像地图图层
-    const baseLayer = new RasterLayer({ zIndex: -1 }).source(
-      'https://www.google.com/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
-      {
-        parser: {
-          type: 'rasterTile',
-          tileSize: 256,
-          zoomOffset: 0,
-        },
-      },
-    );
-
     const polygonLayer = new PolygonLayer({
       visible: true,
       name: 'china',
@@ -131,8 +119,6 @@ export function MapRender(options: RenderDemoOptions) {
 
     leftLayer.addMask(maskLayer);
 
-    scene.addLayer(baseLayer);
-
     scene.addLayer(leftLayer);
     scene.addLayer(polygonLayer);
     scene.addLayer(maskLayer);

diff --git a/packages/renderer/src/device/DeviceModel.ts b/packages/renderer/src/device/DeviceModel.ts
@@ -43,7 +43,7 @@ import {
   stencilFuncMap,
   stencilOpMap,
 } from './constants';
-const { isPlainObject, isTypedArray } = lodashUtil;
+const { isPlainObject, isTypedArray, isNil } = lodashUtil;
 
 export default class DeviceModel implements IModel {
   private destroyed: boolean = false;
@@ -156,7 +156,7 @@ export default class DeviceModel implements IModel {
     const stencilParams = this.getStencilDrawParams({ stencil });
     const stencilEnabled = !!(stencilParams && stencilParams.enable);
 
-    return this.device.createRenderPipeline({
+    const pipeline = this.device.createRenderPipeline({
       // return this.service.renderCache.createRenderPipeline({
       inputLayout: this.inputLayout,
       program: this.program,
@@ -219,6 +219,14 @@ export default class DeviceModel implements IModel {
         },
       },
     });
+
+    // Save stencil reference on pipeline for later use.
+    if (stencilEnabled && !isNil(stencil?.func?.ref)) {
+      // @ts-ignore
+      pipeline.stencilFuncReference = stencil.func.ref;
+    }
+
+    return pipeline;
   }
 
   updateAttributesAndElements() {}
@@ -285,7 +293,11 @@ export default class DeviceModel implements IModel {
     device['swapChainHeight'] = tmpHeight;
 
     renderPass.setPipeline(this.pipeline);
-    renderPass.setStencilReference(1);
+    // @ts-ignore
+    if (!isNil(this.pipeline.stencilFuncReference)) {
+      // @ts-ignore
+      renderPass.setStencilReference(this.pipeline.stencilFuncReference);
+    }
     renderPass.setVertexInput(
       this.inputLayout,
       this.vertexBuffers.map((buffer) => ({