From 5f5efac09b1a5e2311141dd3edefb1b8ed195ce4 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 8 Sep 2021 17:34:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E7=9A=84=20shader=EF=BC=8C=E5=9C=A8=E4=BF=9D=E6=8C=81?= =?UTF-8?q?=E5=8E=9F=E6=9C=89=E5=8A=9F=E8=83=BD=E7=9A=84=E6=83=85=E5=86=B5?= =?UTF-8?q?=E4=B8=8B=E5=B0=86=20varying=20=E7=9A=84=E6=95=B0=E9=87=8F?= =?UTF-8?q?=E4=BB=8E11=E4=B8=AA=E9=99=8D=E5=88=B07=E4=B8=AA=EF=BC=8C?= =?UTF-8?q?=E5=B9=B6=E5=B8=A6=E6=9D=A5=E4=B8=80=E4=BA=9B=E6=80=A7=E8=83=BD?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layers/src/line/shaders/line_frag.glsl | 28 +++++------ .../layers/src/line/shaders/line_vert.glsl | 37 +++++++------- .../Map/components/amap2demo_lineLinear.tsx | 50 +++++++++---------- 3 files changed, 58 insertions(+), 57 deletions(-) diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index e3a90e1172..11bf9c71d5 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -17,14 +17,11 @@ uniform vec2 u_textSize; // dash uniform float u_dash_offset : 0.0; uniform float u_dash_ratio : 0.1; -varying float v_distance_ratio; varying vec4 v_dash_array; -varying float v_side; -varying float v_distance; -varying vec2 v_offset; -varying float v_a; -varying float v_pixelLen; +varying float v_v; +varying vec4 v_dataset; // 数据集 - distance_ratio/distance/pixelLen/texV + varying vec2 v_iconMapUV; uniform float u_linearColor: 0; @@ -41,11 +38,10 @@ varying mat4 styleMappingMat; void main() { float opacity = styleMappingMat[0][0]; float animateSpeed = 0.0; // 运动速度 - - // gl_FragColor = v_color; + float d_distance_ratio = v_dataset.r; // 当前点位距离占线总长的比例 if(u_linearColor == 1.0) { // 使用渐变颜色 - gl_FragColor = mix(u_sourceColor, u_targetColor, v_distance_ratio); + gl_FragColor = mix(u_sourceColor, u_targetColor, d_distance_ratio); } else { // 使用 color 方法传入的颜色 gl_FragColor = v_color; } @@ -55,7 +51,7 @@ void main() { gl_FragColor.a *= opacity; // 全局透明度 if(u_aimate.x == Animate) { animateSpeed = u_time / u_aimate.y; - float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + animateSpeed); + float alpha =1.0 - fract( mod(1.0- d_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + animateSpeed); alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; alpha = smoothstep(0., 1., alpha); gl_FragColor.a *= alpha; @@ -63,17 +59,19 @@ void main() { // dash line if(u_line_type == LineTypeDash) { float flag = 0.; - float dashLength = mod(v_distance_ratio, v_dash_array.x + v_dash_array.y + v_dash_array.z + v_dash_array.w); + 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.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, dashLength))); } if(u_line_texture == LineTexture && u_line_type != LineTypeDash) { // while load texture - float u = fract(mod(v_distance, v_pixelLen)/v_pixelLen - animateSpeed); - float v = length(v_offset)/(v_a*2.0); + float aDistance = v_dataset.g; // 当前顶点的距离 + float d_texPixelLen = v_dataset.b; // 贴图的像素长度，根据地图层级缩放 + float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed); + float v = v_dataset.a; + v = max(smoothstep(0.95, 1.0, v), v); vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.; // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v))); @@ -98,7 +96,7 @@ void main() { // if(rV < r || rV > 1.0 - r) { // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // } - // float v = length(v_offset)/(v_a*2.0); + // float v = v_v; // if(v > 0.9) { // gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0); // } else if(v < 0.1) { diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index ca79a89252..e938c963a1 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -27,14 +27,10 @@ uniform float u_icon_step: 100; varying vec4 v_color; varying vec4 v_dash_array; varying vec2 v_normal; -varying float v_distance_ratio; -varying float v_side; -varying float v_distance; -varying vec2 v_offset; -varying float v_size; -varying float v_a; -varying float v_pixelLen; +varying vec4 v_dataset; // 数据集 - distance_ratio/distance/pixelLen/texV + +varying float v_v; // 线图层 - 贴图部分的 v 坐标（线的宽度方向） varying vec2 v_iconMapUV; uniform float u_linearColor: 0; @@ -71,35 +67,42 @@ void main() { textureOffset = opacityAndOffset.g; // cal style mapping - 数据纹理映射部分的计算 + float d_distance_ratio; // 当前点位距离占线总长的比例 + float d_texPixelLen; // 贴图的像素长度，根据地图层级缩放 + v_iconMapUV = a_iconMapUV; - v_distance = a_Distance; - v_pixelLen = project_pixel(u_icon_step); + d_texPixelLen = project_pixel(u_icon_step); if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { - v_pixelLen *= 10.0; + d_texPixelLen *= 10.0; } if(u_line_type == LineTypeDash) { - v_distance_ratio = a_Distance / a_Total_Distance; - // v_distance_ratio = 0.01; + d_distance_ratio = a_Distance / a_Total_Distance; v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; } if(u_aimate.x == Animate || u_linearColor == 1.0) { - v_distance_ratio = a_Distance / a_Total_Distance; + d_distance_ratio = a_Distance / a_Total_Distance; } v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter)); v_color = a_Color; - v_a = project_pixel(a_Size.x); - vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal); vec2 offset = project_pixel(size.xy); - v_offset = offset + offset * sign(a_Miter); + float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和） + float linePixelSize = project_pixel(a_Size.x) * 2.0; // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2 + v_v = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值 + float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值 + + // 设置数据集的参数 + v_dataset.r = d_distance_ratio; // 当前点位距离占线总长的比例 + v_dataset.g = a_Distance; // 当前顶点的距离 + v_dataset.b = d_texPixelLen; // 贴图的像素长度，根据地图层级缩放 + v_dataset.a = texV; - v_side = a_Miter * a_Size.x; vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0)); // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0)); diff --git a/stories/Map/components/amap2demo_lineLinear.tsx b/stories/Map/components/amap2demo_lineLinear.tsx index 428cd243a0..e920c55afe 100644 --- a/stories/Map/components/amap2demo_lineLinear.tsx +++ b/stories/Map/components/amap2demo_lineLinear.tsx @@ -24,31 +24,31 @@ export default class Amap2demo_lineLinear extends React.Component { const geoData = { type: 'FeatureCollection', features: [ - // { - // type: 'Feature', - // properties: { - // testOpacity: 0.8, - // }, - // geometry: { - // type: 'Polygon', - // coordinates: [ - // [ - // [113.8623046875, 30.031055426540206], - // [116.3232421875, 30.031055426540206], - // [116.3232421875, 31.090574094954192], - // [113.8623046875, 31.090574094954192], - // [113.8623046875, 30.031055426540206], - // ], - // [ - // [117.26806640625, 32.13840869677249], - // [118.36669921875, 32.13840869677249], - // [118.36669921875, 32.47269502206151], - // [117.26806640625, 32.47269502206151], - // [117.26806640625, 32.13840869677249], - // ], - // ], - // }, - // }, + { + type: 'Feature', + properties: { + testOpacity: 0.8, + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [113.8623046875, 30.031055426540206], + [116.3232421875, 30.031055426540206], + [116.3232421875, 31.090574094954192], + [113.8623046875, 31.090574094954192], + [113.8623046875, 30.031055426540206], + ], + [ + [117.26806640625, 32.13840869677249], + [118.36669921875, 32.13840869677249], + [118.36669921875, 32.47269502206151], + [117.26806640625, 32.47269502206151], + [117.26806640625, 32.13840869677249], + ], + ], + }, + }, ], };