Webgl gl.viewport更改

Question

我有一个画布大小调整问题和gl.viewport同步问题。
假设我以相同尺寸（gl.vieport(0, 0, 300, 300)）开始画布300x300 canvas和初始化gl.viewport。
之后，在浏览器的控制台，我做我的测试：

1. I'm changing size of my canvas，使用jQuery，呼吁像$("#scene").width(200).height(200)

2. 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, 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设置为百分比，以便浏览器对其进行缩放以适应所包含的任何元素。

之上，有你带了两件事情

• 视=通常你想这是=通常你想这是大小的drawingBuffer
• 宽高比的大小你画布缩放到

鉴于这些定义的宽度和高度用于viewport往往是不一样的宽度和高度用于aspect ratio。