p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 优化 lineLayer/great_circle 的 shader

This commit is contained in:
2912401452 2021-09-17 11:08:27 +08:00
parent bd2ec39b7a
commit c513f419e7
3 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
View File

@ -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);

30
packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
View File

@ -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;
}