Question

我正在构建一个简单的应用程序，该程序将标记放置在屏幕上的现实世界中某些地标的顶部，并将标记叠加在相机的视图上。我同时具有查看设备和世界地标的纬度/经度/海拔，并将其转换为ECEF坐标。但是我在3D投影数学上遇到麻烦。该点似乎总是放在屏幕中间...也许我的缩放比例在某个地方不正确，因此看起来几乎没有从中心移开？

查看设备的GPS坐标：

GPS:
  lat: 45.492132
  lon: -122.721062
  alt: 124 (meters)

ECEF:
  x: -2421034.078421273
  y: -3768100.560012433
  z: 4525944.676268726

地标GPS坐标：

GPS:
  lat: 45.499278
  lon: -122.708417
  alt: 479 (meters)

ECEF:
  x: -2420030.781624382
  y: -3768367.5284123267
  z: 4526754.604333807

我尝试按照here中的数学方法来构建一个函数，以从3D点坐标获取屏幕坐标。

当我将这些ECEF点放入投影函数中时，视口为1440x335，我得到：x: 721, y: 167

这是我的功能：

function projectionCoordinates(origin, destination) {
  const relativeX = destination.x - origin.x;
  const relativeY = destination.y - origin.y;
  const relativeZ = destination.z - origin.z;

  const xPerspective = relativeX / relativeZ;
  const yPerspective = relativeY / relativeZ;

  const xNormalized = (xPerspective + viewPort.width / 2) / viewPort.width;
  const yNormalized = (yPerspective + viewPort.height / 2) / viewPort.height;

  const xRaster = Math.floor(xNormalized * viewPort.width);
  const yRaster = Math.floor((1 - yNormalized) * viewPort.height);

  return { x: xRaster, y: yRaster };
}

我认为该点应该放在屏幕上更高的位置。我链接的那篇文章提到了我无法理解的3x4矩阵（不确定如何从3D点构建3x4矩阵）。也许这些很重要，尤其是因为我最终将不得不考虑设备的倾斜度（用手机向上或向下看）。

如果需要，这是我的功能，可将纬度/经度/海拔坐标转换为ECEF（从另一个SO答案复制/粘贴）：

function llaToCartesion({ lat, lon, alt }) {
  const cosLat = Math.cos((lat * Math.PI) / 180.0);
  const sinLat = Math.sin((lat * Math.PI) / 180.0);
  const cosLon = Math.cos((lon * Math.PI) / 180.0);
  const sinLon = Math.sin((lon * Math.PI) / 180.0);
  const rad = 6378137.0;
  const f = 1.0 / 298.257224;
  const C =
    1.0 / Math.sqrt(cosLat * cosLat + (1 - f) * (1 - f) * sinLat * sinLat);
  const S = (1.0 - f) * (1.0 - f) * C;
  const h = alt;

  const x = (rad * C + h) * cosLat * cosLon;
  const y = (rad * C + h) * cosLat * sinLon;
  const z = (rad * S + h) * sinLat;

  return { x, y, z };
}

Answer 1

您的规范化和栅格化步骤正在抵消您所需的视口缩放。乘以这个：

const xNormalized = (xPerspective + viewPort.width / 2) / viewPort.width;

给您

const xNormalized = xPerspective / viewPort.width + 0.5;

并应用以下行：

const xRaster = Math.floor(xNormalized * viewPort.width);

给您

const xRaster = Math.floor(xPerspective + viewPort.width * 0.5);

您对xPerspective的计算是正确的（但请参阅下面的评论）-但是从您的数字来看，该值将约为1。这就是为什么该点位于屏幕中心附近。

执行此操作的正确方法是：

const xRaster = Math.floor(xPerspective * viewPort.width /2 + viewPort.width /2);

您可以简化。这个想法是xPerspective是tan对着眼睛的角度xRelative。将tan乘以屏幕宽度的一半，即可得出距屏幕中心的x距离。然后，添加屏幕中心的x位置以获取屏幕坐标。

您的数学使用隐式相机视图，该视图与x，y，z轴对齐。要移动视图，您需要在进行透视除法步骤（除以xRelative之前，相对于相机计算zRelative等。一种简单的方法是将相机表示为3个向量，即相机视图的X，Y，Z。然后，通过获取向量[xRelative, yRelative, zRelative]与X，Y和Z的点积来计算3D点在相机上的投影。这将为您提供一个新的[xCamera, yCamera, zCamera]，它会随着您的变化而变化移动相机。您也可以使用矩阵进行此操作。

如何从xyz世界坐标中获取xy屏幕坐标？

1 个答案: