Webgl gl.viewport change

Question

Ho un problema con il ridimensionamento della tela e la sincronizzazione gl.viewport.
Diciamo che inizio con la tela 300x300 canvas e l'inizializzazione di gl.viewport alle stesse dimensioni (gl.vieport(0, 0, 300, 300)).
Dopo di che, nella console del browser Faccio le mie prove:

1. I'm changing size of my canvas, utilizzando jQuery, chiamando qualcosa come $("#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); 
   } 
   

   • funzione che è la sincronizzazione finestra con dimensioni richieste

Purtroppo, la mia gl.viewport dopo questa chiamata richiede solo una parte della mia tela.
Qualcuno potrebbe dirmi cosa sta andando storto?

Answer 1

Non esiste una cosa è gl.viewportWidth o gl.viewportHeight

Se si desidera impostare il vostro punto di vista a matrice si dovrebbe usare canvas.clientWidth e canvas.clientHeight come gli ingressi alla prospettiva. Quelli ti daranno i risultati corretti indipendentemente da quale dimensione il browser ridimensiona la tela. Come in se si imposta la scala auto canvas 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); 

Per quanto riguarda il viewport. Utilizzare gl.drawingBufferWidth e gl.drawingBufferHeight. Questo è il modo corretto per trovare la dimensione della vostra drawingBuffer

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

Giusto per essere chiari ci sono diverse cose conflated qui

• canvas.width, canvas.height = formato richiesto drawingBuffer della tela per essere
• gl.drawingBufferWidth , gl.drawingBufferHeight = dimensioni effettivamente ottenute. Nel 99,99% dei casi questo sarà uguale a canvas.width, canvas.height.
• canvas.clientWidth, canvas.clientHeight = la dimensione del browser sta visualizzando la tela.

Per vedere la differenza

<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"; 

In questi casi canvas.width saranno 10, canvas.height sarà di 20, canvas.clientWidth sarà 30, canvas.clientHeight saranno 40. E 'comune per impostare canvas.style.width e canvas.style.height in percentuale in modo che il browser lo ridimensiona per adattarsi a qualsiasi elemento in cui è contenuto.

In cima a che ci sono le 2 cose hai tratto

• viewport = in genere si desidera che questo sia la dimensione del vostro rapporto di aspetto drawingBuffer
• = in genere si desidera che questo sia la dimensione del vostro tela viene scalata a

date queste definizioni la larghezza e l'altezza utilizzata per viewport spesso non è uguale alla larghezza e altezza utilizzata per aspect ratio.