From a5039ed596e0862e6ff76eeda19971a10e16bbd6 Mon Sep 17 00:00:00 2001 From: shihui Date: Tue, 15 Feb 2022 15:14:13 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98?= =?UTF-8?q?=E7=BD=91=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/point_layer/column.zh.md | 20 ++++++++++ docs/common/layer/layer_style.md | 62 +++++++++++++++---------------- docs/common/layer/options.md | 4 +- 3 files changed, 54 insertions(+), 32 deletions(-) diff --git a/docs/api/point_layer/column.zh.md b/docs/api/point_layer/column.zh.md index a25e613230..178cfb3622 100644 --- a/docs/api/point_layer/column.zh.md +++ b/docs/api/point_layer/column.zh.md @@ -118,4 +118,24 @@ layer.style({ [光标柱图](../../../examples/point/column#column_light) [渐变柱图](../../../examples/point/column#column_linear) +- heightFixed 设置 3D 柱体的高度固定（保持固定的笛卡尔高度而不是等像素高度） + +🌟 3D 柱图在设置 heightFixed 为 true 后柱子的半径也会固定，从 v2.7.12 版本开始支持 + +```javascript +style({ + heightfixed: true, // 默认为 false +}); +``` + +- pickLight 设置 3D 柱体拾取高亮颜色是否支持光照计算 + +🌟 3D 柱图支持通过设置 pickLight 来控制拾取高亮颜色的光照计算，从 v2.7.12 版本开始支持 + +```javascript +style({ + pickLight: true, // 默认为 false +}); +``` + `markdown:docs/common/layer/base.md` diff --git a/docs/common/layer/layer_style.md b/docs/common/layer/layer_style.md index ce598ef4b8..9754a5dd15 100644 --- a/docs/common/layer/layer_style.md +++ b/docs/common/layer/layer_style.md @@ -16,47 +16,47 @@ layer.style({ }); ``` -- 样式数据映射 - 在大多数情况下，用户需要将 source 中传入的数据映射到图层的元素中，以此来达到需要的可视化的效果，比如想要用柱形图表示各地的人口数据，代码可能是这个样子的： +- 样式数据映射🌟 + 在正常情况下，style 的参数会作用到一个图层上的所有图形，如一个 PointLayer 中有十个点，我们设置 opacity = 0.5， 这样十个点的透明度都是 0.5。 + 而在特殊情况下，我们可能需要为每个点分别设置一个透明度，这时候按照原来的方式直接设置 style 方法的 opacity 的值就无法满足需求了，为此我们需要提供特殊的赋值方式。 + 通常我们会根据传入图层的数据为图层的每个图形设置单独的值，因此我们称之为“样式数据映射”。 + 我们支持几种设置 style 中的参数从 source 数据中动态取值的写法。 ```javascript -const population = await getPopulation(); +// 根据数据中的 v 字段的值设置点图层各个点的透明度 +const data = [ + { + lng: 120, + lat: 30, + v: 0.5 + }, + ... +] const layer = new PointLayer() - .source(population) - .shape('cylinder') - .color('#f00') - .size('population'); // population 字段表示数据中的人口值 -scene.addLayer(layer); -``` - -而在一些特殊的业务场景下，我们可能需要将除了 size、color、以外的属性根据数据动态设置，如我们在绘制文本标注的时候需要根据文本的长短来设置偏移量，以保证文本位置的相对固定。在这种情况下，我们就需要使用图层样式数据纹理来完成这一项工作。 - -案例 - -```javascript -const pointLayer = new PointLayer({}) .source(data, { parser: { - type: 'json', - x: 'j', - y: 'w', - }, + x: 'lng', + y: 'lat' + } }) - .shape('m', 'text') - .size(12) - .color('w', ['#0e0030', '#0e0030', '#0e0030']) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直] - fontFamily, - iconfont: true, - textAllowOverlap: true, - }); + .shape('circle') + .color('#f00') + .size({ + // 第一种写法 根据字段从 data 中直接取值 + opacity: 'v'// opacity = 0.5 + + // 第二种写法 根据字段从 data 中取值，同时通过回调函数赋值（通常会在回调函数中写业务逻辑） + opacity: ['v', (v: number) => v] // opacity = 0.5 + + // 第三种写法 根据字段取值，然后映射到设置的值区间 + opaicty: ['v', [0.1, 0.5]] // opacity 的值字啊 0.1 ～ 0.5 之间 + }); +scene.addLayer(layer); ``` [在线案例](../../examples/point/text#styleMap) -从 L7 2.5 开始，各图层样式将逐步支持样式数据映射 +从 L7 2.5 开始，各图层样式将逐步支持样式数据映射，目前支持样式数据映射的 style 参数如下： | layer 类型/shape | 支持的样式字段 | 备注 | | ---------------------- | ---------------------------------------------------- | --------------------------------- | diff --git a/docs/common/layer/options.md b/docs/common/layer/options.md index 653ea3c074..19cd3f69a2 100644 --- a/docs/common/layer/options.md +++ b/docs/common/layer/options.md @@ -92,4 +92,6 @@ layer 初始化完成之后，地图是否自动缩放到图层范围 是否在 maskLayer 显示 - true 在内部显示 -- false 在外部显示 +- + + From 1efbe605e5aa6c4ba9da5826cd2484bf68f9c435 Mon Sep 17 00:00:00 2001 From: shihui Date: Tue, 15 Feb 2022 15:17:08 +0800 Subject: [PATCH 2/3] style: lint style --- docs/api/point_layer/column.zh.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/point_layer/column.zh.md b/docs/api/point_layer/column.zh.md index 178cfb3622..61dcbc8fc5 100644 --- a/docs/api/point_layer/column.zh.md +++ b/docs/api/point_layer/column.zh.md @@ -120,7 +120,7 @@ layer.style({ - heightFixed 设置 3D 柱体的高度固定（保持固定的笛卡尔高度而不是等像素高度） -🌟 3D 柱图在设置 heightFixed 为 true 后柱子的半径也会固定，从 v2.7.12 版本开始支持 +🌟 3D 柱图在设置 heightFixed 为 true 后柱子的半径也会固定，从 v2.7.12 版本开始支持 ```javascript style({ @@ -130,7 +130,7 @@ style({ - pickLight 设置 3D 柱体拾取高亮颜色是否支持光照计算 -🌟 3D 柱图支持通过设置 pickLight 来控制拾取高亮颜色的光照计算，从 v2.7.12 版本开始支持 +🌟 3D 柱图支持通过设置 pickLight 来控制拾取高亮颜色的光照计算，从 v2.7.12 版本开始支持 ```javascript style({ From 7b91e55ce533a7d42bea73781489474fba644753 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Tue, 15 Feb 2022 16:58:57 +0800 Subject: [PATCH 3/3] Shihui (#963) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序 * style: lint style * feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化） * feat: polygon extrude 模式支持配置固定高度 * style: lint style * feat: 优化后处理 bloom 的效果 * feat: 修改交替绘制 bloom 的写法 * style: lint style * feat: 完善 iconService 加载渲染和销毁 * style: lint style * feat: 补全 mapbox 模式下等面积点 * style: lint style * fix: 修复 pointLayer animate 模式 opacity 失效 * style: lint style * feat: 拆分 pointLayer 的 shader * style: lint sytle * feat: 拆分 lineLayer 的 linear 模式 * style: lint style * feat: 优化点击的拾取判断 * style: lint style * feat: 取消圆柱 shader 中的三元表达式、增强健壮性 * feat: 点图层圆柱体支持固定高度配置 heightfixed * feat: 点图层圆柱体支持拾取高亮颜色的光照计算 * style: lint style * style: lint style * feat: 拆分 lintLayer line 模式下的 dash line * style: lint style * feat: lineLayer simpleline 的 linear shader 代码拆分 * style: lint style * feat: 拆分 lineLayer arcLine linear shader 代码 * style: line style * feat: lineLayer arc line 在 shader 中移除 linear 部分计算 * feat: 拆分 lineLayer arc dash 虚线的 shader 代码 * style: lint style * feat: 拆分 lineLayer arc3d linear 部分的 shader 代码 --- packages/layers/src/line/models/arc.ts | 50 ++++- packages/layers/src/line/models/arc_3d.ts | 39 +++- packages/layers/src/line/models/line.ts | 7 +- packages/layers/src/line/models/simpleLine.ts | 34 ++- .../src/line/shaders/dash/arc_dash_frag.glsl | 28 +++ .../src/line/shaders/dash/arc_dash_vert.glsl | 149 +++++++++++++ .../src/line/shaders/line_arc_3d_frag.glsl | 15 +- .../src/line/shaders/line_arc_frag.glsl | 26 +-- .../src/line/shaders/line_arc_vert.glsl | 20 -- .../shaders/linear/arc3d_linear_frag.glsl | 47 ++++ .../shaders/linear/arc3d_linear_vert.glsl | 207 ++++++++++++++++++ .../line/shaders/linear/arc_linear_frag.glsl | 38 ++++ .../line/shaders/linear/arc_linear_vert.glsl | 138 ++++++++++++ .../line_linear_frag.glsl} | 0 .../linear/simpleline_linear_frag.glsl | 13 ++ .../src/line/shaders/simpleline_frag.glsl | 23 +- .../src/line/shaders/simpleline_vert.glsl | 8 +- stories/Map/components/amap2demo_arcLine.tsx | 2 +- stories/Map/components/gridTile2.tsx | 2 +- 19 files changed, 739 insertions(+), 107 deletions(-) create mode 100644 packages/layers/src/line/shaders/dash/arc_dash_frag.glsl create mode 100644 packages/layers/src/line/shaders/dash/arc_dash_vert.glsl create mode 100644 packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl create mode 100644 packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl create mode 100644 packages/layers/src/line/shaders/linear/arc_linear_frag.glsl create mode 100644 packages/layers/src/line/shaders/linear/arc_linear_vert.glsl rename packages/layers/src/line/shaders/{frag/linear_frag.glsl => linear/line_linear_frag.glsl} (100%) create mode 100644 packages/layers/src/line/shaders/linear/simpleline_linear_frag.glsl diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index b4cb3f3fd6..4d199ce2e0 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -14,8 +14,15 @@ import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; -import line_arc_frag from '../shaders/line_arc_frag.glsl'; -import line_arc2d_vert from '../shaders/line_arc_vert.glsl'; +// arc dash line +import arc_dash_frag from '../shaders/dash/arc_dash_frag.glsl'; +import arc_dash_vert from '../shaders/dash/arc_dash_vert.glsl'; +// arc normal line +import arc_line_frag from '../shaders/line_arc_frag.glsl'; +import arc_line_vert from '../shaders/line_arc_vert.glsl'; +// arc linear line +import arc_linear_frag from '../shaders/linear/arc_linear_frag.glsl'; +import arc_linear_vert from '../shaders/linear/arc_linear_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, @@ -116,7 +123,6 @@ export default class ArcModel extends BaseModel { public getAnimateUniforms(): IModelUniform { const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; - // console.log('animateOption', animateOption) return { u_aimate: this.animateOption2Array(animateOption as IAnimateOption), u_time: this.layer.getLayerAnimateTime(), @@ -136,18 +142,48 @@ export default class ArcModel extends BaseModel { this.iconService.off('imageUpdate', this.updateTexture); } + public getShaders(): { frag: string; vert: string; type: string } { + const { + sourceColor, + targetColor, + lineType, + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + if (lineType === 'dash') { + return { + frag: arc_dash_frag, + vert: arc_dash_vert, + type: 'dash', + }; + } + + if (sourceColor && targetColor) { + // 分离 linear 功能 + return { + frag: arc_linear_frag, + vert: arc_linear_vert, + type: 'linear', + }; + } else { + return { + frag: arc_line_frag, + vert: arc_line_vert, + type: 'normal', + }; + } + } + public buildModels(): IModel[] { const { segmentNumber = 30, mask = false, maskInside = true, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; - + const { frag, vert, type } = this.getShaders(); return [ this.layer.buildLayerModel({ - moduleName: 'arc2dline', - vertexShader: line_arc2d_vert, - fragmentShader: line_arc_frag, + moduleName: 'arc2dline' + type, + vertexShader: vert, + fragmentShader: frag, triangulation: LineArcTriangulation, depth: { enable: false }, blend: this.getBlend(), diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 48ecd53ee5..e047fcc436 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -14,8 +14,13 @@ import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import { EARTH_RADIUS } from '../../earth/utils'; -import line_arc_frag from '../shaders/line_arc_3d_frag.glsl'; -import line_arc_vert from '../shaders/line_arc_3d_vert.glsl'; +// arc3d line layer +import arc3d_line_frag from '../shaders/line_arc_3d_frag.glsl'; +import arc3d_line_vert from '../shaders/line_arc_3d_vert.glsl'; +// arc3d linear layer +import arc3d_linear_frag from '../shaders/linear/arc3d_linear_frag.glsl'; +import arc3d_linear_vert from '../shaders/linear/arc3d_linear_vert.glsl'; + const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, @@ -132,17 +137,41 @@ export default class Arc3DModel extends BaseModel { this.iconService.off('imageUpdate', this.updateTexture); } + public getShaders(): { frag: string; vert: string; type: string } { + const { + sourceColor, + targetColor, + lineType, + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + + if (sourceColor && targetColor) { + // 分离 linear 功能 + return { + frag: arc3d_linear_frag, + vert: arc3d_linear_vert, + type: 'linear', + }; + } else { + return { + frag: arc3d_line_frag, + vert: arc3d_line_vert, + type: 'normal', + }; + } + } + public buildModels(): IModel[] { const { segmentNumber = 30, mask = false, maskInside = true, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { frag, vert, type } = this.getShaders(); return [ this.layer.buildLayerModel({ - moduleName: 'arc3Dline', - vertexShader: line_arc_vert, - fragmentShader: line_arc_frag, + moduleName: 'arc3Dline' + type, + vertexShader: vert, + fragmentShader: frag, triangulation: LineArcTriangulation, blend: this.getBlend(), segmentNumber, diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 97eac2a6aa..c3768f1706 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -18,11 +18,11 @@ import { LineTriangulation } from '../../core/triangulation'; // dash line shader import line_dash_frag from '../shaders/dash/line_dash_frag.glsl'; import line_dash_vert from '../shaders/dash/line_dash_vert.glsl'; -// other function shaders -import linear_line_frag from '../shaders/frag/linear_frag.glsl'; // basic line shader import line_frag from '../shaders/line_frag.glsl'; import line_vert from '../shaders/line_vert.glsl'; +// other function shaders +import linear_line_frag from '../shaders/linear/line_linear_frag.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, @@ -170,10 +170,9 @@ export default class LineModel extends BaseModel { sourceColor, targetColor, lineType, - dashArray, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; - if (lineType === 'dash' && dashArray) { + if (lineType === 'dash') { return { frag: line_dash_frag, vert: line_dash_vert, diff --git a/packages/layers/src/line/models/simpleLine.ts b/packages/layers/src/line/models/simpleLine.ts index 1e57b78c40..7376336093 100644 --- a/packages/layers/src/line/models/simpleLine.ts +++ b/packages/layers/src/line/models/simpleLine.ts @@ -13,8 +13,10 @@ import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; import { SimpleLineTriangulation } from '../../core/triangulation'; -import line_frag from '../shaders/simpleline_frag.glsl'; -import line_vert from '../shaders/simpleline_vert.glsl'; +// linear simple line shader +import simle_linear_frag from '../shaders/linear/simpleline_linear_frag.glsl'; +import simple_line_frag from '../shaders/simpleline_frag.glsl'; +import simple_line_vert from '../shaders/simpleline_vert.glsl'; export default class SimpleLineModel extends BaseModel { public getUninforms(): IModelUniform { const { @@ -94,17 +96,39 @@ export default class SimpleLineModel extends BaseModel { this.dataTexture?.destroy(); } + public getShaders(): { frag: string; vert: string; type: string } { + const { + sourceColor, + targetColor, + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + if (sourceColor && targetColor) { + // 分离 linear 功能 + return { + frag: simle_linear_frag, + vert: simple_line_vert, + type: 'linear', + }; + } else { + return { + frag: simple_line_frag, + vert: simple_line_vert, + type: 'normal', + }; + } + } + public buildModels(): IModel[] { const { mask = false, maskInside = true, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { frag, vert, type } = this.getShaders(); return [ this.layer.buildLayerModel({ - moduleName: 'simpleline', - vertexShader: line_vert, - fragmentShader: line_frag, + moduleName: 'simpleline' + type, + vertexShader: vert, + fragmentShader: frag, triangulation: SimpleLineTriangulation, primitive: gl.LINES, // gl.LINES gl.TRIANGLES blend: this.getBlend(), diff --git a/packages/layers/src/line/shaders/dash/arc_dash_frag.glsl b/packages/layers/src/line/shaders/dash/arc_dash_frag.glsl new file mode 100644 index 0000000000..5dc0fa13fc --- /dev/null +++ b/packages/layers/src/line/shaders/dash/arc_dash_frag.glsl @@ -0,0 +1,28 @@ + +uniform float u_opacity; + +varying vec4 v_dash_array; +varying vec4 v_color; + +uniform float segmentNumber; + +varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 + +#pragma include "picking" + +void main() { + float opacity = styleMappingMat[0][0]; + float d_distance_ratio = styleMappingMat[3].b; // 当前顶点在弧线中所处的分段比例 + + gl_FragColor = v_color; + gl_FragColor.a *= opacity; + + float flag = 0.; + float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w); + if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) { + flag = 1.; + } + gl_FragColor.a *=flag; + + gl_FragColor = filterColor(gl_FragColor); +} \ No newline at end of file diff --git a/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl b/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl new file mode 100644 index 0000000000..95f7f98f3e --- /dev/null +++ b/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl @@ -0,0 +1,149 @@ + +attribute vec4 a_Color; +attribute vec3 a_Position; +attribute vec4 a_Instance; +attribute float a_Size; +uniform mat4 u_ModelMatrix; +uniform mat4 u_Mvp; +uniform float segmentNumber; +varying vec4 v_color; + + +uniform vec4 u_dash_array: [10.0, 5., 0, 0]; +uniform float u_lineDir: 1.0; +varying vec4 v_dash_array; + +uniform float u_thetaOffset: 0.314; + +uniform float u_opacity: 1.0; +varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元 + +#pragma include "styleMapping" +#pragma include "styleMappingCalOpacity" +#pragma include "styleMappingCalThetaOffset" + +#pragma include "projection" +#pragma include "project" +#pragma include "picking" + +float bezier3(vec3 arr, float t) { + float ut = 1. - t; + return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; +} +vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) { + vec2 center = target - source; + float r = length(center); + float theta = atan(center.y, center.x); + float thetaOffset = arcThetaOffset; + float r2 = r / 2.0 / cos(thetaOffset); + float theta2 = theta + thetaOffset; + vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); + if(u_lineDir == 1.0) { // 正向 + return mid; + } else { // 逆向 + // (mid + vmin)/2 = (s + t)/2 + vec2 vmid = source + target - mid; + return vmid; + } + // return mid; +} +float getSegmentRatio(float index) { + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); +} +vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) { + // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation + vec2 mid = midPoint(source, target, arcThetaOffset); + vec3 x = vec3(source.x, mid.x, target.x); + vec3 y = vec3(source.y, mid.y, target.y); + return vec2(bezier3(x ,t), bezier3(y,t)); +} +vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0; + return offset; +} +vec2 getNormal(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); +} + +void main() { + v_color = a_Color; + + // cal style mapping - 数据纹理映射部分的计算 + styleMappingMat = mat4( + 0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty + 0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA + 0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] + 0.0, 0.0, 0.0, 0.0 // dataset 数据集 + ); + + float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行 + float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列 + float columnWidth = 1.0/columnCount; // 列宽 + float rowHeight = 1.0/rowCount; // 行高 + float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets + float id = a_vertexId; // 第n个顶点 + float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行 + float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列 + + // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... + // 按顺序从 cell 中取值、若没有则自动往下取值 + float textureOffset = 0.0; // 在 cell 中取值的偏移量 + + vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][0] = opacityAndOffset.r; + textureOffset = opacityAndOffset.g; + + vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][1] = thetaOffsetAndOffset.r; + textureOffset = thetaOffsetAndOffset.g; + // cal style mapping - 数据纹理映射部分的计算 + + + vec2 source = a_Instance.rg; // 起始点 + vec2 target = a_Instance.ba; // 终点 + float segmentIndex = a_Position.x; + float segmentRatio = getSegmentRatio(segmentIndex); + + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + + vec2 s = source; + vec2 t = target; + + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + s = unProjCustomCoord(source); + t = unProjCustomCoord(target); + } + float total_Distance = pixelDistance(s, t) / 2.0 * PI; + + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + + + styleMappingMat[3].b = segmentIndex / segmentNumber; + + // styleMappingMat[0][1] - arcThetaOffset + vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); + vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); + // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + //unProjCustomCoord + + vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); + + + // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); + gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); + } else { + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + } + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/line/shaders/line_arc_3d_frag.glsl b/packages/layers/src/line/shaders/line_arc_3d_frag.glsl index 5113150462..b81e7df804 100644 --- a/packages/layers/src/line/shaders/line_arc_3d_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_3d_frag.glsl @@ -22,10 +22,6 @@ varying vec2 v_iconMapUV; uniform float u_time; uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; -uniform float u_linearColor: 0; -uniform vec4 u_sourceColor; -uniform vec4 u_targetColor; - varying mat4 styleMappingMat; #pragma include "picking" @@ -34,18 +30,11 @@ void main() { float opacity = styleMappingMat[0][0]; float animateSpeed = 0.0; // 运动速度 float d_distance_ratio = styleMappingMat[3].g; // 当前点位距离占线总长的比例 + gl_FragColor = v_color; - if(u_linearColor == 1.0) { // 使用渐变颜色 - gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber); - } else { // 使用 color 方法传入的颜色 - gl_FragColor = v_color; - } - - // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)); - // float blur = smoothstep(1.0, u_blur, length(v_normal.xy)); gl_FragColor.a *= opacity; if(u_line_type == LineTypeDash) { - float flag = 0.; + float flag = 0.; float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w); if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) { flag = 1.; diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl index 55b2e8ed69..6711ca6732 100644 --- a/packages/layers/src/line/shaders/line_arc_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_frag.glsl @@ -1,5 +1,4 @@ -#define LineTypeSolid 0.0 -#define LineTypeDash 1.0 + #define Animate 0.0 #define LineTexture 1.0 @@ -23,10 +22,6 @@ varying vec2 v_iconMapUV; varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 -uniform float u_linearColor: 0; -uniform vec4 u_sourceColor; -uniform vec4 u_targetColor; - #pragma include "picking" void main() { @@ -35,24 +30,9 @@ void main() { float d_segmentIndex = styleMappingMat[3].r; // 当前顶点在弧线中所处的分段位置 float d_distance_ratio = styleMappingMat[3].b; // 当前顶点在弧线中所处的分段比例 - // 设置弧线的底色 - if(u_linearColor == 1.0) { // 使用渐变颜色 - gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber); - } else { // 使用 color 方法传入的颜色 - gl_FragColor = v_color; - } + gl_FragColor = v_color; - // float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)); - // float blur = smoothstep(1.0, u_blur, length(v_normal.xy)); gl_FragColor.a *= opacity; - if(u_line_type == LineTypeDash) { - float flag = 0.; - float dashLength = mod(d_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w); - if(dashLength < v_dash_array.x || (dashLength > (v_dash_array.x + v_dash_array.y) && dashLength < v_dash_array.x + v_dash_array.y + v_dash_array.z)) { - flag = 1.; - } - gl_FragColor.a *=flag; - } if(u_aimate.x == Animate && u_line_texture != LineTexture) { animateSpeed = u_time / u_aimate.y; @@ -64,7 +44,7 @@ void main() { } // 当存在贴图时在底色上贴上贴图 - if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture + if(u_line_texture == LineTexture) { // while load texture float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / segmentNumber)); // float arcRadio = smoothstep( 0.0, 1.0, d_distance_ratio); diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index fb013885ee..2cf91c56dc 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -1,5 +1,3 @@ -#define LineTypeSolid 0.0 -#define LineTypeDash 1.0 #define Animate 0.0 #define LineTexture 1.0 @@ -12,12 +10,8 @@ uniform mat4 u_Mvp; uniform float segmentNumber; uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; -// varying vec2 v_normal; -uniform float u_line_type: 0.0; -uniform vec4 u_dash_array: [10.0, 5., 0, 0]; uniform float u_lineDir: 1.0; -varying vec4 v_dash_array; uniform float u_thetaOffset: 0.314; uniform float u_icon_step: 100; @@ -125,20 +119,6 @@ void main() { float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); float d_distance_ratio; - if(u_line_type == LineTypeDash) { - d_distance_ratio = segmentIndex / segmentNumber; - - vec2 s = source; - vec2 t = target; - - if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x - s = unProjCustomCoord(source); - t = unProjCustomCoord(target); - } - float total_Distance = pixelDistance(s, t) / 2.0 * PI; - // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); - } if(u_aimate.x == Animate) { d_distance_ratio = segmentIndex / segmentNumber; diff --git a/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl b/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl new file mode 100644 index 0000000000..fb0516f91e --- /dev/null +++ b/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl @@ -0,0 +1,47 @@ + +#define Animate 0.0 + +uniform float u_opacity; +uniform float u_blur : 0.9; +varying float v_segmentIndex; +uniform float segmentNumber; + + +uniform float u_time; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; + +uniform float u_linearColor: 0; +uniform vec4 u_sourceColor; +uniform vec4 u_targetColor; + +varying mat4 styleMappingMat; + +#pragma include "picking" + +void main() { + float opacity = styleMappingMat[0][0]; + float animateSpeed = 0.0; // 运动速度 + float d_distance_ratio = styleMappingMat[3].g; // 当前点位距离占线总长的比例 + + gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber); + + gl_FragColor.a *= opacity; + + if(u_aimate.x == Animate) { + animateSpeed = u_time / u_aimate.y; + float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); + + alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; + // alpha = smoothstep(0., 1., alpha); + alpha = clamp(alpha, 0.0, 1.0); + gl_FragColor.a *= alpha; + + // u_aimate + // x enable + // y duration + // z interval + // w trailLength + } + + gl_FragColor = filterColor(gl_FragColor); +} diff --git a/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl b/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl new file mode 100644 index 0000000000..15efcd9e1c --- /dev/null +++ b/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl @@ -0,0 +1,207 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 +#define LineTexture 1.0 +attribute vec3 a_Position; +attribute vec4 a_Instance; +attribute vec4 a_Color; +attribute float a_Size; + +uniform float u_globel; +uniform float u_globel_radius; +uniform float u_global_height: 10; +uniform mat4 u_ModelMatrix; +uniform mat4 u_Mvp; +uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; +varying vec4 v_color; +// varying vec2 v_normal; +uniform float u_line_type: 0.0; +uniform vec4 u_dash_array: [10.0, 5., 0, 0]; +varying vec4 v_dash_array; + +uniform float u_icon_step: 100; +uniform float u_line_texture: 0.0; +varying float v_segmentIndex; + +attribute vec2 a_iconMapUV; +varying vec2 v_iconMapUV; + +uniform float u_opacity: 1.0; +varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元 + +#pragma include "styleMapping" +#pragma include "styleMappingCalOpacity" + +#pragma include "projection" +#pragma include "project" +#pragma include "picking" + +float maps (float value, float start1, float stop1, float start2, float stop2) { + return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); +} + +float getSegmentRatio(float index) { + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); +} + +float paraboloid(vec2 source, vec2 target, float ratio) { + vec2 x = mix(source, target, ratio); + vec2 center = mix(source, target, 0.5); + float dSourceCenter = distance(source, center); + float dXCenter = distance(x, center); + return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter); +} + +vec3 getPos(vec2 source, vec2 target, float segmentRatio) { + float vertex_height = paraboloid(source, target, segmentRatio); + + return vec3( + mix(source, target, segmentRatio), + sqrt(max(0.0, vertex_height)) + ); +} +vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + + vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0; + + return offset; +} +vec2 getNormal(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); +} + +float torad(float deg) { + return (deg / 180.0) * acos(-1.0); +} + +vec3 lglt2xyz(vec2 lnglat) { + float pi = 3.1415926; + // TODO: + Math.PI/2 是为了对齐坐标 + float lng = torad(lnglat.x) + pi / 2.0; + float lat = torad(lnglat.y); + + // TODO: 手动增加一些偏移，减轻面的冲突 + float radius = u_globel_radius; + + float z = radius * cos(lat) * cos(lng); + float x = radius * cos(lat) * sin(lng); + float y = radius * sin(lat); + return vec3(x, y, z); +} + +void main() { + // cal style mapping - 数据纹理映射部分的计算 + styleMappingMat = mat4( + 0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty + 0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA + 0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] + 0.0, 0.0, 0.0, 0.0 // dataset 数据集 + ); + + float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行 + float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列 + float columnWidth = 1.0/columnCount; // 列宽 + float rowHeight = 1.0/rowCount; // 行高 + float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets + float id = a_vertexId; // 第n个顶点 + float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行 + float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列 + + // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... + // 按顺序从 cell 中取值、若没有则自动往下取值 + float textureOffset = 0.0; // 在 cell 中取值的偏移量 + + vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][0] = opacityAndOffset.r; + textureOffset = opacityAndOffset.g; + // cal style mapping - 数据纹理映射部分的计算 + + v_color = a_Color; + vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy; + vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy; + float segmentIndex = a_Position.x; + float segmentRatio = getSegmentRatio(segmentIndex); + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + + float d_distance_ratio; + if(u_line_type == LineTypeDash) { + d_distance_ratio = segmentIndex / segmentNumber; + // float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + vec2 s = source; + vec2 t = target; + + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + s = unProjCustomCoord(source); + t = unProjCustomCoord(target); + } + float total_Distance = pixelDistance(s, t) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + d_distance_ratio = segmentIndex / segmentNumber; + } + styleMappingMat[3].g = d_distance_ratio; // 当前点位距离占线总长的比例 + + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + vec3 curr = getPos(source, target, segmentRatio); + vec3 next = getPos(source, target, nextSegmentRatio); + vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y); + // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + + + v_segmentIndex = a_Position.x; + if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式 + + float arcDistrance = length(source - target); + float pixelLen = project_pixel_texture(u_icon_step); + styleMappingMat[3].b = floor(arcDistrance/pixelLen); // 贴图在弧线上重复的数量 + + vec2 projectOffset = project_pixel(offset); + float lineOffsetWidth = length(projectOffset + projectOffset * sign(a_Position.y)); // 线横向偏移的距离 + float linePixelSize = project_pixel(a_Size); // 定点位置偏移，按地图等级缩放后的距离 + styleMappingMat[3].a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值 + + v_iconMapUV = a_iconMapUV; + } + + + // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + gl_Position = u_Mvp * (vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + } else { + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + } + + // 地球模式 + if(u_globel > 0.0) { + vec3 startLngLat = lglt2xyz(a_Instance.rg); + vec3 endLngLat = lglt2xyz(a_Instance.ba); + float globalRadius = length(startLngLat); + + vec3 lineDir = normalize(endLngLat - startLngLat); + vec3 midPointDir = normalize((startLngLat + endLngLat)/2.0); + + // 线的偏移 + vec3 lnglatOffset = cross(lineDir, midPointDir) * a_Position.y; + // 计算起始点和终止点的距离 + float lnglatLength = length(a_Instance.rg - a_Instance.ba)/50.0; + // 计算飞线各个节点相应的高度 + float lineHeight = u_global_height * (-4.0*segmentRatio*segmentRatio + 4.0 * segmentRatio) * lnglatLength; + // 地球点位 + vec3 globalPoint = normalize(mix(startLngLat, endLngLat, segmentRatio)) * (globalRadius + lineHeight) + lnglatOffset * a_Size; + + gl_Position = u_ViewProjectionMatrix * vec4(globalPoint, 1.0); + } + + + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl b/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl new file mode 100644 index 0000000000..0e755bf3ac --- /dev/null +++ b/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl @@ -0,0 +1,38 @@ +#define Animate 0.0 +#define LineTexture 1.0 + +uniform float u_opacity; +uniform float u_textureBlend; +uniform float u_blur : 0.9; +uniform float u_line_type: 0.0; +// varying vec2 v_normal; +varying vec4 v_dash_array; +varying vec4 v_color; + +uniform float u_time; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; + +uniform float u_line_texture; +uniform sampler2D u_texture; +uniform vec2 u_textSize; + +uniform float segmentNumber; +varying vec2 v_iconMapUV; + +varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 + +uniform float u_linearColor: 0; +uniform vec4 u_sourceColor; +uniform vec4 u_targetColor; + +#pragma include "picking" + +void main() { + float opacity = styleMappingMat[0][0]; + float d_segmentIndex = styleMappingMat[3].r; // 当前顶点在弧线中所处的分段位置 + + // 设置弧线的底色 + gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber); + gl_FragColor.a *= opacity; + gl_FragColor = filterColor(gl_FragColor); +} \ No newline at end of file diff --git a/packages/layers/src/line/shaders/linear/arc_linear_vert.glsl b/packages/layers/src/line/shaders/linear/arc_linear_vert.glsl new file mode 100644 index 0000000000..3a5cac6460 --- /dev/null +++ b/packages/layers/src/line/shaders/linear/arc_linear_vert.glsl @@ -0,0 +1,138 @@ + +attribute vec4 a_Color; +attribute vec3 a_Position; +attribute vec4 a_Instance; +attribute float a_Size; +uniform mat4 u_ModelMatrix; +uniform mat4 u_Mvp; +uniform float segmentNumber; +varying vec4 v_color; + +uniform float u_lineDir: 1.0; + +uniform float u_thetaOffset: 0.314; + +uniform float u_opacity: 1.0; +varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元 + +#pragma include "styleMapping" +#pragma include "styleMappingCalOpacity" +#pragma include "styleMappingCalThetaOffset" + +#pragma include "projection" +#pragma include "project" +#pragma include "picking" + +float bezier3(vec3 arr, float t) { + float ut = 1. - t; + return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; +} +vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) { + vec2 center = target - source; + float r = length(center); + float theta = atan(center.y, center.x); + float thetaOffset = arcThetaOffset; + float r2 = r / 2.0 / cos(thetaOffset); + float theta2 = theta + thetaOffset; + vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); + if(u_lineDir == 1.0) { // 正向 + return mid; + } else { // 逆向 + // (mid + vmin)/2 = (s + t)/2 + vec2 vmid = source + target - mid; + return vmid; + } + // return mid; +} +float getSegmentRatio(float index) { + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); +} +vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) { + // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation + vec2 mid = midPoint(source, target, arcThetaOffset); + vec3 x = vec3(source.x, mid.x, target.x); + vec3 y = vec3(source.y, mid.y, target.y); + return vec2(bezier3(x ,t), bezier3(y,t)); +} +vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0; + return offset; +} +vec2 getNormal(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); +} + +void main() { + v_color = a_Color; + + // cal style mapping - 数据纹理映射部分的计算 + styleMappingMat = mat4( + 0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty + 0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA + 0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] + 0.0, 0.0, 0.0, 0.0 // dataset 数据集 + ); + + float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行 + float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列 + float columnWidth = 1.0/columnCount; // 列宽 + float rowHeight = 1.0/rowCount; // 行高 + float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets + float id = a_vertexId; // 第n个顶点 + float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行 + float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列 + + // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... + // 按顺序从 cell 中取值、若没有则自动往下取值 + float textureOffset = 0.0; // 在 cell 中取值的偏移量 + + vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][0] = opacityAndOffset.r; + textureOffset = opacityAndOffset.g; + + vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][1] = thetaOffsetAndOffset.r; + textureOffset = thetaOffsetAndOffset.g; + // cal style mapping - 数据纹理映射部分的计算 + + + vec2 source = a_Instance.rg; // 起始点 + vec2 target = a_Instance.ba; // 终点 + float segmentIndex = a_Position.x; + float segmentRatio = getSegmentRatio(segmentIndex); + + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + float d_distance_ratio; + + styleMappingMat[3].b = d_distance_ratio; + + // styleMappingMat[0][1] - arcThetaOffset + vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); + vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); + // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + //unProjCustomCoord + + vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); + + + float d_segmentIndex = a_Position.x + 1.0; // 当前顶点在弧线中所处的分段位置 + styleMappingMat[3].r = d_segmentIndex; + + // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + // gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); + gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); + } else { + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + } + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/line/shaders/frag/linear_frag.glsl b/packages/layers/src/line/shaders/linear/line_linear_frag.glsl similarity index 100% rename from packages/layers/src/line/shaders/frag/linear_frag.glsl rename to packages/layers/src/line/shaders/linear/line_linear_frag.glsl diff --git a/packages/layers/src/line/shaders/linear/simpleline_linear_frag.glsl b/packages/layers/src/line/shaders/linear/simpleline_linear_frag.glsl new file mode 100644 index 0000000000..dfbb36d3aa --- /dev/null +++ b/packages/layers/src/line/shaders/linear/simpleline_linear_frag.glsl @@ -0,0 +1,13 @@ + + +uniform vec4 u_sourceColor; +uniform vec4 u_targetColor; + +varying mat4 styleMappingMat; +void main() { + float opacity = styleMappingMat[0][0]; + float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例 + + gl_FragColor = mix(u_sourceColor, u_targetColor, d_distance_ratio); + gl_FragColor.a *= opacity; // 全局透明度 +} diff --git a/packages/layers/src/line/shaders/simpleline_frag.glsl b/packages/layers/src/line/shaders/simpleline_frag.glsl index 53ed1d00e0..3bf3a56c18 100644 --- a/packages/layers/src/line/shaders/simpleline_frag.glsl +++ b/packages/layers/src/line/shaders/simpleline_frag.glsl @@ -1,31 +1,10 @@ -uniform float u_blur : 0.99; -uniform float u_line_type: 0.0; -uniform float u_opacity : 1.0; - -uniform float u_borderWidth: 0.0; -uniform vec4 u_borderColor; varying vec4 v_color; - - -uniform float u_linearColor: 0; -uniform vec4 u_sourceColor; -uniform vec4 u_targetColor; - -uniform float u_time; -uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动 - varying mat4 styleMappingMat; void main() { float opacity = styleMappingMat[0][0]; float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例 - if(u_linearColor == 1.0) { // 使用渐变颜色 - gl_FragColor = mix(u_sourceColor, u_targetColor, d_distance_ratio); - } else { // 使用 color 方法传入的颜色 - gl_FragColor = v_color; - } - // anti-alias - // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy)); + gl_FragColor = v_color; gl_FragColor.a *= opacity; // 全局透明度 } diff --git a/packages/layers/src/line/shaders/simpleline_vert.glsl b/packages/layers/src/line/shaders/simpleline_vert.glsl index 100f00ddc2..96fc3f245d 100644 --- a/packages/layers/src/line/shaders/simpleline_vert.glsl +++ b/packages/layers/src/line/shaders/simpleline_vert.glsl @@ -11,13 +11,13 @@ attribute float a_Distance; uniform mat4 u_ModelMatrix; uniform mat4 u_Mvp; +uniform float u_opacity: 1.0; uniform float u_vertexScale: 1.0; #pragma include "projection" varying vec4 v_color; -uniform float u_opacity: 1.0; varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元 #pragma include "styleMapping" @@ -51,11 +51,7 @@ void main() { // cal style mapping - 数据纹理映射部分的计算 float d_distance_ratio; // 当前点位距离占线总长的比例 - v_color = a_Color; - - // 设置数据集的参数 - styleMappingMat[3][0] = a_Distance / a_Total_Distance; // 当前点位距离占线总长的比例 - + v_color = a_Color; vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0)); diff --git a/stories/Map/components/amap2demo_arcLine.tsx b/stories/Map/components/amap2demo_arcLine.tsx index ad2b350386..4c617f01f9 100644 --- a/stories/Map/components/amap2demo_arcLine.tsx +++ b/stories/Map/components/amap2demo_arcLine.tsx @@ -45,7 +45,7 @@ export default class Amap2demo_arcLine extends React.Component { opacity: 0.8, blur: 0.99, // segmentNumber: 3, - // lineType: 'dash', + lineType: 'dash', // dashArray: [5, 5], }); // .forward(false) diff --git a/stories/Map/components/gridTile2.tsx b/stories/Map/components/gridTile2.tsx index 0e470c6840..54be27fc28 100644 --- a/stories/Map/components/gridTile2.tsx +++ b/stories/Map/components/gridTile2.tsx @@ -177,7 +177,7 @@ export default class GridTile2 extends React.Component { .style({ vertexHeightScale: 2000, sourceColor: '#f00', - targetColor: '#0f0', + // targetColor: '#0f0', }); scene.addLayer(layer); };