fix: mask layer

dev-demos/features/mask/demos/heatmapgrid.tsx

@@ -1,15 +1,15 @@
 // @ts-ignore
-import { Scene, HeatmapLayer } from '@antv/l7';
+import { HeatmapLayer, Scene } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
 
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-
-      map: new GaodeMap({
+      // renderer: process.env.renderer,
+      map: new (process.env.CI ? Map : GaodeMap)({
         center: [120.165, 30.26],
         pitch: 0,
         zoom: 2,

dev-demos/features/mask/demos/heatmapgrid3d.tsx

@@ -1,15 +1,15 @@
 // @ts-ignore
-import { Scene, HeatmapLayer } from '@antv/l7';
+import { HeatmapLayer, Scene } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Map } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
 
 export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
-
-      map: new GaodeMap({
+      renderer: process.env.renderer,
+      map: new (process.env.CI ? Map : GaodeMap)({
         style: 'light',
         pitch: 56.499,
         center: [114.07737552216226, 22.542656745583486],

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

@@ -100,6 +100,8 @@ export interface ILayerModel {
   initModels(): Promise<IModel[]>;
   needUpdate(): Promise<boolean>;
   clearModels(refresh?: boolean): void;
+
+  prerender(): void;
   render(renderOptions?: Partial<IRenderOptions>): void;
 
   // canvasLayer
@@ -499,6 +501,7 @@ export interface ILayer {
     passes?: Array<string | [string, { [key: string]: unknown }]>,
   ): ILayer;
   renderLayers(): void;
+  prerender(): void;
   render(options?: Partial<IRenderOptions>): ILayer;
 
   renderMultiPass(): any;

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

@@ -141,6 +141,11 @@ export default class LayerService
     this.alreadyInRendering = true;
     this.clear();
 
+    for (const layer of this.layerList) {
+      layer.prerender();
+    }
+
+    // The main render pass, all layers in a whole.
     this.renderService.beginFrame();
     for (const layer of this.layerList) {
       const { enableMask } = layer.getLayerConfig();
@@ -152,7 +157,7 @@ export default class LayerService
         // multiPassRender 不是同步渲染完成的
         await layer.renderMultiPass();
       } else {
-        await layer.render();
+        layer.render();
       }
     }
     this.renderService.endFrame();

packages/layers/src/core/BaseLayer.ts

@@ -779,6 +779,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     this.rendering = false;
   }
 
+  prerender() {}
+
   public render(options: Partial<IRenderOptions> = {}): ILayer {
     if (this.tileLayer) {
       // 瓦片图层执行单独的 render 渲染队列

packages/layers/src/core/BaseModel.ts

@@ -1,4 +1,3 @@
-
 import type {
   IAnimateOption,
   IAttribute,
@@ -25,7 +24,8 @@ import type {
   IStyleAttributeService,
   ITexture2D,
   ITexture2DInitializationOptions,
-  Triangulation} from '@antv/l7-core';
+  Triangulation,
+} from '@antv/l7-core';
 import {
   BlendType,
   lazyInject,
@@ -36,12 +36,12 @@ import {
 import { rgb2arr } from '@antv/l7-utils';
 import { BlendTypes } from '../utils/blend';
 import { getStencil, getStencilMask } from '../utils/stencil';
-import { DefaultUniformStyleType, DefaultUniformStyleValue } from './constant'
-import { MultipleOfFourNumber } from './utils'
 import {
   getCommonStyleAttributeOptions,
   ShaderLocation,
 } from './CommonStyleAttribute';
+import { DefaultUniformStyleType, DefaultUniformStyleValue } from './constant';
+import { MultipleOfFourNumber } from './utils';
 export type styleSingle =
   | number
   | string
@@ -77,7 +77,8 @@ const shaderLocationMap: Record<string, ShaderLocation> = {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default class BaseModel<ChildLayerStyleOptions = {}>
-  implements ILayerModel {
+  implements ILayerModel
+{
   public triangulation: Triangulation;
   public uniformBuffers: IBuffer[] = [];
   public textures: ITexture2D[] = [];
@@ -202,12 +203,16 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
     const commoninfo = this.getCommonUniformsInfo();
     const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
     this.updateStyleUnifoms();
-    const result =  {
+    const result = {
       ...attributeInfo.uniformsOption,
-      ...commoninfo.uniformsOption
-    }
+      ...commoninfo.uniformsOption,
+    };
     //如果是regl渲染 需要在uniform中带上u_texture 暂时用this.rendererService.device判断
-    if(!this.rendererService.hasOwnProperty('device')&&this.textures&&this.textures.length===1){
+    if (
+      !this.rendererService.hasOwnProperty('device') &&
+      this.textures &&
+      this.textures.length === 1
+    ) {
       result['u_texture'] = this.textures[0];
     }
     return result;
@@ -239,6 +244,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   } {
     throw new Error('Method not implemented.');
   }
+  public prerender(): void {}
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public render(renderOptions?: Partial<IRenderOptions>): void {
     throw new Error('Method not implemented.');
@@ -272,19 +278,21 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
     const uniforms: string[] = [];
     // 支持数据映射的类型
     this.layer.enableShaderEncodeStyles.forEach((key: string) => {
-      if (encodeStyleAttribute[key]) { // 配置了数据映射的类型
+      if (encodeStyleAttribute[key]) {
+        // 配置了数据映射的类型
         str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`;
       } else {
         uniforms.push(`  ${DefaultUniformStyleType[key]} u_${key};`);
       }
       let location = shaderLocationMap[key];
-      if(!location&&key==='THETA_OFFSET'){
+      if (!location && key === 'THETA_OFFSET') {
         location = 15;
       }
       str += `
           #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
-          layout(location = ${shaderLocationMap[key]}) in ${DefaultUniformStyleType[key]
-        } a_${key.charAt(0).toUpperCase() + key.slice(1)};
+          layout(location = ${shaderLocationMap[key]}) in ${
+        DefaultUniformStyleType[key]
+      } a_${key.charAt(0).toUpperCase() + key.slice(1)};
         #endif\n
         `;
     });
@@ -301,8 +309,9 @@ ${uniforms.join('\n')}
     this.layer.enableShaderEncodeStyles.forEach((key) => {
       innerStr += `\n
     #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
-      ${DefaultUniformStyleType[key]} ${key}  = a_${key.charAt(0).toUpperCase() + key.slice(1)
-        };
+      ${DefaultUniformStyleType[key]} ${key}  = a_${
+        key.charAt(0).toUpperCase() + key.slice(1)
+      };
     #else
       ${DefaultUniformStyleType[key]} ${key} = u_${key};
     #endif\n
@@ -327,7 +336,9 @@ ${uniforms.join('\n')}
         const keyValue = this.layer.getLayerConfig()[key];
 
         let value =
-          typeof keyValue === 'undefined' ? DefaultUniformStyleValue[key] : keyValue;
+          typeof keyValue === 'undefined'
+            ? DefaultUniformStyleValue[key]
+            : keyValue;
         if (key === 'stroke') {
           value = rgb2arr(value);
         }
@@ -358,19 +369,22 @@ ${uniforms.join('\n')}
     const commonUniforms = this.getCommonUniformsInfo();
     if (attrUniforms.uniformsLength !== 0) {
       this.attributeUnifoms = this.rendererService.createBuffer({
-        data: new Float32Array(MultipleOfFourNumber(attrUniforms.uniformsLength)).fill(0), // 长度需要大于等于 4
+        data: new Float32Array(
+          MultipleOfFourNumber(attrUniforms.uniformsLength),
+        ).fill(0), // 长度需要大于等于 4
         isUBO: true,
       });
       this.uniformBuffers.push(this.attributeUnifoms);
     }
     if (commonUniforms.uniformsLength !== 0) {
       this.commonUnifoms = this.rendererService.createBuffer({
-        data: new Float32Array(MultipleOfFourNumber(commonUniforms.uniformsLength)).fill(0),
+        data: new Float32Array(
+          MultipleOfFourNumber(commonUniforms.uniformsLength),
+        ).fill(0),
         isUBO: true,
       });
       this.uniformBuffers.push(this.commonUnifoms);
     }
-
   }
   // 获取数据映射 uniform 信息
   protected getUniformsBufferInfo(uniformsOption: { [key: string]: any }) {
@@ -380,48 +394,47 @@ ${uniforms.join('\n')}
       if (Array.isArray(value)) {
         uniformsArray.push(...value);
         uniformsLength += value.length;
-      } else if (typeof value === 'number' ) { // 排除纹理
+      } else if (typeof value === 'number') {
+        // 排除纹理
         uniformsArray.push(value);
         uniformsLength += 1;
-      } else if(typeof value ==='boolean') {
+      } else if (typeof value === 'boolean') {
         uniformsArray.push(Number(value));
         uniformsLength += 1;
       }
-    })
+    });
 
     return {
       uniformsOption,
       uniformsLength,
-      uniformsArray
-    }
-
+      uniformsArray,
+    };
   }
-  protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any } } {
+  protected getCommonUniformsInfo(): {
+    uniformsArray: number[];
+    uniformsLength: number;
+    uniformsOption: { [key: string]: any };
+  } {
     return {
       uniformsLength: 0,
       uniformsArray: [],
-      uniformsOption: {}
-    }
+      uniformsOption: {},
+    };
   }
 
   // 更新支持数据映射的uniform
   public updateStyleUnifoms() {
-    const { uniformsArray } = this.getUniformsBufferInfo(this.getStyleAttribute());
+    const { uniformsArray } = this.getUniformsBufferInfo(
+      this.getStyleAttribute(),
+    );
     const { uniformsArray: commonUniformsArray } = this.getCommonUniformsInfo();
     this.attributeUnifoms?.subData({
       offset: 0,
-      data: new Uint8Array(
-        new Float32Array(uniformsArray).buffer,
-      ),
+      data: new Uint8Array(new Float32Array(uniformsArray).buffer),
     });
     this.commonUnifoms?.subData({
       offset: 0,
-      data: new Uint8Array(
-        new Float32Array(commonUniformsArray).buffer,
-      ),
-    }
-    );
-
+      data: new Uint8Array(new Float32Array(commonUniformsArray).buffer),
+    });
   }
-
 }

packages/layers/src/heatmap/index.ts

@@ -12,6 +12,15 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     await this.initLayerModels();
   }
 
+  public prerender() {
+    const shape = this.getModelType();
+    if (shape === 'heatmap') {
+      if (this.layerModel) {
+        this.layerModel.prerender(); // 独立的渲染流程
+      }
+    }
+  }
+
   public renderModels(options: Partial<IRenderOptions> = {}) {
     const shape = this.getModelType();
     if (shape === 'heatmap') {

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

@@ -5,19 +5,11 @@ import type {
   IModel,
   IModelUniform,
   IRenderOptions,
-  ITexture2D} from '@antv/l7-core';
-import {
-  AttributeType,
-  gl,
-  TextureUsage,
+  ITexture2D,
 } from '@antv/l7-core';
-import type {
-  IColorRamp} from '@antv/l7-utils';
-import {
-  generateColorRamp,
-  getCullFace,
-  lodashUtil,
-} from '@antv/l7-utils';
+import { AttributeType, TextureUsage, gl } from '@antv/l7-core';
+import type { IColorRamp } from '@antv/l7-utils';
+import { generateColorRamp, getCullFace, lodashUtil } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
@@ -49,10 +41,8 @@ export default class HeatMapModel extends BaseModel {
   private colorModelUniformBuffer: IBuffer[] = [];
   private heat3DModelUniformBuffer: IBuffer[] = [];
 
-  public render(options: Partial<IRenderOptions>) {
+  public prerender() {
     const { clear, useFramebuffer } = this.rendererService;
-    const { rampColors } =
-      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
     useFramebuffer(this.heatmapFramerBuffer, () => {
       clear({
         color: [0, 0, 0, 0],
@@ -62,6 +52,12 @@ export default class HeatMapModel extends BaseModel {
       });
       this.drawIntensityMode(); // 密度图
     });
+  }
+
+  public render(options: Partial<IRenderOptions>) {
+    const { rampColors } =
+      this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
+
     if (!isEqual(this.preRampColors, rampColors)) {
       this.updateColorTexture();
     }
@@ -413,7 +409,6 @@ export default class HeatMapModel extends BaseModel {
     });
   }
 
-
   private updateColorTexture() {
     const { createTexture2D } = this.rendererService;
     if (this.texture) {