@antv/l7-layers 2.9.19 → 2.9.22-alpha.0

package/lib/point/shaders/earth/extrude_vert.glsl

@@ -0,0 +1,140 @@
+precision highp float;
+
+#define pi 3.1415926535
+#define ambientRatio 0.5
+#define diffuseRatio 0.3
+#define specularRatio 0.2
+
+attribute vec3 a_Position;
+attribute vec3 a_Pos;
+attribute vec4 a_Color;
+attribute vec3 a_Size;
+attribute vec3 a_Normal;
+
+uniform float u_heightfixed: 0.0; // 默认不固定
+uniform float u_globel;
+uniform float u_r;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+varying vec4 v_color;
+
+uniform float u_opacity : 1;
+uniform float u_lightEnable: 1;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+float getYRadian(float x, float z) {
+  if(x > 0.0 && z > 0.0) {
+    return atan(x/z);
+  } else if(x > 0.0 && z <= 0.0){
+    return atan(-z/x) + pi/2.0;
+  } else if(x <= 0.0 && z <= 0.0) {
+    return  pi + atan(x/z); //atan(x/z) + 
+  } else {
+    return atan(z/-x) + pi*3.0/2.0;
+  }
+}
+
+float getXRadian(float y, float r) {
+  return atan(y/r);
+}
+
+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 - lightWeight
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - linearZ(垂直方向 0 - 1 的值)
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  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 - 数据纹理映射部分的计算
+  vec3 size = a_Size * a_Position;
+
+  // a_Position.z 是在构建网格的时候传入的标准值 0 - 1，在插值器插值可以获取 0～1 线性渐变的值
+  styleMappingMat[2][3] =  a_Position.z;
+
+  vec3 offset = size; // 控制圆柱体的大小 - 从标准单位圆柱体进行偏移
+  if(u_heightfixed < 1.0) { // 圆柱体不固定高度
+    
+    if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+      // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
+      offset = offset * pow(2.0, (19.0 - u_Zoom));
+    }
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
+      // P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
+      offset = offset * pow(2.0, (19.0 - 3.0 - u_Zoom));
+    }
+  } else {// 圆柱体固定高度 （ 处理 mapbox ）
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      offset *= 4.0/pow(2.0, 21.0 - u_Zoom);
+    }
+  }
+
+
+  vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
+
+  // u_r 控制圆柱的生长
+  vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);
+
+  // 圆柱光照效果
+  float lightWeight = 1.0;
+  if(u_lightEnable > 0.0) { // 取消三元表达式，增强健壮性
+    lightWeight = calc_lighting(pos);
+  }
+  styleMappingMat[1][3] = lightWeight;
+
+  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
+
+  
+  // 在地球模式下，将原本垂直于 xy 平面的圆柱调整姿态到适应圆的角度
+  //旋转矩阵mx，创建绕x轴旋转矩阵
+  float r = sqrt(a_Pos.z*a_Pos.z + a_Pos.x*a_Pos.x);
+  float xRadian = getXRadian(a_Pos.y, r);
+  float xcos = cos(xRadian);//求解旋转角度余弦值
+  float xsin = sin(xRadian);//求解旋转角度正弦值
+  mat4 mx = mat4(
+    1,0,0,0,  
+    0,xcos,-xsin,0,  
+    0,xsin,xcos,0,  
+    0,0,0,1);
+
+  //旋转矩阵my，创建绕y轴旋转矩阵
+  float yRadian = getYRadian(a_Pos.x, a_Pos.z);
+  float ycos = cos(yRadian);//求解旋转角度余弦值
+  float ysin = sin(yRadian);//求解旋转角度正弦值
+  mat4 my = mat4(
+    ycos,0,-ysin,0,  
+    0,1,0,0,  
+    ysin,0,ycos,0,  
+    0,0,0,1);
+
+  gl_Position = u_ViewProjectionMatrix * vec4(( my * mx *  vec4(a_Position * a_Size, 1.0)).xyz + a_Pos, 1.0);
+  
+
+  setPickingColor(a_PickingColor);
+}

package/lib/point/shaders/earth/fill_frag.glsl

