Ranije je spomenuto, kada su se kreirali podaci koji opisuju temena kvadrata, da WebGL radi sa koordinatama čije su vrednosti u intervalu [-1, 1]. Šta bi se desilo da su u prethodnom primeru bile zadate "pogrešne" vrednosti za koordnate?
Ako se promeni vertex niz tako da koordinate budu definisane kao na listingu ispod neće doći ni do kakve greške, ali deo koji je van canvas-a neće biti vidljiv, odnosno neće biti iscrtan.
var vertices = [
-0.5, -0.5, 0.0,
1.5, -0.5, 0.0,
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0
];
Viewport je ono što definiše definiše okvir u kom će se rezultat iscrtavati.
U primerima do sada je korišćen predefinisani viewport.
Prilikom definisanja konteksta za canvas gl=canvas.getContext("webgl") kreiran je viewport kome se u centru nalazi (0,0),
a i x i y koordinate se pružaju u vrednostima između -1 i 1 i koji je širok i visok kao dati canvas.
Sve što se nađe van zadataog viewport-a neće biti iscrtano.
Ovde je važno napomenuti da kada je jednom kreiran viewport, WebGL neće prilagoditi njegovu veličinu ukoliko dođe do naknadne promene dimenzije canvas-a. Zato će, ukoliko se desi da se promeni dimenzija canvas-a tokom aplikacije, doći i do promene rezolucije slike.
Ovo se jednostavno može testirati tako što se prebaci definicija dimenzija canvas elementa u css pravilo.
<style>
canvas {background-color: #f5cd2b; width: 400px; height: 400px}
</style>
Css pravilo se u ovom primeru primenjuje nakon kreiranja konteksta što znači da je na početku kreiran viewport dimenzija 300x150
(podrazumevane vrednosti za širinu i visinu canvas elementa).
WebGL je iscrtao sliku na takvom viewport-u, a nakon toga je css pravilo izvršilo promenu dimenzija canvas elementa.
S obzirom da se WebGL neće prilagoditi svoj viewport novim dimenzijama dobiće se skalirana slika, odnosno rezultat koji nije poželjan.
Zbog toga treba voditi računa o dimenzijama i ukoliko je potrebno promeniti dimenziju canvas-a u toku aplikacije
mora se programski odreagovati i postaviti dobre dimenzije i za viewport.
U specifikaciji WebGL-a se naglašava da se od aplikacije očekuje da koristeći onresize handler reaguje na promene u dimenzijama canvas objekta.
Dimenzije za viewport se mogu postaviti sledećom naredbom.
void viewport(GLint x, GLint y, GLsizei width, GLsizei height)
Ovo dalje znači i da se iscrtavanje ne mora izvršavati na celom canvas-u što je pokazano na sledećem primeru.
canvas.width = 400;
canvas.height = 400;
gl.viewport(0, 0, canvas.width/2.0, canvas.height/2.0);