Question

我正在研究3D空间中的2D渲染系统。精灵是2D的，但它们是在3D空间中渲染的。 “相机”可以在3D空间中移动并水平旋转360度。我无法根据相机的位置/旋转度以及资产在屏幕上应存在的位置来计算出正确的公式进行计算。

我所拥有的是这样的：

chunk.assets.forEach(asset => {
    let x = Math.round(
      asset.coords.x * Math.cos(angle) - asset.coords.y * Math.sin(angle)
    );
    let y = Math.round(
      asset.coords.y * Math.cos(angle) + asset.coords.x * Math.sin(angle)
    );
    if (!depthMap[y]) {
      depthMap[y] = [];
    }
    depthMap[y].push(asset);
});

但这并不考虑相机（玩家）的位置（存储在player.coords.x, player.coords.y中），而仅考虑相机/玩家所面对的角度（angle）。因此，现在相机无法移动。注意：深度图只是按顺序存储资产，因此渲染器知道渲染精灵的顺序，以便根据哪个更接近播放器/相机，事物以正确的顺序出现。

如何将相机的位置纳入该算法？

Answer 1

一些假设：

如果摄像机和子画面位于同一位置，则子画面将渲染为0 | 0。

相机向左移动还是精灵向右移动都没关系。

由此我们可以得出结论，只有相对位置很重要，并且可以很容易地计算出（通过减去两个位置）。

 let x = Math.round(
  (asset.coords.x - player.coords.x) * Math.cos(angle) - (asset.coords.y - player coords.y) * Math.sin(angle)
);
let y = Math.round(
  (asset.coords.y - player.coords.y) * Math.cos(angle) + (asset.coords.x - player.coords.x) * Math.sin(angle)
);

如何将相机的位置合并到此算法中以计算精灵在屏幕上的位置？

1 个答案: