diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index afec8fcfb2..ac4201dc27 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -136,6 +136,8 @@ export interface ILayer { */ threeRenderService?: any; + + getShaderPickStat: () => boolean; needPick(type: string): boolean; getLayerConfig(): Partial; 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; } diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index f7bd7f5900..25e108acaf 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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( diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index 879e266994..e0be072fb7 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/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 filterPickingColor(filterHighlightColor(color)); + // return color; + if(u_shaderPick < 0.5) { + return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题 + } else { + return filterPickingColor(filterHighlightColor(color)); + } + } diff --git a/packages/core/src/shaders/picking.vert.glsl b/packages/core/src/shaders/picking.vert.glsl index 4a9975d8f8..51d3cbda24 100644 --- a/packages/core/src/shaders/picking.vert.glsl +++ b/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)); diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 64c634de44..03ea58e77d 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1009,6 +1009,10 @@ export default class BaseLayer extends EventEmitter } } + public getShaderPickStat() { + return this.layerService.getShaderPickStat(); + } + /** * 继承空方法 * @param time diff --git a/packages/layers/src/line/shaders/line_arcmini_frag.glsl b/packages/layers/src/line/shaders/line_arcmini_frag.glsl index e8058285c0..5da2fc1b19 100644 --- a/packages/layers/src/line/shaders/line_arcmini_frag.glsl +++ b/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); } \ No newline at end of file diff --git a/packages/layers/src/line/shaders/line_arcmini_vert.glsl b/packages/layers/src/line/shaders/line_arcmini_vert.glsl index af4356601f..b75f076457 100644 --- a/packages/layers/src/line/shaders/line_arcmini_vert.glsl +++ b/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); } diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index 017d41bc61..9ca5708368 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/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()), }); }); diff --git a/packages/scene/src/ILayerManager.ts b/packages/scene/src/ILayerManager.ts index 1cbb01ed05..ea8025f0de 100644 --- a/packages/scene/src/ILayerManager.ts +++ b/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[]; diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 0b7f9df94b..972c0433bb 100644 --- a/packages/scene/src/index.ts +++ b/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; 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 }; diff --git a/stories/MapPerformance/components/BigLine.tsx b/stories/MapPerformance/components/BigLine.tsx index 4fd41d10b2..e1f3f951f9 100644 --- a/stories/MapPerformance/components/BigLine.tsx +++ b/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(); + }; }); } diff --git a/stories/MapPerformance/components/Map.tsx b/stories/MapPerformance/components/Map.tsx index f1e0c14703..70db4791f3 100644 --- a/stories/MapPerformance/components/Map.tsx +++ b/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); });