Webgl gl.viewport更改

我有一个画布调整大小和gl.viewport同步的问题.
假设我从画布 300×300 canvas开始,并以相同大小(gl.vieport(0,300,300))的gl.viewport的初始化开始.
之后,在浏览器的控制台中,我做了我的测试：

> I’m changing size of my canvas,使用jquery,调用$(“#scene”).width(200).height(200)
> After this,i’m calling my resizeWindow function：

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,ww,h);
    mat4.identity(projectionMatrix);
    mat4.perspective(45,ww / h,1,1000.0,projectionMatrix);
    mat4.identity(modelViewMatrix);
}

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

不幸的是,这次调用后,我的gl.viewport只占了我画布的一部分.
有人会告诉我出了什么问题吗？

解决方法

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

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

gl.viewport(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的大小
>纵横比=通常你希望这是你的画布缩放的大小

给定这些定义,用于视口的宽度和高度通常与宽高比的宽度和高度不同.

原文地址：https://www.jb51.cc/html5/168068.html