Merge branch 'master' of https://github.com/antvis/L7

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

@@ -136,6 +136,8 @@ export interface ILayer {
    */
 
   threeRenderService?: any;
+
+  getShaderPickStat: () => boolean;
   needPick(type: string): boolean;
   getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
   getContainer(): Container;
@@ -373,6 +375,11 @@ export interface ILayerService {
   clock: Clock;
   alreadyInRendering: boolean;
   sceneService?: any;
+
+  // 控制着色器颜色拾取计算
+  enableShaderPick: () => void;
+  disableShaderPick: () => void;
+  getShaderPickStat: () => boolean;
   add(layer: ILayer): void;
   initLayers(): void;
   startAnimate(): void;
@@ -386,5 +393,6 @@ export interface ILayerService {
   renderLayers(type?: string): void;
   getOESTextureFloat(): boolean;
   isMapDragging(): boolean;
+
   destroy(): void;
 }

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

@@ -25,6 +25,9 @@ export default class LayerService implements ILayerService {
 
   private animateInstanceCount: number = 0;
 
+  // TODO: 是否开启 shader 中的颜色拾取计算
+  private shaderPicking: boolean = true;
+
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -163,6 +166,19 @@ export default class LayerService implements ILayerService {
     return this.mapService.dragging;
   }
 
+  // 控制着色器颜色拾取计算
+  public enableShaderPick() {
+    this.shaderPicking = true;
+  }
+
+  public disableShaderPick() {
+    this.shaderPicking = false;
+  }
+
+  public getShaderPickStat() {
+    return this.shaderPicking;
+  }
+
   private runRender() {
     this.renderLayers();
     this.layerRenderID = $window.requestAnimationFrame(

packages/core/src/shaders/picking.frag.glsl

@@ -1,7 +1,7 @@
 varying vec4 v_PickingResult;
 uniform vec4 u_HighlightColor : [0, 0, 0, 0];
 uniform float u_PickingStage : 0.0;
-uniform float u_Dragging;
+uniform float u_shaderPick;
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0
@@ -44,6 +44,11 @@ vec4 filterPickingColor(vec4 color) {
  */
 vec4 filterColor(vec4 color) {
   // TODO: 过滤多余的 shader 计算
-  // if(u_Dragging > 0.0) return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
+  // return color;
+  if(u_shaderPick < 0.5) {
+    return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
+  } else {
     return filterPickingColor(filterHighlightColor(color));
+  }
+  
 }

packages/core/src/shaders/picking.vert.glsl

@@ -6,6 +6,7 @@ uniform vec4 u_HighlightColor : [0, 0, 0, 0];
 uniform float u_PickingStage : 0.0;
 uniform float u_PickingThreshold : 1.0;
 uniform float u_PickingBuffer: 0.0;
+uniform float u_shaderPick;
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0
@@ -20,6 +21,9 @@ bool isVertexPicked(vec3 vertexColor) {
 }
 
 void setPickingColor(vec3 pickingColor) {
+  if(u_shaderPick < 0.5) {
+    return;
+  }
   // compares only in highlight stage
   v_PickingResult.a = float((u_PickingStage == PICKING_HIGHLIGHT) && isVertexPicked(pickingColor));
 

packages/layers/src/core/BaseLayer.ts

@@ -1009,6 +1009,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     }
   }
 
+  public getShaderPickStat() {
+    return this.layerService.getShaderPickStat();
+  }
+
   /**
    * 继承空方法
    * @param time

packages/layers/src/line/shaders/line_arcmini_frag.glsl

@@ -38,5 +38,4 @@ void main() {
       alpha = clamp(alpha, 0.0, 1.0);
       gl_FragColor.a *= alpha;
   }
-  gl_FragColor = filterColor(gl_FragColor);
 }

packages/layers/src/line/shaders/line_arcmini_vert.glsl

@@ -101,5 +101,4 @@ void main() {
   } else {
     gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
   }
-  setPickingColor(a_PickingColor);
 }

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -79,7 +79,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
           // u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
           u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
           // TODO: 当前地图是否在拖动
-          u_Dragging: Number(this.mapService.dragging),
+          u_shaderPick: Number(layer.getShaderPickStat()),
         });
       });
 

packages/scene/src/ILayerManager.ts

@@ -1,6 +1,8 @@
 import { ILayer } from '@antv/l7-core';
 
 export default interface ILayerManager {
+  enableShaderPick: () => void;
+  diasbleShaderPick: () => void;
   addLayer(layer: ILayer): void;
 
   getLayers(): ILayer[];

packages/scene/src/index.ts

@@ -51,6 +51,9 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
  */
 class Scene
   implements IPostProcessingPassPluggable, IMapController, ILayerManager {
+  public get map() {
+    return this.mapService.map;
+  }
   private sceneService: ISceneService;
   private mapService: IMapService<unknown>;
   private controlService: IControlService;
@@ -153,10 +156,6 @@ class Scene
     }
   }
 
-  public get map() {
-    return this.mapService.map;
-  }
-
   public setBgColor(color: string) {
     this.mapService.setBgColor(color);
   }
@@ -401,6 +400,16 @@ class Scene
       .to(constructor)
       .whenTargetNamed(name);
   }
+  // 资源管理
+
+  // 控制 shader pick 计算
+  public enableShaderPick() {
+    this.layerService.enableShaderPick();
+  }
+
+  public diasbleShaderPick() {
+    this.layerService.disableShaderPick();
+  }
 
   private initComponent(id: string | HTMLDivElement) {
     this.controlService.init(
@@ -419,7 +428,6 @@ class Scene
       this.addControl(new Logo({ position: logoPosition }));
     }
   }
-  // 资源管理
 }
 
 export { Scene };

stories/MapPerformance/components/BigLine.tsx

@@ -21,7 +21,7 @@ export default class PointTest extends React.Component {
         zoom: 5,
       }),
     });
