假设我从画布 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只占了我画布的一部分.
有人会告诉我出了什么问题吗？
解决方法
如果要设置透视矩阵,则应使用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的大小
>纵横比=通常你希望这是你的画布缩放的大小
给定这些定义,用于视口的宽度和高度通常与宽高比的宽度和高度不同.