Polygonside (#1069)

* feat: polygon extrude mode support set linear color * style: lint style
antvis · Apr 21, 2022 · a37b33a · a37b33a
1 parent ef0aadd
commit a37b33a
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 176 deletions.
diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts
@@ -63,11 +63,13 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     // 转化渐变色
+    let useLinearColor = 0; // 默认不生效
     let sourceColorArr = [1, 1, 1, 1];
     let targetColorArr = [1, 1, 1, 1];
     if (sourceColor && targetColor) {
       sourceColorArr = rgb2arr(sourceColor);
       targetColorArr = rgb2arr(targetColor);
+      useLinearColor = 1;
     }
 
     return {
@@ -76,6 +78,9 @@ export default class ExtrudeModel extends BaseModel {
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_raisingHeight: Number(raisingHeight),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
+
+      // 渐变色支持参数
+      u_linearColor: useLinearColor,
       u_sourceColor: sourceColorArr,
       u_targetColor: targetColorArr,
       u_texture: this.texture,
@@ -143,46 +148,36 @@ export default class ExtrudeModel extends BaseModel {
   }
 
   protected registerBuiltinAttributes() {
-    const {
-      mapTexture,
-    } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
+    const bbox = this.layer.getSource().extent;
+    const [minLng, minLat, maxLng, maxLat] = bbox;
+    const lngLen = maxLng - minLng;
+    const latLen = maxLat - minLat;
 
-    if (mapTexture) {
-      const bbox = this.layer.getSource().extent;
-      const [minLng, minLat, maxLng, maxLat] = bbox;
-      const lngLen = maxLng - minLng;
-      const latLen = maxLat - minLat;
-
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'uvs',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_uvs',
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.STATIC_DRAW,
-            data: [],
-            type: gl.FLOAT,
-          },
-          size: 3,
-          update: (
-            feature: IEncodeFeature,
-            featureIdx: number,
-            vertex: number[],
-            attributeIdx: number,
-            normal: number[],
-          ) => {
-            const lng = vertex[0];
-            const lat = vertex[1];
-            return [
-              (lng - minLng) / lngLen,
-              (lat - minLat) / latLen,
-              vertex[4],
-            ];
-          },
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uvs',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_uvs',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
         },
-      });
-    }
+        size: 3,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+          normal: number[],
+        ) => {
+          const lng = vertex[0];
+          const lat = vertex[1];
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
+        },
+      },
+    });
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'normal',

diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_frag.glsl
@@ -1,12 +1,25 @@
 uniform float u_opacity: 1.0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+uniform float u_linearColor: 0;
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
 
 void main() {
-  float opacity = styleMappingMat[0][0];
-  gl_FragColor = v_Color;
-  // gl_FragColor.a *= u_opacity;
+  float opacity = styleMappingMat[0][0];  
+  float isSide = styleMappingMat[0][3];
+  float sidey = styleMappingMat[3][0];
+  float lightWeight = styleMappingMat[3][1];
+
+  if(isSide < 1.0 && u_linearColor == 1.0) {
+    vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+    linearColor.rgb *= lightWeight;
+    gl_FragColor = linearColor;
+  } else {
+    gl_FragColor = v_Color;
+  }
+
   gl_FragColor.a *= opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }
diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl
@@ -1,13 +1,25 @@
 uniform float u_opacity: 1.0;
+uniform vec4 u_sourceColor;
+uniform vec4 u_targetColor;
+uniform float u_linearColor: 0;
 varying vec4 v_Color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 #pragma include "picking"
-varying float v_lightWeight;
 
 void main() {
   float opacity = styleMappingMat[0][0];
-  gl_FragColor = v_Color;
-  // gl_FragColor.a *= u_opacity;
+  float isSide = styleMappingMat[0][3];
+  float sidey = styleMappingMat[3][0];
+  float lightWeight = styleMappingMat[3][1];
+
+  if(isSide < 1.0 && u_linearColor == 1.0) {
+    vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+    linearColor.rgb *= lightWeight;
+    gl_FragColor = linearColor;
+  } else {
+    gl_FragColor = v_Color;
+  }
+
   gl_FragColor.a *= opacity;
-  gl_FragColor = filterColorAlpha(gl_FragColor, v_lightWeight);
+  gl_FragColor = filterColorAlpha(gl_FragColor, lightWeight);
 }
diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_vert.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_picklight_vert.glsl
@@ -8,6 +8,7 @@ attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Normal;
 attribute float a_Size;
+attribute vec3 a_uvs;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
@@ -24,16 +25,16 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 #pragma include "light"
 #pragma include "picking"
 
-varying float v_lightWeight;
-
 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, // opacity - strokeOpacity - strokeWidth - isSide
     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
+    0.0, 0.0, 0.0, 0.0  // sidey
   );
+  styleMappingMat[0][3] = a_Position.z;
+  styleMappingMat[3][0] = a_uvs[2];
 
   float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
   float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@@ -75,9 +76,10 @@ void main() {
   }
 
   float lightWeight = calc_lighting(pos);
-  v_lightWeight = lightWeight;
   // v_Color = a_Color;
   v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
+  styleMappingMat[3][1] = lightWeight;
+
   setPickingColor(a_PickingColor);
 }
diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrude_vert.glsl
@@ -8,6 +8,7 @@ attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Normal;
 attribute float a_Size;
+attribute vec3 a_uvs;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
@@ -27,11 +28,13 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样
 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, // opacity - strokeOpacity - strokeWidth - isSide
     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
+    0.0, 0.0, 0.0, 0.0  // sidey
   );
+  styleMappingMat[0][3] = a_Position.z;
+  styleMappingMat[3][0] = a_uvs[2];
 
   float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
   float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
@@ -81,5 +84,7 @@ void main() {
   // v_Color = a_Color;
   v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
+  styleMappingMat[3][1] = lightWeight;
+
   setPickingColor(a_PickingColor);
 }
diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_frag.glsl
@@ -9,18 +9,17 @@ varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 void main() {
   float opacity = styleMappingMat[0][0];
   float isSide = styleMappingMat[0][3];
-
+  float lightWeight = styleMappingMat[3][1];
   float topU = styleMappingMat[2][2];
   float topV = styleMappingMat[2][3];
 
   float sidey = styleMappingMat[3][0];
   if(isSide < 1.0) {
     gl_FragColor = mix(u_targetColor, u_sourceColor, sidey);
+    gl_FragColor.rgb *= lightWeight;
   } else {
     gl_FragColor = texture2D(u_texture, vec2(topU, topV));
   }
-
-  // gl_FragColor = v_Color;
 
 
   gl_FragColor.a *= opacity;

diff --git a/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl b/packages/layers/src/polygon/shaders/extrude/polygon_extrudetex_vert.glsl
@@ -4,7 +4,6 @@ precision highp float;
 #define diffuseRatio 0.3
 #define specularRatio 0.2
 
-attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Normal;
 attribute float a_Size;
@@ -84,9 +83,8 @@ void main() {
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
   }
 
-  // float lightWeight = calc_lighting(pos);
-  // v_Color = a_Color;
-  // v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
+  float lightWeight = calc_lighting(pos);
+  styleMappingMat[3][1] = lightWeight;
 
   setPickingColor(a_PickingColor);
 }