如何维护WebGL Canvas的宽高比？

Question

我有一个Canvas,我正在通过WebGl绘制.我的画布尺寸:640宽x 480高.

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

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

Answer 1

画布的左边缘为x = -1.0,右边为x = +1.0,上边缘为y = 1.0,下边缘的坐标为y = -1.0.

换句话说,坐标在视口中标准化(xy,z-coord处理略有不同).这样的坐标位于剪辑空间中.

视口的宽度和高度之间的比率称为宽高比.在构造投影矩阵时使用宽高比.

如果不使用投影矩阵将坐标转换为剪贴空间,则可以直接提供坐标,这些坐标将根据视口的大小进行相应缩放.

在此处和此处查找有关projecton矩阵的更多详细信息.

要解决您的问题,只需将x-coord与纵横比分开即可.