fix: line layer data shake

packages/layers/src/core/BaseModel.ts

@@ -52,6 +52,8 @@ export interface ICellProperty {
   count: number;
 }
 
+type AttributeLayoutLocationType = typeof COMMON_ATTRIBUTE_LOCATION & Record<string, number>;
+
 // 属性索引宏定义前缀，使用命名空间避免 define 名称重复情况
 const DEFINE_ATTRIBUTE_LOCATION_PREFIX = 'ATTRIBUTE_LOCATION_';
 
@@ -63,7 +65,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}> implements ILayerMod
   /**
    * Attribute Layout Location in Shader
    */
-  protected get attributeLocation(): typeof COMMON_ATTRIBUTE_LOCATION & Record<string, number> {
+  protected get attributeLocation(): AttributeLayoutLocationType {
     return { ...COMMON_ATTRIBUTE_LOCATION };
   }
 

packages/layers/src/core/CommonStyleAttribute.ts

@@ -5,20 +5,20 @@ import { AttributeType, gl } from '@antv/l7-core';
  * Attribute Layout Location in Shader
  */
 export const COMMON_ATTRIBUTE_LOCATION = {
-  // Common attribute in RegisterStyleAttributePlugin
+  // common attribute in RegisterStyleAttributePlugin
   POSITION: 0,
-  // POSITION_LOW: 1,
-  COLOR: 1,
-  VERTEX_ID: 2,
+  // low part for double precision POSITION attribute
+  POSITION_64LOW: 1,
+  COLOR: 2,
   PICKING_COLOR: 3,
 
-  // Common Style Attribute
+  // common style attribute
   STROKE: 4,
   OPACITY: 5,
   OFFSETS: 6,
   ROTATION: 7,
 
-  // Last Index
+  // last index
   MAX: 8,
 } as const;
 

packages/layers/src/geometry/shaders/sprite_vert.glsl

@@ -12,12 +12,12 @@ out float v_d;
 
 #pragma include "projection"
 void main() {
-   v_Color = a_Color.xyz;
+  v_Color = a_Color.xyz;
 
-   vec4 project_pos = project_position(vec4(a_Position, 1.0));
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
 
-   v_d = a_Position.z;
+  v_d = a_Position.z;
 
   gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));
-gl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;
+  gl_PointSize = pow(u_Zoom - 1.0, 2.0) * u_Scale;
 }

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

@@ -2,7 +2,7 @@
 #define Animate 0.0
 
 layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
-// layout(location = xx) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
 layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
 layout(location = ATTRIBUTE_LOCATION_SIZE) in vec2 a_Size;
 layout(location = ATTRIBUTE_LOCATION_DISTANCE_INDEX) in vec3 a_DistanceAndIndexAndMiter;
@@ -77,8 +77,7 @@ void main() {
   v_texture_data = vec4(currentLinePointRatio, lineDistance, d_texPixelLen, texV);
   // 设置数据集的参数
 
-  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
-  // vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0), a_Position64Low);
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0), a_Position64Low);
 
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
 

packages/layers/src/plugins/RegisterStyleAttributePlugin.ts

@@ -6,13 +6,10 @@ import type {
   L7Container,
 } from '@antv/l7-core';
 import { AttributeType, gl } from '@antv/l7-core';
+import { fp64LowPart } from '@antv/l7-utils';
 import { COMMON_ATTRIBUTE_LOCATION } from '../core/CommonStyleAttribute';
 import { isTileGroup } from '../tile/utils/utils';
 
-// function fp64LowPart(x: number) {
-//   return x - Math.fround(x);
-// }
-
 /**
  * 在初始化阶段完成属性的注册，以及首次根据 Layer 指定的三角化方法完成 indices 和 attribute 的创建
  */
@@ -38,7 +35,6 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
     this.registerPositionAttribute(styleAttributeService);
     // this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
     this.registerColorAttribute(styleAttributeService);
