如何将 WebGL 相机纵横比设置为画布（窗口）纵横比？答案

【问题标题】：How can Iset WebGL camera aspect ratio to canvas (window) aspect ratio?如何将 WebGL 相机纵横比设置为画布（窗口）纵横比？
【发布时间】：2022-02-04 18:06:21
【问题描述】：

我已使用以下方法使我的 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?

【问题讨论】：

好吧，只需调用 gl.viewport(0, 0, canvas.width, canvas.height) 并在事件上创建另一个具有新纵横比的投影矩阵（canvas.width / canvas.height），将其传递给您的着色器制服。
我试过了，但似乎 Firefox 并没有始终如一地处理奇数纵横比。今晚再看看。

标签： javascript dom-events webgl

【解决方案1】：

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

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

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

【讨论】：