如何设置WebGL相机的宽高比与画布（窗口）的宽高比？

Question

我已经使用以下方法让我的 webGL 内容填充浏览器窗口：

css:

canvas
  {
    float: left;
    width: 100%;
    height: 100%;
  }

而且：

function webGLStart() {
    var canvas = document.getElementById("cool3D");
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ...

到目前为止，无论窗口大小还是全屏，这对于保持完全覆盖都是有效的。问题是分配相机的纵横比以避免失真。

如何将其设置为〜“window.innerWidth/window.innerHeight”？ OnWindow 调整大小？

Answer 1

这与视口无关。它实际上是透视矩阵的函数。您的代码会有所不同，但在我自己的每次检测到窗口大小调整时，我都会执行以下操作：

mat4.perspective(45.0, canvas.width/canvas.height, znear, zfar, projectionMat);

更新我的投影矩阵以使用适当的宽高比（宽度/高度）。