10

我在调整画布大小和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在这个电话之后只占用了我画布的一部分。
谁能告诉我出了什么问题？

4

1 回答 1

19

没有这样的事情是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。这是找到您的绘图缓冲区大小的正确方法

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

为了清楚起见，这里有几件事混为一谈

  • canvas.width, canvas.height= 您要求画布的绘图缓冲区的大小
  • 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。

于 2012-08-06T19:07:49.223 回答