Webgl。视口更改

我在调整画布大小和

gl.viewport

sync.
假设我从画布和初始化相同大小的

gl.viewport

开始（

gl.vieport（0，0，300，300）

）。
之后，我在浏览器控制台中进行测试：

，使用jquery，调用类似

$（“#scene”）.width（200）、height（200）

:

函数调整窗口大小（宽度、高度）{
var ww=宽度===未定义？w.gl.viewportWidth:宽度；
var h=高度===未定义？w.gl.viewportHeight:高度；
h=h没有这样的东西是
gl.viewportWidth
或
gl.viewportHeight

如果要设置透视矩阵，应使用
canvas.clientWidth
和
canvas.clientHeight
作为透视的输入。无论浏览器缩放画布的大小如何，这些都将为您提供正确的结果。就像使用css设置画布自动缩放一样

<canvas style="width: 100%; height:100%;"></canvas>

...

var width = canvas.clientHeight;
var height = Math.max(1, canvas.clientHeight);  // prevent divide by 0
mat4.perspective(45, width / height, 1, 1000, projectionMatrix);

只是要明确的是，这里有几件事情是混为一谈的


canvas.width
，
canvas.height
=您请求的画布drawingBuffer的大小
gl.drawingBufferWidth
，
gl.drawingBufferHeight
=实际得到的大小。在99.99%的情况下，这将与
canvas.width
，
canvas.height
相同
canvas.clientWidth
，
canvas.clientHeight
=浏览器显示画布的大小

看区别

<canvas width="10" height="20" style="width: 30px; height: 40px"></canvas>

在这些情况下，
canvas.width
为10，
canvas.height
为20，
canvas.clientWidth
为30，
canvas.clientHeight
为40。通常将
canvas.style.width
和
canvas.style.height
设置为一个百分比，以便浏览器缩放它以适合任何元素意料之外的

除此之外，还有你提到的两件事


viewport=通常您希望它是drawingBuffer的大小
纵横比=通常您希望画布缩放到的大小

鉴于这些定义，
视口所用的宽度和高度
通常与
纵横比所用的宽度和高度不一样
很抱歉，我误解了gl.viewportWidth或gl.viewportHeight，这些参数是在初始化gl对象（js功能）后立即指定的，因此gl.viewportWidth=canvas.clientWidth和gl.viewportHeight=canvas.clientHeight。此外，如果拼写错误，它们将得到纠正，但当我尝试手动调用resizeWindow时，问题出现了，以防传输的参数占主导地位（参见代码）.
对于gl.drawingBufferWidth和gl.drawingBufferHeight非常感谢，这对我真的很有帮助
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

<canvas width="10" height="20" style="width: 30px; height: 40px"></canvas>

canvas.width = 10;
canvas.height = 20;
canvas.style.width = "30px";
canvas.style.height = "40px";