如何将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”？ OnWindowResize？

Answer 1

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

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

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