fix: use stencil.func.ref for each pipeline

__tests__/integration/mask.spec.ts

@@ -4,6 +4,10 @@ const TEST_CASES = [
   {
     name: 'single',
   },
+  {
+    name: 'multi',
+    sleepTime: 2500,
+  },
 ];
 
 describe('Mask Snapshot', () => {

examples/demos/mask/multi.ts

@@ -52,7 +52,7 @@
   });
 
   scene.on('loaded', async () => {
     const colors = [
       '#d73027',
       '#f46d43',
       '#fdae61',
@@ -72,18 +72,6 @@
       )
     ).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 @@
 
     leftLayer.addMask(maskLayer);
 
-    scene.addLayer(baseLayer);
-
     scene.addLayer(leftLayer);
     scene.addLayer(polygonLayer);
     scene.addLayer(maskLayer);

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) => ({