-
+    scene.diasbleShaderPick();
     let address =
       'https://gw.alipayobjects.com/os/bmw-prod/3f2f9284-3fb1-4838-8baa-6ffd06738fcd.csv';
     fetch(address)
@@ -43,6 +43,27 @@ export default class PointTest extends React.Component {
           .shape('arcmini')
           .size(2)
           .color('rgb(13,64,140)')
+          .style({
+            segmentNumber: 30,
+          });
+
+        // lineLayer2
+        const lineLayer2 = new LineLayer({
+          // autoFit: true,
+          blend: 'normal',
+        })
+          .source(data, {
+            parser: {
+              type: 'csv',
+              x: 'f_lon',
+              y: 'f_lat',
+              x1: 't_lon',
+              y1: 't_lat',
+            },
+          })
+          .shape('arc')
+          .size(2)
+          .color('rgb(13,64,140)')
           .style({
             segmentNumber: 30,
           })
@@ -52,9 +73,19 @@ export default class PointTest extends React.Component {
           .active({
             color: '#ff0',
           });
-        // .animate(true)
+        lineLayer2.hide();
+        // scene.addLayer(lineLayer2);
 
         scene.addLayer(lineLayer);
+
+        window.onmousedown = () => {
+          // lineLayer2.hide()
+          lineLayer.show();
+        };
+        window.onmouseup = () => {
+          // lineLayer2.show()
+          lineLayer.hide();
+        };
       });
   }
 

stories/MapPerformance/components/Map.tsx

@@ -145,8 +145,9 @@ export default class PointTest extends React.Component {
     // let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100
     // let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000
     // let address = 'https://gw.alipayobjects.com/os/bmw-prod/2c37f08b-3fe6-4c68-a699-dc15cfc217f1.json' // 50000
+    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000
     let address =
-      'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000
+      'https://gw.alipayobjects.com/os/bmw-prod/577a70fb-fc19-4582-83ed-7cddb7b77645.json'; // 20 0000
     fetch(address)
       .then((res) => res.json())
       .then((data) => {
@@ -168,6 +169,7 @@ export default class PointTest extends React.Component {
         // .animate(true)
         // .active(true);
 
+        scene.diasbleShaderPick();
         scene.on('loaded', () => {
           scene.addLayer(layer);
         });