@@ -0,0 +1,86 @@
+uniform float u_additive;
+
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+#pragma include "sdf_2d"
+#pragma include "picking"
+
+
+void main() {
+  int shape = int(floor(v_data.w + 0.5));
+
+  vec4 textrueStroke = vec4(
+    styleMappingMat[1][0],
+    styleMappingMat[1][1],
+    styleMappingMat[1][2],
+    styleMappingMat[1][3]
+  );
+
+  float opacity = styleMappingMat[0][0];
+  float stroke_opacity = styleMappingMat[0][1];
+  float strokeWidth = styleMappingMat[0][2];
+  vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
+
+  lowp float antialiasblur = v_data.z;
+  float r = v_radius / (v_radius + strokeWidth);
+
+  float outer_df;
+  float inner_df;
+  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
+  if (shape == 0) {
+    outer_df = sdCircle(v_data.xy, 1.0);
+    inner_df = sdCircle(v_data.xy, r);
+  } else if (shape == 1) {
+    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);
+    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);
+  } else if (shape == 2) {
+    outer_df = sdBox(v_data.xy, vec2(1.));
+    inner_df = sdBox(v_data.xy, vec2(r));
+  } else if (shape == 3) {
+    outer_df = sdPentagon(v_data.xy, 0.8);
+    inner_df = sdPentagon(v_data.xy, r * 0.8);
+  } else if (shape == 4) {
+    outer_df = sdHexagon(v_data.xy, 0.8);
+    inner_df = sdHexagon(v_data.xy, r * 0.8);
+  } else if (shape == 5) {
+    outer_df = sdOctogon(v_data.xy, 1.0);
+    inner_df = sdOctogon(v_data.xy, r);
+  } else if (shape == 6) {
+    outer_df = sdHexagram(v_data.xy, 0.52);
+    inner_df = sdHexagram(v_data.xy, r * 0.52);
+  } else if (shape == 7) {
+    outer_df = sdRhombus(v_data.xy, vec2(1.0));
+    inner_df = sdRhombus(v_data.xy, vec2(r));
+  } else if (shape == 8) {
+    outer_df = sdVesica(v_data.xy, 1.1, 0.8);
+    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);
+  }
+
+  if(outer_df > antialiasblur + 0.018) discard;
+
+  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
+
+  float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
+    antialiasblur,
+    0.0,
+    inner_df
+  );
+
+  if(strokeWidth < 0.01) {
+    gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
+  } else {
+    gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
+  }
+
+  if(u_additive > 0.0) {
+    gl_FragColor *= opacity_t;
+    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
+  } else {
+    gl_FragColor.a *= opacity_t;
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+}

package/lib/point/shaders/earth/fill_vert.glsl

@@ -0,0 +1,126 @@
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec3 a_Extrude;
+attribute float a_Size;
+attribute float a_Shape;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+uniform float u_opacity : 1;
+uniform float u_stroke_opacity : 1;
+uniform float u_stroke_width : 2;
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+uniform vec2 u_offsets;
+
+uniform float u_blur : 0.0;
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+#pragma include "styleMappingCalStrokeOpacity"
+#pragma include "styleMappingCalStrokeWidth"
+
+#pragma include "projection"
+#pragma include "picking"
+
+
+void main() {
+  vec3 extrude = a_Extrude;
+  float shape_type = a_Shape;
+  /*
+  *  setPickingSize 设置拾取大小
+  */
+  float newSize = setPickingSize(a_Size);
+  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;
+
+  // 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
+  );
+
+  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;
+
+  vec2 strokeOpacityAndOffset = calStrokeOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][1] = strokeOpacityAndOffset.r;
+  textureOffset = strokeOpacityAndOffset.g;
+
+  vec2 strokeWidthAndOffset = calStrokeWidthAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][2] = strokeWidthAndOffset.r;
+  textureOffset = strokeWidthAndOffset.g;
+
+  vec4 textrueStroke = vec4(-1.0, -1.0, -1.0, -1.0);
+  if(hasStroke()) {
+    vec2 valueRPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][0] = pos2value(valueRPos, columnWidth, rowHeight); // R
+    textureOffset += 1.0;
+
+    vec2 valueGPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][1] = pos2value(valueGPos, columnWidth, rowHeight); // G
+    textureOffset += 1.0;
+
+    vec2 valueBPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][2] = pos2value(valueBPos, columnWidth, rowHeight); // B
+    textureOffset += 1.0;
+
+    vec2 valueAPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
+    textureOffset += 1.0;
+  } else {
+    if(u_stroke_color == vec4(0.0)) {
+      styleMappingMat[1][0] = v_color.r;
+      styleMappingMat[1][1] = v_color.g;
+      styleMappingMat[1][2] = v_color.b;
+      styleMappingMat[1][3] = v_color.a;
+    } else {
+      styleMappingMat[1][0] = u_stroke_color.r;
+      styleMappingMat[1][1] = u_stroke_color.g;
+      styleMappingMat[1][2] = u_stroke_color.b;
+      styleMappingMat[1][3] = u_stroke_color.a;
+    }
+  }
+
+  // cal style mapping
+
+  // unpack color(vec2)
+  v_color = a_Color;
+
+  // radius(16-bit)
+  v_radius = newSize;
+
+  // TODO: billboard
+  // anti-alias
+  //  float antialiased_blur = -max(u_blur, antialiasblur);
+  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);
+
+  // TODP: /abs(extrude.x) 是为了兼容地球模式
+  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);
+
+
+  gl_Position = u_ViewProjectionMatrix * vec4(a_Position + extrude * newSize * 0.1, 1.0);
+
+  setPickingColor(a_PickingColor);
+}

