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。