如何将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);

这会更新我的投影矩阵以使用适当的宽高比(宽度/高度).