package/lib/point/shaders/extrude/extrude_frag.glsl

@@ -0,0 +1,44 @@
+varying vec4 v_color;
+uniform float u_opacity: 1.0;
+
+uniform float u_pickLight: 0.0;
+
+#pragma include "picking"
+
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+uniform float u_linearColor: 0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+
+uniform float u_opacitylinear: 0.0;
+uniform float u_opacitylinear_dir: 1.0;
+
+void main() {
+  float opacity = styleMappingMat[0][0];
+  float lightWeight = styleMappingMat[1][3];
+  float barLinearZ = styleMappingMat[2][3];
+
+  // 设置圆柱的底色
+  if(u_linearColor == 1.0) { // 使用渐变颜色
+    gl_FragColor = mix(u_sourceColor, u_targetColor, barLinearZ);
+    gl_FragColor.rgb *= lightWeight;
+  } else { // 使用 color 方法传入的颜色
+     gl_FragColor = v_color;
+  }
+
+  // 应用透明度
+  gl_FragColor.a *= opacity;
+
+  // 开启透明度渐变
+  if(u_opacitylinear > 0.0) {
+    gl_FragColor.a *= u_opacitylinear_dir > 0.0 ? (1.0 - barLinearZ): barLinearZ;
+  }
+
+  // picking
+  if(u_pickLight > 0.0) {
+    gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
+  } else {
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+}

package/lib/point/shaders/extrude/extrude_vert.glsl

@@ -0,0 +1,121 @@
+precision highp float;
+
+#define pi 3.1415926535
+#define ambientRatio 0.5
+#define diffuseRatio 0.3
+#define specularRatio 0.2
+
+attribute vec3 a_Position;
+attribute vec3 a_Pos;
+attribute vec4 a_Color;
+attribute vec3 a_Size;
+attribute vec3 a_Normal;
+
+uniform float u_heightfixed: 0.0; // 默认不固定
+uniform float u_r;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+varying vec4 v_color;
+
+uniform float u_opacity : 1;
+uniform float u_lightEnable: 1;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+float getYRadian(float x, float z) {
+  if(x > 0.0 && z > 0.0) {
+    return atan(x/z);
+  } else if(x > 0.0 && z <= 0.0){
+    return atan(-z/x) + pi/2.0;
+  } else if(x <= 0.0 && z <= 0.0) {
+    return  pi + atan(x/z); //atan(x/z) + 
+  } else {
+    return atan(z/-x) + pi*3.0/2.0;
+  }
+}
+
+float getXRadian(float y, float r) {
+  return atan(y/r);
+}
+
+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 - lightWeight
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - linearZ(垂直方向 0 - 1 的值)
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  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 - 数据纹理映射部分的计算
+  vec3 size = a_Size * a_Position;
+
+  // a_Position.z 是在构建网格的时候传入的标准值 0 - 1，在插值器插值可以获取 0～1 线性渐变的值
+  styleMappingMat[2][3] =  a_Position.z;
+
+  vec3 offset = size; // 控制圆柱体的大小 - 从标准单位圆柱体进行偏移
+  if(u_heightfixed < 1.0) { // 圆柱体不固定高度
+    
+    if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+      // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
+      offset = offset * pow(2.0, (19.0 - u_Zoom));
+    }
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
+      // P20_2 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减3
+      offset = offset * pow(2.0, (19.0 - 3.0 - u_Zoom));
+    }
+  } else {// 圆柱体固定高度 （ 处理 mapbox ）
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      offset *= 4.0/pow(2.0, 21.0 - u_Zoom);
+    }
+  }
+
+
+  vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
+
+  // u_r 控制圆柱的生长
+  vec4 pos = vec4(project_pos.xy + offset.xy, offset.z * u_r, 1.0);
+
+  // 圆柱光照效果
+  float lightWeight = 1.0;
+  if(u_lightEnable > 0.0) { // 取消三元表达式，增强健壮性
+    lightWeight = calc_lighting(pos);
+  }
+  styleMappingMat[1][3] = lightWeight;
+
+  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
+
+  // gl_Position = project_common_position_to_clipspace(pos);
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * pos;
+  } else {
+    gl_Position = project_common_position_to_clipspace(pos);
+  }
+
+  setPickingColor(a_PickingColor);
+}

