chore: 移除无效的blend,mask代码

dev-demos/features/point/demos/icons.tsx

@@ -51,6 +51,7 @@ export default () => {
         .active(false)
         .size(20);
       scene.addLayer(imageLayer);
+     
 
       setTimeout(() => {
         imageLayer.shape('02');

dev-demos/features/point/pointCircle.md

@@ -22,8 +22,10 @@ export default () => {
             )
                 .then((res) => res.text())
                 .then((data) => {
-                    const pointLayer = new PointLayer({})
-                        .source(data.slice(0, 1000), {
+                    const pointLayer = new PointLayer({
+                        blend:'additive'
+                    })
+                        .source(data, {
                             parser: {
                                 type: 'csv',
                                 x: 'Longitude',
@@ -53,10 +55,13 @@ export default () => {
                             strokeWidth: 0,
                             stroke: '#fff',
                         });
-                    pointLayer.on('mousemove',(e)=>{
-                        console.log(e);
-                    })
                     scene.addLayer(pointLayer);
+                    //  let i =0;
+                    // setInterval(() => {
+                    //     i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal');
+
+                    // },20)
+            
 
                 },
                 )

packages/core/src/services/layer/ILayerService.ts

@@ -21,6 +21,7 @@ import {
   IBlendOptions,
   IModel,
   IModelInitializationOptions,
+  IStencilOptions,
 } from '../renderer/IModel';
 import {
   IMultiPassRenderer,
@@ -88,6 +89,8 @@ export interface ILayerModelInitializationOptions {
 export interface ILayerModel {
   render(): void;
   renderUpdate?(): void;
+  getBlend(): Partial<IBlendOptions>;
+  getStencil(): Partial<IStencilOptions>;
   getUninforms(): IModelUniform;
   getDefaultStyle(): unknown;
   getAnimateUniforms(): IModelUniform;

packages/core/src/services/renderer/IModel.ts

@@ -26,6 +26,35 @@ export interface IBlendOptions {
   // gl.blendColor
   color: [number, number, number, number];
 }
+export interface IStencilOptions {
+  // gl.enable(gl.STENCIL_TEST)
+  enable: boolean;
+  // gl.stencilMask
+  mask: number;
+  func: {
+    cmp:
+      | gl.NEVER
+      | gl.ALWAYS
+      | gl.LESS
+      | gl.LEQUAL
+      | gl.GREATER
+      | gl.GEQUAL
+      | gl.EQUAL
+      | gl.NOTEQUAL;
+    ref: number;
+    mask: number;
+  };
+  opFront: {
+    fail: stencilOp;
+    zfail: stencilOp;
+    zpass: stencilOp;
+  };
+  opBack: {
+    fail: stencilOp;
+    zfail: stencilOp;
+    zpass: stencilOp;
+  };
+}
 type stencilOp =
   | gl.ZERO
   | gl.KEEP
@@ -185,35 +214,7 @@ export interface IModelInitializationOptions {
   /**
    * stencil
    */
-  stencil?: Partial<{
-    // gl.enable(gl.STENCIL_TEST)
-    enable: boolean;
-    // gl.stencilMask
-    mask: number;
-    func: {
-      cmp:
-        | gl.NEVER
-        | gl.ALWAYS
-        | gl.LESS
-        | gl.LEQUAL
-        | gl.GREATER
-        | gl.GEQUAL
-        | gl.EQUAL
-        | gl.NOTEQUAL;
-      ref: number;
-      mask: number;
-    };
-    opFront: {
-      fail: stencilOp;
-      zfail: stencilOp;
-      zpass: stencilOp;
-    };
-    opBack: {
-      fail: stencilOp;
-      zfail: stencilOp;
-      zpass: stencilOp;
-    };
-  }>;
+  stencil?: Partial<IStencilOptions>;
 
   /**
    * cull
@@ -236,7 +237,9 @@ export interface IModelDrawOptions {
   };
   elements?: IElements;
 
-  blend?: IBlendOptions;
+  blend?: Partial<IBlendOptions>;
+
+  stencil?: Partial<IStencilOptions>;
 }
 
 /**

packages/layers/src/Geometry/models/billboard.ts

@@ -6,7 +6,6 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IGeometryLayerStyleOptions } from '../../core/interface';
 import planeFrag from '../shaders/billboard_frag.glsl';
@@ -104,8 +103,6 @@ export default class BillBoardModel extends BaseModel {
       triangulation: this.planeGeometryTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: true },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/Geometry/models/plane.ts

@@ -8,7 +8,6 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { Version } from '@antv/l7-maps';
-import { getMask } from '@antv/l7-utils';
 // import { mat4, vec3 } from 'gl-matrix';
 import BaseModel from '../../core/BaseModel';
 import { IGeometryLayerStyleOptions } from '../../core/interface';
@@ -158,8 +157,7 @@ export default class PlaneModel extends BaseModel {
       triangulation: this.planeGeometryTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: true },
-      stencil: getMask(mask, maskInside),
-      blend: this.getBlend(),
+
       cull: {
         enable: true,
         face: gl.BACK, // gl.FRONT | gl.BACK;

packages/layers/src/core/BaseLayer.ts

@@ -857,7 +857,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     this.updateLayerConfig({
       blend: type,
     });
-    this.layerModelNeedUpdate = true;
+    // this.layerModelNeedUpdate = true;
     this.reRender();
     return this;
   }
@@ -1364,6 +1364,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       model.draw(
         {
           uniforms: this.layerModel.getUninforms(),
+          blend: this.layerModel.getBlend(),
+          stencil: this.layerModel.getStencil(),
         },
         isPicking,
       );

packages/layers/src/core/BaseModel.ts

@@ -20,6 +20,7 @@ import {
   IPickingService,
   IRendererService,
   IShaderModuleService,
+  IStencilOptions,
   IStyleAttributeService,
   ITexture2D,
   ITexture2DInitializationOptions,
@@ -27,7 +28,7 @@ import {
   Triangulation,
   TYPES,
 } from '@antv/l7-core';
-import { rgb2arr } from '@antv/l7-utils';
+import { getMask, rgb2arr } from '@antv/l7-utils';
 import { color } from 'd3-color';
 import { isEqual, isNumber, isString } from 'lodash';
 import { BlendTypes } from '../utils/blend';
@@ -501,6 +502,27 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
     const { blend = 'normal' } = this.layer.getLayerConfig();
     return BlendTypes[BlendType[blend]] as IBlendOptions;
   }
+  public getStencil(): Partial<IStencilOptions> {
+    const { mask = false, maskInside = true } = this.layer.getLayerConfig();
+    // TODO 临时处理，后期移除MaskLayer
+    if (this.layer.type === 'MaskLayer') {
+      return {
+        enable: true,
+        mask: 0xff,
+        func: {
+          cmp: gl.ALWAYS,
+          ref: 1,
+          mask: 0xff,
+        },
+        opFront: {
+          fail: gl.REPLACE,
+          zfail: gl.REPLACE,
+          zpass: gl.REPLACE,
+        },
+      };
+    }
+    return getMask(mask, maskInside);
+  }
   public getDefaultStyle(): unknown {
     return {};
   }

packages/layers/src/heatmap/models/grid.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IHeatMapLayerStyleOptions } from '../../core/interface';
 import { HeatmapGridTriangulation } from '../../core/triangulation';
@@ -31,8 +30,6 @@ export default class GridModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'heatmapGrid',
       vertexShader: heatmapGridVert,
@@ -40,7 +37,6 @@ export default class GridModel extends BaseModel {
       triangulation: HeatmapGridTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/heatmap/models/grid3d.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IHeatMapLayerStyleOptions } from '../../core/interface';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
@@ -31,8 +30,6 @@ export default class Grid3DModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'heatmapGrid3d',
       vertexShader: heatmapGrid3dVert,
@@ -40,8 +37,6 @@ export default class Grid3DModel extends BaseModel {
       triangulation: PointExtrudeTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: true },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/heatmap/models/heatmap.ts

@@ -7,12 +7,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import {
-  generateColorRamp,
-  getCullFace,
-  getMask,
-  IColorRamp,
-} from '@antv/l7-utils';
+import { generateColorRamp, getCullFace, IColorRamp } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
@@ -167,8 +162,6 @@ export default class HeatMapModel extends BaseModel {
   }
 
   private buildHeatmapColor(): IModel {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     this.shaderModuleService.registerModule('heatmapColor', {
       vs: heatmapColorVert,
       fs: heatmapColorFrag,
@@ -203,13 +196,11 @@ export default class HeatMapModel extends BaseModel {
       depth: {
         enable: false,
       },
-      blend: this.getBlend(),
       elements: createElements({
         data: [0, 2, 1, 2, 3, 1],
         type: gl.UNSIGNED_INT,
         count: 6,
       }),
-      stencil: getMask(mask, maskInside),
     });
   }
 
@@ -275,8 +266,6 @@ export default class HeatMapModel extends BaseModel {
     });
   }
   private build3dHeatMap() {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const { getViewportSize } = this.rendererService;
     const { width, height } = getViewportSize();
     const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
@@ -329,7 +318,6 @@ export default class HeatMapModel extends BaseModel {
         type: gl.UNSIGNED_INT,
         count: triangulation.indices.length,
       }),
-      stencil: getMask(mask, maskInside),
     });
   }
   private updateStyle() {

packages/layers/src/heatmap/models/hexagon.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IHeatMapLayerStyleOptions } from '../../core/interface';
 import { HeatmapGridTriangulation } from '../../core/triangulation';
@@ -32,8 +31,6 @@ export default class HexagonModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'heatmapHexagon',
       vertexShader: heatmapGridVert,
@@ -41,8 +38,6 @@ export default class HexagonModel extends BaseModel {
       triangulation: HeatmapGridTriangulation,
       depth: { enable: false },
       primitive: gl.TRIANGLES,
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/image/models/image.ts

@@ -6,7 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, isMini } from '@antv/l7-utils';
+import { isMini } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IImageLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -24,9 +24,6 @@ export default class ImageModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IImageLayerStyleOptions;
-
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     this.texture = createTexture2D({
@@ -72,7 +69,6 @@ export default class ImageModel extends BaseModel {
         enable: true,
       },
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/arc.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -183,9 +183,7 @@ export default class ArcModel extends BaseModel {
       fragmentShader: frag,
       triangulation: LineArcTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
       segmentNumber,
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/arc_3d.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -169,9 +169,7 @@ export default class Arc3DModel extends BaseModel {
       vertexShader: vert,
       fragmentShader: frag,
       triangulation: LineArcTriangulation,
-      blend: this.getBlend(),
       segmentNumber,
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/earthArc_3d.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -169,9 +169,7 @@ export default class Arc3DModel extends BaseModel {
       fragmentShader: frag,
       triangulation: LineArcTriangulation,
       depth: { enable: true },
-      blend: this.getBlend(),
       segmentNumber,
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/great_circle.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -126,16 +126,12 @@ export default class GreatCircleModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'lineGreatCircle',
       vertexShader: line_arc2d_vert,
       fragmentShader: line_arc_frag,
       triangulation: LineArcTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/half.ts

@@ -5,7 +5,7 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -107,8 +107,6 @@ export default class LineModel extends BaseModel {
       fragmentShader: frag,
       triangulation: LineTriangulation,
       depth: { enable: depth },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/line.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, LineTriangulation, rgb2arr } from '@antv/l7-utils';
+import { LineTriangulation, rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import {
@@ -194,8 +194,7 @@ export default class LineModel extends BaseModel {
       fragmentShader: frag,
       triangulation: LineTriangulation,
       depth: { enable: depth },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       workerEnabled,
       workerOptions: {
         modelType: 'line' + type,

packages/layers/src/line/models/linearline.ts

@@ -6,7 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
+import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, LinearDir } from '../../core/interface';
@@ -101,8 +101,6 @@ export default class LinearLineModel extends BaseModel {
       fragmentShader: linear_line_frag,
       triangulation: LineTriangulation,
       depth: { enable: depth },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/line/models/simpleLine.ts

@@ -5,7 +5,7 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
@@ -106,9 +106,6 @@ export default class SimpleLineModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as ILineLayerStyleOptions;
-
     const { frag, vert, type } = this.getShaders();
 
     const model = await this.layer.buildLayerModel({
@@ -118,8 +115,7 @@ export default class SimpleLineModel extends BaseModel {
       triangulation: SimpleLineTriangulation,
       primitive: gl.LINES,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       pick: false,
     });
     return [model];

packages/layers/src/mask/models/fill.ts

@@ -28,7 +28,6 @@ export default class MaskModel extends BaseModel {
       fragmentShader: mask_frag,
       triangulation: polygonTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
       stencil: {
         enable: true,
         mask: 0xff,

packages/layers/src/point/models/extrude.ts

@@ -144,7 +144,6 @@ export default class ExtrudeModel extends BaseModel {
       vertexShader: pointExtrudeVert,
       fragmentShader: pointExtrudeFrag,
       triangulation: PointExtrudeTriangulation,
-      blend: this.getBlend(),
       cull: {
         enable: true,
         face: getCullFace(this.mapService.version),

packages/layers/src/point/models/fill.ts

@@ -9,7 +9,7 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask, PointFillTriangulation } from '@antv/l7-utils';
+import { PointFillTriangulation } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface';
@@ -141,8 +141,7 @@ export default class FillModel extends BaseModel {
       fragmentShader: frag,
       triangulation: PointFillTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       workerEnabled,
       workerOptions: {
         modelType: type,

packages/layers/src/point/models/fillmage.ts

@@ -8,7 +8,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getCullFace, getMask } from '@antv/l7-utils';
+import { getCullFace } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface';
@@ -138,16 +138,13 @@ export default class FillImageModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointFillImage',
       vertexShader: pointFillVert,
       fragmentShader: pointFillFrag,
       triangulation: PointFillTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       cull: {
         enable: true,
         face: getCullFace(this.mapService.version),

packages/layers/src/point/models/image.ts

@@ -6,7 +6,6 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
@@ -93,9 +92,6 @@ export default class ImageModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointImage',
       vertexShader: pointImageVert,
@@ -103,8 +99,6 @@ export default class ImageModel extends BaseModel {
       triangulation: PointImageTriangulation,
       depth: { enable: false },
       primitive: gl.POINTS,
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
 
     return [model];

packages/layers/src/point/models/normal.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
@@ -41,8 +40,6 @@ export default class NormalModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.layer.triangulation = PointTriangulation;
 
     const model = await this.layer.buildLayerModel({
@@ -52,8 +49,7 @@ export default class NormalModel extends BaseModel {
       triangulation: PointTriangulation,
       depth: { enable: false },
       primitive: gl.POINTS,
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       pick: false,
     });
     return [model];

packages/layers/src/point/models/radar.ts

@@ -9,7 +9,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface';
@@ -60,17 +59,12 @@ export default class RadarModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointRadar',
       vertexShader: pointFillVert,
       fragmentShader: pointFillFrag,
       triangulation: PointFillTriangulation,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/point/models/simplePoint.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
@@ -97,8 +96,6 @@ export default class SimplePointModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.layer.triangulation = PointTriangulation;
 
     const model = await this.layer.buildLayerModel({
@@ -108,8 +105,6 @@ export default class SimplePointModel extends BaseModel {
       triangulation: PointTriangulation,
       depth: { enable: false },
       primitive: gl.POINTS,
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/point/models/text.ts

@@ -6,12 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import {
-  boundsContains,
-  calculateCentroid,
-  getMask,
-  padBounds,
-} from '@antv/l7-utils';
+import { boundsContains, calculateCentroid, padBounds } from '@antv/l7-utils';
 import { isEqual, isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
@@ -200,8 +195,6 @@ export default class TextModel extends BaseModel {
       fragmentShader: textFrag,
       triangulation: TextTriangulation.bind(this),
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }
@@ -568,8 +561,6 @@ export default class TextModel extends BaseModel {
   }
 
   private async reBuildModel() {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.filterGlyphs();
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointText',
@@ -577,8 +568,6 @@ export default class TextModel extends BaseModel {
       fragmentShader: textFrag,
       triangulation: TextTriangulation.bind(this),
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     // TODO 渲染流程待修改
     this.layer.models = [model];

packages/layers/src/polygon/models/extrude.ts

@@ -5,7 +5,7 @@ import {
   IModel,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
@@ -99,16 +99,12 @@ export default class ExtrudeModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-
     const { frag, vert, type } = this.getShaders();
     const model = await this.layer.buildLayerModel({
       moduleName: type,
       vertexShader: vert,
       fragmentShader: frag,
       triangulation: PolygonExtrudeTriangulation,
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/polygon/models/fill.ts

@@ -6,7 +6,7 @@ import {
   IModel,
   Triangulation,
 } from '@antv/l7-core';
-import { getMask, polygonFillTriangulation } from '@antv/l7-utils';
+import { polygonFillTriangulation } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
@@ -90,8 +90,7 @@ export default class FillModel extends BaseModel {
       triangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
+
       workerEnabled,
       workerOptions: {
         modelType: type,

packages/layers/src/polygon/models/ocean.ts

@@ -7,7 +7,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { Version } from '@antv/l7-maps';
-import { getMask, rgb2arr } from '@antv/l7-utils';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
@@ -47,8 +47,6 @@ export default class OceanModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'polygonOcean',
       vertexShader: ocean_vert,
@@ -56,7 +54,6 @@ export default class OceanModel extends BaseModel {
       triangulation: polygonTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/polygon/models/water.ts

@@ -7,7 +7,6 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { Version } from '@antv/l7-maps';
-import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
@@ -38,8 +37,6 @@ export default class WaterModel extends BaseModel {
   }
 
   public async buildModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
     const model = await this.layer.buildLayerModel({
       moduleName: 'polygonWater',
       vertexShader: water_vert,
@@ -47,7 +44,6 @@ export default class WaterModel extends BaseModel {
       triangulation: polygonTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/raster/models/raster.ts

@@ -5,7 +5,7 @@ import {
   IModel,
   ITexture2D,
 } from '@antv/l7-core';
-import { getDefaultDomain, getMask } from '@antv/l7-utils';
+import { getDefaultDomain } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IRasterLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -59,8 +59,6 @@ export default class RasterModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const parserDataItem = source.data.dataArray[0];
@@ -83,7 +81,6 @@ export default class RasterModel extends BaseModel {
       triangulation: RasterImageTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/raster/models/rasterRgb.ts

@@ -5,7 +5,6 @@ import {
   IModel,
   ITexture2D,
 } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IRasterLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -58,8 +57,6 @@ export default class RasterModel extends BaseModel {
   }
 
   public async initModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const parserDataItem = source.data.dataArray[0];
@@ -80,7 +77,6 @@ export default class RasterModel extends BaseModel {
       triangulation: RasterImageTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/raster/models/rasterTerrainRgb.ts

@@ -6,7 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { getDefaultDomain, getMask } from '@antv/l7-utils';
+import { getDefaultDomain } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IRasterLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -50,9 +50,6 @@ export default class RasterTerrainRGB extends BaseModel {
     };
   }
   public async initModels(): Promise<IModel[]> {
-    const { mask = false, maskInside = true } =
-      this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const imageData = await source.data.images;
@@ -69,8 +66,6 @@ export default class RasterTerrainRGB extends BaseModel {
       triangulation: RasterImageTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      blend: this.getBlend(),
-      stencil: getMask(mask, maskInside),
     });
     return [model];
   }

packages/layers/src/wind/models/wind.ts

@@ -7,7 +7,7 @@ import {
   ITexture2D,
   Point,
 } from '@antv/l7-core';
-import { FrequencyController, getMask } from '@antv/l7-utils';
+import { FrequencyController } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IWindLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -120,7 +120,6 @@ export default class WindModel extends BaseModel {
       triangulation: RasterImageTriangulation,
       primitive: gl.TRIANGLES,
       depth: { enable: false },
-      stencil: getMask(mask, maskInside),
       blend: this.getBlend(),
     });
     this.colorModel = model;

packages/renderer/src/regl/ReglModel.ts

@@ -1,6 +1,7 @@
 import {
   gl,
   IAttribute,
+  IBlendOptions,
   IElements,
   IModel,
   IModelDrawOptions,
@@ -49,8 +50,6 @@ export default class ReglModel implements IModel {
       count,
       elements,
       depth,
-      blend,
-      stencil,
       cull,
       instances,
     } = options;
@@ -74,7 +73,28 @@ export default class ReglModel implements IModel {
       frag: fs,
       uniforms: reglUniforms,
       vert: vs,
-      blend: {},
+      blend: {
+        // @ts-ignore
+        enable: reGl.prop('blend.enable'),
+        // @ts-ignore
+        func: reGl.prop('blend.func'),
+        // @ts-ignore
+        equation: reGl.prop('blend.equation'),
+        // @ts-ignore
+        color: reGl.prop('blend.color'),
+      },
+      stencil: {
+        // @ts-ignore
+        enable: reGl.prop('stencil.enable'),
+        // @ts-ignore
+        mask: reGl.prop('stencil.mask'),
+        // @ts-ignore
+        func: reGl.prop('stencil.func'),
+        // @ts-ignore
+        opFront: reGl.prop('stencil.opFront'),
+        // @ts-ignore
+        opBack: reGl.prop('stencil.opBack'),
+      },
       primitive:
         primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive],
     };
@@ -92,22 +112,10 @@ export default class ReglModel implements IModel {
     }
 
     this.initDepthDrawParams({ depth }, drawParams);
-    this.initBlendDrawParams({ blend }, drawParams);
-    this.initStencilDrawParams({ stencil }, drawParams);
+    // this.initBlendDrawParams({ blend }, drawParams);
+    // this.initStencilDrawParams({ stencil }, drawParams);
     this.initCullDrawParams({ cull }, drawParams);
-
     this.drawCommand = reGl(drawParams);
-
-    if (pick) {
-      const pickDrawParams = cloneDeep(drawParams);
-
-      pickDrawParams.blend = {
-        ...pickDrawParams.blend,
-        enable: false,
-      };
-
-      this.drawPickCommand = reGl(pickDrawParams);
-    }
     this.drawParams = drawParams;
   }
 
@@ -123,15 +131,6 @@ export default class ReglModel implements IModel {
     this.drawParams.elements = (elements as ReglElements).get();
 
     this.drawCommand = this.reGl(this.drawParams);
-    if (this.options.pick) {
-      const pickDrawParams = cloneDeep(this.drawParams);
-      pickDrawParams.blend = {
-        ...pickDrawParams.blend,
-        enable: false,
-      };
-
-      this.drawPickCommand = this.reGl(pickDrawParams);
-    }
   }
 
   public updateAttributes(attributes: { [key: string]: IAttribute }) {
@@ -181,6 +180,7 @@ export default class ReglModel implements IModel {
         | regl.Texture2D
         | number
         | number[]
+        | Partial<IBlendOptions>
         | boolean;
     } = {};
     Object.keys(uniforms).forEach((uniformName: string) => {
@@ -202,16 +202,20 @@ export default class ReglModel implements IModel {
         ).get();
       }
     });
+    // 更新 blend
+    // @ts-ignore
+    reglDrawProps.blend = pick
+      ? this.getBlendDrawParams({
+          blend: { enable: false },
+        })
+      : this.getBlendDrawParams(options);
+
+    // 更新stentil 配置
+    // @ts-ignore
+    reglDrawProps.stencil = this.getStencilDrawParams(options);
+
     // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
-    if (!pick) {
-      this.drawCommand(reglDrawProps);
-    } else {
-      if (this.drawPickCommand) {
-        this.drawPickCommand(reglDrawProps);
-      }
-    }
-    // this.drawCommand(reglDrawProps);
-    // this.drawPickCommand(reglDrawProps);
+    this.drawCommand(reglDrawProps);
   }
 
   public destroy() {
@@ -243,80 +247,70 @@ export default class ReglModel implements IModel {
     }
   }
 
-  /**
-   * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#blending
-   */
-  private initBlendDrawParams(
-    { blend }: Pick<IModelInitializationOptions, 'blend'>,
-    drawParams: regl.DrawConfig,
-  ) {
-    if (blend) {
-      const { enable, func, equation, color = [0, 0, 0, 0] } = blend;
-      // @ts-ignore
-      drawParams.blend = {
-        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,
-      };
-    }
+  private getBlendDrawParams({
+    blend,
+  }: Pick<IModelInitializationOptions, 'blend'>) {
+    const { enable, func, equation, color = [0, 0, 0, 0] } = blend || {};
+    // @ts-ignore
+    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
    */
-  private initStencilDrawParams(
-    { stencil }: Pick<IModelInitializationOptions, 'stencil'>,
-    drawParams: regl.DrawConfig,
-  ) {
-    if (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;
-      drawParams.stencil = {
-        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 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],
+      },
+    };
   }
 
   /**