Shihui (#953)

* feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化）

* feat: polygon extrude 模式支持配置固定高度

* style: lint style

packages/core/src/services/renderer/passes/PostProcessor.ts

@@ -40,12 +40,12 @@ export default class PostProcessor implements IPostProcessor {
         this.swap();
       }
 
-      if (pass.getName() === 'bloom') {
-        await pass.render(layer);
-        this.swap();
-        await pass.render(layer);
-        this.swap();
-      }
+      // if (pass.getName() === 'bloom') {
+      //   await pass.render(layer);
+      //   this.swap();
+      //   await pass.render(layer);
+      //   this.swap();
+      // }
     }
   }
 

packages/core/src/shaders/projection.glsl

@@ -2,15 +2,15 @@
 #define PI 3.1415926536
 #define WORLD_SCALE TILE_SIZE / (PI * 2.0)
 
-#define COORDINATE_SYSTEM_LNGLAT 1.0
-#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0
+#define COORDINATE_SYSTEM_LNGLAT 1.0        // mapbox
+#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset
 #define COORDINATE_SYSTEM_VECTOR_TILE 3.0
 #define COORDINATE_SYSTEM_IDENTITY 4.0
-#define COORDINATE_SYSTEM_P20 5.0
-#define COORDINATE_SYSTEM_P20_OFFSET 6.0
+#define COORDINATE_SYSTEM_P20 5.0           // amap
+#define COORDINATE_SYSTEM_P20_OFFSET 6.0    // amap offset
 #define COORDINATE_SYSTEM_METER_OFFSET 7.0
 
-#define COORDINATE_SYSTEM_P20_2 8.0
+#define COORDINATE_SYSTEM_P20_2 8.0         // amap2.0
 
 uniform mat4 u_ViewMatrix;
 uniform mat4 u_ProjectionMatrix;

packages/layers/src/core/interface.ts

@@ -69,6 +69,8 @@ export interface IPolygonLayerStyleOptions {
     dir: string;
   };
 
+  heightfixed?: boolean; // 挤出几何体高度是否固定（不随 zoom 发生变化）
+
   pickLight: boolean;
   mask?: boolean;
   maskInside?: boolean;

packages/layers/src/polygon/models/extrude.ts

@@ -12,6 +12,7 @@ export default class ExtrudeModel extends BaseModel {
   public getUninforms() {
     const {
       opacity = 1,
+      heightfixed = false,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
 
     if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
@@ -45,6 +46,7 @@ export default class ExtrudeModel extends BaseModel {
     }
 
     return {
+      u_heightfixed: Number(heightfixed),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 

packages/layers/src/polygon/shaders/polygon_extrude_picklight_vert.glsl

@@ -12,6 +12,7 @@ uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
 varying vec4 v_Color;
+uniform float u_heightfixed: 0.0; // 默认不固定
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
@@ -53,6 +54,13 @@ void main() {
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
 
+  if(u_heightfixed > 0.0) { // 判断几何体是否固定高度
+    project_pos.z = a_Position.z * a_Size;
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      project_pos.z *= 4.0/pow(2.0, 21.0 - u_Zoom);
+    }
+  }
+
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x

packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl

@@ -12,6 +12,7 @@ uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
 varying vec4 v_Color;
+uniform float u_heightfixed: 0.0; // 默认不固定
 uniform float u_opacity: 1.0;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
@@ -48,9 +49,17 @@ void main() {
   styleMappingMat[0][0] = opacityAndOffset.r;
   textureOffset = opacityAndOffset.g;
   // cal style mapping - 数据纹理映射部分的计算
+
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
   vec4 project_pos = project_position(pos);
 
+  if(u_heightfixed > 0.0) { // 判断几何体是否固定高度
+    project_pos.z = a_Position.z * a_Size;
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      project_pos.z *= 4.0/pow(2.0, 21.0 - u_Zoom);
+    }
+  }
+
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x

stories/Map/components/amap2demo_polygon_extrude.tsx

@@ -1,15 +1,7 @@
 import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
-import { mat4 } from 'gl-matrix';
-
-function convertRGB2Hex(rgb: number[]) {
-  return (
-    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
-  );
-}
-
 export default class Amap2demo_polygon_extrude extends React.Component {
   private gui: dat.GUI;
   private $stats: Node;
@@ -27,7 +19,7 @@ export default class Amap2demo_polygon_extrude extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      map: new GaodeMap({
+      map: new Mapbox({
         pitch: 0,
         // style: 'dark',
         center: [-44.40673828125, -18.375379094031825],
@@ -109,8 +101,11 @@ export default class Amap2demo_polygon_extrude extends React.Component {
       // .shape('fill')
       .shape('extrude')
       .color('red')
-      .size(6000000)
+      .size(600000)
       .style({
+        // pickLight: true,
+        heightfixed: true,
+        // heightfixed: false,
         opacity: 'testOpacity',
       })
       .active(true);