Webgl gl.viewport改变

Question

我有画布调整大小和gl.viewport同步的问题.
假设我从画布300x300画布开始,并gl.viewport以相同尺寸(gl.vieport(0, 0, 300, 300))初始化.
之后,在浏览器的控制台中,我进行了测试:

1. 我正在改变画布的大小,使用jquery,调用类似的东西$("#scene").width(200).height(200)

2. 在此之后,我正在调用我的resizeWindow函数:

   function resizeWindow(width, height){
       var ww = width === undefined? w.gl.viewportWidth : width;
       var h = height  === undefined? w.gl.viewportHeight : height;
       h = h <= 0? 1 : h;
       w.gl.viewport(0, 0, ww, h);
       mat4.identity(projectionMatrix);
       mat4.perspective(45, ww / h, 1, 1000.0, projectionMatrix);
       mat4.identity(modelViewMatrix);
   }
   

   • 将视口与所需尺寸同步的功能.

不幸的是,我的gl.viewport这个电话只占了我画布的一部分.
谁能告诉我出了什么问题？

Answer 1

没有这样的事情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);

至于视口.使用gl.drawingBufferWidth和gl.drawingBufferHeight.这是找到drawingBuffer大小的正确方法

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

需要明确的是,这里有几件事情

• 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.style.width = "30px";
canvas.style.height = "40px";

在这些情况下,canvas.width将是10,canvas.height将是20,canvas.clientWidth将是30,canvas.clientHeight将是40.通常设置canvas.style.width和canvas.style.height百分比,以便浏览器缩放它以适应它包含的任何元素.

最重要的是,你提到了两件事

• viewport =通常你希望它是你的drawingBuffer的大小
• 宽高比=通常你希望它是你的画布缩放到的大小

鉴于这些定义,用于的宽度和高度viewport通常与用于的宽度和高度不同aspect ratio.