feat: 优化 lineLayer/great_circle 的 shader

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

@@ -148,7 +148,7 @@ void main() {
     vec2 projectOffset = project_pixel(offset);
     float lineOffsetWidth = length(projectOffset + projectOffset * sign(a_Position.y)); // 线横向偏移的距离
     float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
-    v_dataset.a = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
+    v_dataset.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
 
     v_iconMapUV = a_iconMapUV;
   }

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

@@ -7,7 +7,7 @@ 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 vec2 v_normal;
 varying vec4 v_dash_array;
 varying float v_distance_ratio;
 varying vec4 v_color;
@@ -19,11 +19,9 @@ uniform float u_line_texture: 0.0;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
 uniform float segmentNumber;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying vec2 v_offset;
-varying float v_a;
+
+varying vec4 v_dataset; // 数据集
+
 varying vec2 v_iconMapUV;
 
 uniform float u_linearColor: 0;
@@ -39,10 +37,11 @@ varying mat4 styleMappingMat;
 void main() {
   float opacity = styleMappingMat[0][0];
   float animateSpeed = 0.0;
-  // gl_FragColor = v_color;
+  float d_segmentIndex = v_dataset.g;
   
+  // 设置弧线的底色
   if(u_linearColor == 1.0) { // 使用渐变颜色
-    gl_FragColor = mix(u_sourceColor, u_targetColor, v_segmentIndex/segmentNumber);
+    gl_FragColor = mix(u_sourceColor, u_targetColor, d_segmentIndex/segmentNumber);
   } else { // 使用 color 方法传入的颜色
      gl_FragColor = v_color;
   }
@@ -59,6 +58,7 @@ void main() {
     gl_FragColor.a *=flag;
   }
 
+  // 设置弧线的动画模式
   if(u_aimate.x == Animate) {
       animateSpeed = u_time / u_aimate.y;
       float alpha =1.0 - fract( mod(1.0- smoothstep(0.0, 1.0, v_distance_ratio), u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
@@ -67,22 +67,23 @@ void main() {
       gl_FragColor.a *= alpha;
   }
 
-  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { // 开启贴图模式
-    float arcRadio = smoothstep( 0.0, 1.0, (v_segmentIndex / (segmentNumber - 1.0)));
-    // float arcRadio = v_segmentIndex / (segmentNumber - 1.0);
-    float count = floor(v_arcDistrance/v_pixelLen);
+  // 设置弧线的贴图
+  if(LineTexture == u_line_texture && u_line_type != LineTypeDash) { 
+    float arcRadio = smoothstep( 0.0, 1.0, (d_segmentIndex / (segmentNumber - 1.0)));
+    // float arcRadio = d_segmentIndex / (segmentNumber - 1.0);
+    float count = v_dataset.b; // 贴图在弧线上重复的数量
     float u = fract(arcRadio * count - animateSpeed * count);
     // float u = fract(arcRadio * count - animateSpeed);
     if(u_aimate.x == Animate) {
       u = gl_FragColor.a/opacity;
     }
 
-    float v = length(v_offset)/(v_a); // 横向
+    float v = v_dataset.a; // 线图层贴图部分的 v 坐标值
 
     vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
     vec4 pattern = texture2D(u_texture, uv);
     
-
+    // 设置贴图和底色的叠加模式
     if(u_textureBlend == 0.0) { // normal
       pattern.a = 0.0;
       gl_FragColor = filterColor(gl_FragColor + pattern);

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

@@ -12,7 +12,7 @@ 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;
+// varying vec2 v_normal;
 
 varying float v_distance_ratio;
 uniform float u_line_type: 0.0;
@@ -21,11 +21,8 @@ varying vec4 v_dash_array;
 
 uniform float u_icon_step: 100;
 uniform float u_line_texture: 0.0;
-varying float v_segmentIndex;
-varying float v_arcDistrance;
-varying float v_pixelLen;
-varying vec2 v_offset;
-varying float v_a;
+
+varying vec4 v_dataset; // 数据集
 
 attribute vec2 a_iconMapUV;
 varying vec2 v_iconMapUV;
@@ -183,27 +180,28 @@ void main() {
   v_distance_ratio = segmentIndex / segmentNumber;
   vec4 curr = project_position(vec4(degrees(interpolate(source, target, angularDist, segmentRatio)), 0.0, 1.0));
   vec4 next = project_position(vec4(degrees(interpolate(source, target, angularDist, nextSegmentRatio)), 0.0, 1.0));
-  v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
+  // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y);
   vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
   //  vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0));
 
-  v_segmentIndex = a_Position.x;
+  v_dataset.g = a_Position.x; // 该顶点在弧线上的分段排序
   if(LineTexture == u_line_texture) { // 开启贴图模式  
-    // v_arcDistrance = length(source - target);
     // float mapZoomScale = u_CoordinateSystem !== COORDINATE_SYSTEM_P20_2?10000000.0:1.0;
-    v_arcDistrance = length(source - target);
+    float d_arcDistrance = length(source - target);
     if(u_CoordinateSystem == COORDINATE_SYSTEM_P20) { // amap
-      v_arcDistrance = v_arcDistrance * 1000000.0;
+      d_arcDistrance = d_arcDistrance * 1000000.0;
     }
     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) { // mapbox
-    //   v_arcDistrance *= 10.0;
-      v_arcDistrance = project_pixel_allmap(v_arcDistrance);
+      d_arcDistrance = project_pixel_allmap(d_arcDistrance);
     }
-    v_pixelLen = project_pixel(u_icon_step)/8.0;
+    float d_pixelLen = project_pixel(u_icon_step)/8.0;
+    v_dataset.b = floor(d_arcDistrance/d_pixelLen); // 贴图在弧线上重复的数量
+
+    float lineOffsetWidth = length(offset + offset * sign(a_Position.y)); // 线横向偏移的距离
+    float linePixelSize = project_pixel(a_Size);  // 定点位置偏移，按地图等级缩放后的距离
+    v_dataset.a = lineOffsetWidth/linePixelSize;  // 线图层贴图部分的 v 坐标值
 
-    v_a = project_pixel(a_Size);
-    v_offset = offset + offset * sign(a_Position.y);
     v_iconMapUV = a_iconMapUV;
   }