fix: Mapbox/Maplibre 20 层级以上数据偏移问题

[lvisei]

🤔 这个变动的性质是？

• 新特性提交
• 日常 bug 修复

🔗 相关背景

• Mapbox/Maplibre 数据偏移问题
• 地图大于 20 级数据抖动背景及方案提议

分别用 Mapbox 和 L7 的图层 API 绘制线数据，大于 20 级时，绘制的数据出现明显偏移现象。

const scene = new Scene({
  id: "map",
  renderer: options.renderer,
  map: new Mapbox({
    style:
      "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
    center: [121.434765, 31.256735],
    zoom: 14.83,
    maxZoom: 23.9,
  }),
});
const geoData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: [
          [120.10121458655186, 30.269329295915544],
          [120.10122467185921, 30.2693341645727],
          [120.10123176240315, 30.269323019911795],
        ],
      },
    },
  ],
};

const source = new Source(geoData);
const layer = new LineLayer({ blend: "normal", autoFit: true })
  .source(source)
  .size(2)
  .shape("line")
  .color("#f00")
  .style({
    opacity: 1,
  });

scene.on("loaded", () => {
  scene.addLayer(layer);
});

if (scene.getType() === "mapbox") {
  const baseMap = scene.map;
  baseMap.on("load", () => {
    baseMap.addSource("route", {
      type: "geojson",
      data: geoData,
    });
    baseMap.addLayer({
      id: "route",
      type: "line",
      source: "route",
      layout: {
        "line-join": "round",
        "line-cap": "round",
      },
      paint: {
        "line-color": "#0083FE",
        "line-width": 2,
      },
    });
  });
}

偏移的原因出现在：经纬度数据传入 shader 自动转成 32 浮点数，精度丢失。

💡 解决方案

经纬度数据拆为双 32 浮点数，shader 中投影将低位经纬度数据传入，升级之后的project_position 逻辑

vec4 project_position(vec4 position, vec2 position64xyLow) {
  if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {
    return vec4(
      project_mercator_(position.xy) * WORLD_SCALE * u_ZoomScale,
      project_size(position.z),
      position_world.w
    );
  }

  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
    // Subtract high part of 64 bit value. Convert remainder to float32, preserving precision.
    float X = position.x - u_ViewportCenter.x;
    float Y = position.y - u_ViewportCenter.y;
    return project_offset(vec4(X + position64xyLow.x, Y + position64xyLow.y, position.z, position.w));
  }

  return position;
}

vec4 project_position(vec4 position) {
  return project_position(position, ZERO_64_XY_LOW);
}

再完成 shader 里的修改后，用 Mapbox 和 L7 的图层 API 绘制线图层效果一致，Mapbox 的图层在下面。

事项

• 解决 shader 全局属性超过 16 个情况，重构 shader 属性索引定义逻辑，完成所有图层迁移
• 完成需要高精度的图层迁移

高精度图层迁移

• PointLayer
  • fill
  • billboard_point
  • extrude
  • fillImage
  • image
  • normal
  • radar
  • text
  • earthExtrude
  • earthFill
• LineLayer
  • line
  • simple_line
  • arc
  • arc3d
  • flow
  • great_circle
  • wall
• PolygonLayer
  • extrude
  • extrusion
  • fill
  • ocean
  • water
• HeatmapLayer
  • heatmap
  • grid
  • grid3d
  • hexagon
• GeometryLayer
• CityBuildingLayer
• ImageLayer
• RaterLayer
  • raster
  • rasterRgb
  • rasterTerrainRgb
• wind

其他问题修复

• 修复点图层部分 shape 中心点计算有误
• 修复立体面图层光照计算有误

[lvisei]

其他问题记录

1. regl 与 device 抗锯齿不一致

devise	regl

[lvisei]

/update-snapshots

[lvisei]

/update-snapshots