我如何将WebGL相机的宽高比设置为画布(窗口)宽高比

How can Iset WebGL camera aspect ratio to canvas (window) aspect ratio?

本文关键字：高比 窗口 设置 WebGL 相机      更新时间：2023-09-26

我已经让我的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吗?

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

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

它更新我的投影矩阵以使用适当的长宽比(宽度/高度)。

相关文章：