package/lib/point/shaders/fill_frag.glsl

@@ -0,0 +1,84 @@
+uniform float u_additive;
+
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+#pragma include "sdf_2d"
+#pragma include "picking"
+
+
+void main() {
+  int shape = int(floor(v_data.w + 0.5));
+
+  vec4 textrueStroke = vec4(
+    styleMappingMat[1][0],
+    styleMappingMat[1][1],
+    styleMappingMat[1][2],
+    styleMappingMat[1][3]
+  );
+
+  float opacity = styleMappingMat[0][0];
+  float stroke_opacity = styleMappingMat[0][1];
+  float strokeWidth = styleMappingMat[0][2];
+  vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
+
+  lowp float antialiasblur = v_data.z;
+  float r = v_radius / (v_radius + strokeWidth);
+
+  float outer_df;
+  float inner_df;
+  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
+  if (shape == 0) {
+    outer_df = sdCircle(v_data.xy, 1.0);
+    inner_df = sdCircle(v_data.xy, r);
+  } else if (shape == 1) {
+    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);
+    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);
+  } else if (shape == 2) {
+    outer_df = sdBox(v_data.xy, vec2(1.));
+    inner_df = sdBox(v_data.xy, vec2(r));
+  } else if (shape == 3) {
+    outer_df = sdPentagon(v_data.xy, 0.8);
+    inner_df = sdPentagon(v_data.xy, r * 0.8);
+  } else if (shape == 4) {
+    outer_df = sdHexagon(v_data.xy, 0.8);
+    inner_df = sdHexagon(v_data.xy, r * 0.8);
+  } else if (shape == 5) {
+    outer_df = sdOctogon(v_data.xy, 1.0);
+    inner_df = sdOctogon(v_data.xy, r);
+  } else if (shape == 6) {
+    outer_df = sdHexagram(v_data.xy, 0.52);
+    inner_df = sdHexagram(v_data.xy, r * 0.52);
+  } else if (shape == 7) {
+    outer_df = sdRhombus(v_data.xy, vec2(1.0));
+    inner_df = sdRhombus(v_data.xy, vec2(r));
+  } else if (shape == 8) {
+    outer_df = sdVesica(v_data.xy, 1.1, 0.8);
+    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);
+  }
+
+  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
+
+  float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
+    antialiasblur,
+    0.0,
+    inner_df
+  );
+
+  if(strokeWidth < 0.01) {
+    gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
+  } else {
+    gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
+  }
+
+  if(u_additive > 0.0) {
+    gl_FragColor *= opacity_t;
+    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
+  } else {
+    gl_FragColor.a *= opacity_t;
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+}