如何维护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 matrices here和here的详细信息。

要解决您的问题，只需将x-coord除以纵横比。

Answer 2

你是在2d还是3d画一个正方形？如果没有看到您的代码，很难知道如何提供帮助。

These tutorials generally go over both the 2d and 3d case

简短的回答是在WebGL绘图中，画布始终在从左到右的-1到+1空间中，从下到上在-1到+1空间。

例如，如果您的画布是300x150，并且您想在30,40处绘制一个10x20像素的矩形，那么您必须为每个4个顶点设置gl_Position

clipSpaceX = pixelSpaceX * 2 / canvasWidth  - 1
clipSpaceY = pixelSpaceY * 2 / canvasHeight - 1 

注意：该数学将在画布左下角的y处。如果您想在画布顶部显示0，请翻转。

clipSpaceY = -(pixelSpaceY * 2 / canvasHeight - 1) 

但是有很多方法可以获得这些结果。仅举几个（1）传递在JavaScript（2）中计算的剪辑空间坐标，传递像素空间坐标并在着色器（3）中进行上面的数学运算以单位正方形进行，并进行数学运算以将其展开为您想要的大小

这真的取决于你。