canvas - 如何保持 WebGL Canvas 纵横比？

Question

我有一个通过 WebGl 绘制的 Canvas 。
我的 Canvas 尺寸:640 宽 x 480 高。

我在中间画了一个简单的正方形。然而，我惊讶地发现，当它被绘制时，它看起来有点水平拉伸(stretch)。

我需要做什么才能使这个正方形看起来合适(没有拉伸(stretch))？
请注意，我没有使用任何视口(viewport)设置。我只是通过早期的 WebGL 教程。

Answer 1

Canvas 的左边有 x = -1.0，右边有 x = +1.0，顶边有 y = 1.0，底边有 y = -1.0 的坐标。

换句话说，坐标在视口(viewport)中被标准化(xy、z 坐标的处理方式略有不同)。这样的坐标在剪辑空间中。

视口(viewport)的宽度和高度之间的比率称为纵横比。
构造投影矩阵时使用纵横比。

当您不使用投影矩阵将坐标转换为剪辑空间时，您将直接提供坐标，这些坐标将根据视口(viewport)的大小进行相应的缩放。

查找有关投影矩阵的更多详细信息 here和 here .

要解决您的问题，只需将 x 坐标除以纵横比即可。