Webgl gl.viewport cambio

Question

Tengo un problema con el cambio de tamaño del lienzo y la sincronización gl.viewport.
Digamos que empiezo con el lienzo 300x300 canvas y la inicialización de gl.viewport en los mismos tamaños (gl.vieport(0, 0, 300, 300)).
Después de eso, en la consola del navegador hago mis pruebas:

1. I'm changing size of my canvas, usando jQuery, llamar algo así como $("#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); 
   } 
   

   • función que está sincronizando ventana con dimensiones requeridas

Desafortunadamente, mi gl.viewport después de esta llamada tarda sólo una parte de mi lienzo.
¿Alguien podría decirme qué está pasando mal?

Answer 1

No hay tal cosa es gl.viewportWidth o gl.viewportHeight

Si desea establecer su matriz de punto de vista se debe utilizar canvas.clientWidth y canvas.clientHeight como sus aportaciones a la perspectiva. Esos le darán los resultados correctos, independientemente del tamaño del navegador escalar el lienzo. Al igual que si establece la escala automática de lienzo con 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); 

En cuanto a la ventana gráfica. Use gl.drawingBufferWidth y gl.drawingBufferHeight. Esa es la forma correcta para encontrar el tamaño de su drawingBuffer

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

Para que quede claro, hay varias cosas confunden aquí

• canvas.width, canvas.height = tamaño que solicitó drawingBuffer de la lona para ser
• gl.drawingBufferWidth , gl.drawingBufferHeight = tamaño que realmente obtuviste. En el 99.99% de los casos, esto será lo mismo que canvas.width, canvas.height.
• canvas.clientWidth, canvas.clientHeight = tamaño del navegador muestra su lienzo.

Para ver la diferencia

<canvas width="10" height="20" style="width: 30px; height: 40px"></canvas> 

o

canvas.width = 10; 
canvas.height = 20; 
canvas.style.width = "30px"; 
canvas.style.height = "40px"; 

En estos casos canvas.width habrá 10, canvas.height habrá 20, canvas.clientWidth habrá 30, canvas.clientHeight habrá 40. Es común para establecer canvas.style.width y canvas.style.height en un porcentaje para que el navegador lo adapte a cualquier elemento en el que esté contenido.

Además de eso existen las 2 cosas que trajo hasta

• ventana = general desea que este sea el tamaño de su relación de aspecto drawingBuffer
• = general desea que este sea el tamaño de su lona se escala para

Dadas estas definiciones la anchura y altura usado para viewport a menudo no es la misma que la anchura y la altura usado para aspect ratio.