From 42702c60a3543ec09e4d3836d5aaad070ef8bcb0 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Wed, 1 Dec 2021 20:07:15 +0800 Subject: [PATCH] Shihuidev (#857) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: update version 2.6.0 -> 2.6.1 * feat: 增加着色器的拾取计算控制、完善 arcmini --- lerna.json | 2 +- packages/component/package.json | 6 ++-- packages/core/package.json | 4 +-- .../core/src/services/layer/ILayerService.ts | 8 +++++ .../core/src/services/layer/LayerService.ts | 16 +++++++++ packages/core/src/shaders/picking.frag.glsl | 11 ++++-- packages/core/src/shaders/picking.vert.glsl | 4 +++ packages/l7/package.json | 14 ++++---- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 ++--- packages/layers/src/core/BaseLayer.ts | 4 +++ .../src/line/shaders/line_arcmini_frag.glsl | 1 - .../src/line/shaders/line_arcmini_vert.glsl | 1 - .../layers/src/plugins/ShaderUniformPlugin.ts | 2 +- packages/map/package.json | 4 +-- packages/maps/package.json | 8 ++--- packages/mini/package.json | 12 +++---- packages/renderer/package.json | 4 +-- packages/scene/package.json | 14 ++++---- packages/scene/src/ILayerManager.ts | 2 ++ packages/scene/src/index.ts | 18 +++++++--- packages/source/package.json | 6 ++-- packages/three/package.json | 8 ++--- packages/utils/package.json | 2 +- stories/MapPerformance/components/BigLine.tsx | 35 +++++++++++++++++-- stories/MapPerformance/components/Map.tsx | 4 ++- 26 files changed, 139 insertions(+), 61 deletions(-) diff --git a/lerna.json b/lerna.json index 0c962a7af4..c0d1491ac6 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.6.0", + "version": "2.6.1", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 57ec79e198..faca8d4418 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index 43c1a11fba..4a203a19ad 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,7 +24,7 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "ajv": "^6.10.2", "element-resize-event": "^3.0.3", 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/l7/package.json b/packages/l7/package.json index eb30ce17b2..f5fe56b105 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.6.0", + "version": "2.6.1", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,12 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.6.0", - "@antv/l7-core": "^2.6.0", - "@antv/l7-layers": "^2.6.0", - "@antv/l7-maps": "^2.6.0", - "@antv/l7-scene": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-component": "^2.6.1", + "@antv/l7-core": "^2.6.1", + "@antv/l7-layers": "^2.6.1", + "@antv/l7-maps": "^2.6.1", + "@antv/l7-scene": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index a08589d424..85e002e208 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.6.0'; +const version = '2.6.1'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index f8d5f37986..65548c2caf 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.6.0", + "version": "2.6.1", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -24,9 +24,9 @@ "license": "ISC", "dependencies": { "@antv/geo-coord": "^1.0.8", - "@antv/l7-core": "^2.6.0", - "@antv/l7-source": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-source": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", 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/map/package.json b/packages/map/package.json index 1815452d85..a674c9b33f 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.6.0", + "version": "2.6.1", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.6.0", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/maps/package.json b/packages/maps/package.json index 88409b9a0f..85fc45fd41 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -27,9 +27,9 @@ "license": "ISC", "dependencies": { "@amap/amap-jsapi-loader": "^0.0.3", - "@antv/l7-core": "^2.6.0", - "@antv/l7-map": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-map": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/mini/package.json b/packages/mini/package.json index d245d0278d..b0bd97521b 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.6.0", + "version": "2.6.1", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,11 +25,11 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-core": "^2.6.0", - "@antv/l7-layers": "^2.6.0", - "@antv/l7-maps": "^2.6.0", - "@antv/l7-scene": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-layers": "^2.6.1", + "@antv/l7-maps": "^2.6.1", + "@antv/l7-scene": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index c5f2291039..68f00af277 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.6.0", + "@antv/l7-core": "^2.6.1", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "l7regl": "^0.0.16", diff --git a/packages/scene/package.json b/packages/scene/package.json index 0b77b28701..eb9a1c277e 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.6.0", - "@antv/l7-core": "^2.6.0", - "@antv/l7-layers": "^2.6.0", - "@antv/l7-maps": "^2.6.0", - "@antv/l7-renderer": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-component": "^2.6.1", + "@antv/l7-core": "^2.6.1", + "@antv/l7-layers": "^2.6.1", + "@antv/l7-maps": "^2.6.1", + "@antv/l7-renderer": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", 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/packages/source/package.json b/packages/source/package.json index 0ecf6b0a32..29bf75522e 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,8 +26,8 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.6.0", - "@antv/l7-utils": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-utils": "^2.6.1", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/three/package.json b/packages/three/package.json index e7e80d27cd..24083cb784 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.6.0", + "version": "2.6.1", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.6.0", - "@antv/l7-layers": "^2.6.0", - "@antv/l7-scene": "^2.6.0", + "@antv/l7-core": "^2.6.1", + "@antv/l7-layers": "^2.6.1", + "@antv/l7-scene": "^2.6.1", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "reflect-metadata": "^0.1.13", diff --git a/packages/utils/package.json b/packages/utils/package.json index dfc2efba6d..dabd4c35ac 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.6.0", + "version": "2.6.1", "description": "", "main": "lib/index.js", "module": "es/index.js", 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); });