-    this.registerVertexIdAttribute(styleAttributeService);
   }
 
   private registerPositionAttribute(styleAttributeService: IStyleAttributeService) {
@@ -61,63 +57,43 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
       },
     });
 
-    // styleAttributeService.registerStyleAttribute({
-    //   name: 'position64Low',
-    //   type: AttributeType.Attribute,
-    //   descriptor: {
-    //     name: 'a_Position64Low',
-    //     shaderLocation: COMMON_ATTRIBUTE_LOCATION.POSITION_LOW,
-    //     buffer: {
-    //       data: [],
-    //       type: gl.FLOAT,
-    //     },
-    //     size: 2,
-    //     update: (feature: IEncodeFeature, featureIdx: number, vertex: number[]) => {
-    //       return [fp64LowPart(vertex[0]), fp64LowPart(vertex[1])];
-    //     },
-    //   },
-    // });
-  }
-
-  private registerColorAttribute(styleAttributeService: IStyleAttributeService) {
+    // save low part for enabled double precision POSITION attribute
     styleAttributeService.registerStyleAttribute({
-      name: 'color',
+      name: 'position64Low',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_Color',
-        shaderLocation: COMMON_ATTRIBUTE_LOCATION.COLOR,
+        name: 'a_Position64Low',
+        shaderLocation: COMMON_ATTRIBUTE_LOCATION.POSITION_64LOW,
         buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
           data: [],
           type: gl.FLOAT,
         },
-        size: 4,
-        update: (feature: IEncodeFeature) => {
-          const { color } = feature;
-          return !color || !color.length ? [1, 1, 1, 1] : color;
+        size: 2,
+        update: (feature: IEncodeFeature, featureIdx: number, vertex: number[]) => {
+          const enable64bitPosition = true;
+          return enable64bitPosition ? [fp64LowPart(vertex[0]), fp64LowPart(vertex[1])] : [0, 0];
         },
       },
     });
   }
 
-  private registerVertexIdAttribute(styleAttributeService: IStyleAttributeService) {
+  private registerColorAttribute(styleAttributeService: IStyleAttributeService) {
     styleAttributeService.registerStyleAttribute({
-      // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
-      name: 'vertexId',
+      name: 'color',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_vertexId',
-        shaderLocation: COMMON_ATTRIBUTE_LOCATION.VERTEX_ID,
+        name: 'a_Color',
+        shaderLocation: COMMON_ATTRIBUTE_LOCATION.COLOR,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
           data: [],
           type: gl.FLOAT,
         },
-        size: 1,
-        update: (feature: IEncodeFeature, featureIdx: number) => {
-          return [featureIdx];
+        size: 4,
+        update: (feature: IEncodeFeature) => {
+          const { color } = feature;
+          return !color || !color.length ? [1, 1, 1, 1] : color;
         },
       },
     });

packages/utils/src/index.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 export * from './ajax';
 export * from './anchor';
 export * from './color';
@@ -9,13 +8,14 @@ export * from './env';
 export * from './event';
 export * from './geo';
 export { BKDRHash, djb2hash, guid } from './hash';
+export * from './interface/map';
 export * from './lineAtOffset';
 export * from './lodash-adapter';
 export * from './lru_cache';
-// export * from './mini-adapter/index';
-export * from './interface/map';
+export * from './math';
 export * as Satistics from './statistics';
 export * from './tileset-manager';
+
 export function defaultValue(v1: any, v2: any) {
   if (v1 === undefined || v1 === null) {
     return v2;

packages/utils/src/math.ts

@@ -1,3 +1,12 @@
 export function isNumber(n: any) {
   return typeof n === 'number';
 }
+
+/**
+ * Calculate the low part of a WebGL 64 bit float
+ * @param x {number} - the input float number
+ * @returns {number} - the lower 32 bit of the number
+ */
+export function fp64LowPart(x: number): number {
+  return x - Math.fround(x);
+}