WebGL – Pipeline programabilă – Contextul grafic WebGL

Pentru a utiliza WebGL, aveți nevoie de un context grafic WebGL. Contextul grafic este un obiect JavaScript ale cărui metode implementează partea JavaScript a API-ului WebGL. WebGL își desenează imaginile într-un canvas HTML, același tip de element <canvas> care este utilizat pentru API-ul 2D care a fost tratat în Secțiunea 2.6. Un context grafic este asociat cu un anumit canvas și poate fi obținut prin apelarea funcției canvas.getContext(„webgl”), unde canvas este un obiect DOM care reprezintă canvasul. Câteva browsere (în special Internet Explorer și Edge) necesită „experimental-webgl” ca parametru pentru getContext, așa că codul meu pentru crearea unui context WebGL arată adesea cam așa:

canvas = document.getElementById("webglcanvas");
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

Aici, gl este contextul grafic WebGL. Acest cod ar putea necesita o despachetare. Acesta este cod JavaScript care ar apărea ca parte a unui script în codul sursă pentru o pagină web. Prima linie presupune că sursa HTML pentru pagina web include un element canvas cu id=”webglcanvas”, precum

<canvas width="800" height="600" ></canvas>

În a doua linie, canvas.getContext(„webgl”) va returna null dacă browserul web nu acceptă „webgl” ca parametru pentru getContext; în acest caz, va fi evaluat al doilea operand al operatorului ||. Această utilizare a lui || este un idiom JavaScript, care folosește faptul că null este considerat a fi fals atunci când este utilizat într-un context boolean. Așadar, a doua linie, unde este creat contextul WebGL, este echivalentă cu:

▌gl = canvas.getContext("webgl");
▌if ( ! gl ) {
▌    gl = canvas.getContext("experimental-webgl");
▌}

Este posibil ca și canvas.getContext(„experimental-webgl”) să fie nul, dacă browserul acceptă API-ul 2D canvas, dar nu acceptă WebGL. În plus, dacă browserul nu are deloc suport pentru <canvas>, codul va genera o excepție. Așadar, utilizez o funcție similară cu următoarea pentru inițializarea programelor mele WebGL:

▌function init() {
▌    try {
▌        canvas = document.getElementById("webglcanvas");
▌        gl = canvas.getContext("webgl") ||
▌            canvas.getContext("experimental-webgl");
▌        if ( ! gl ) {
▌            throw "Browser does not support WebGL";
▌        }
▌    }
▌    catch (e) {
▌            .
▌            .  // report the error
▌            .
▌        return;
▌    }
▌        .
▌        .  // other JavaScript initialization
▌        .
▌    initGL(); // a function that initializes the WebGL graphics context
▌}

În această funcție, canvas și gl sunt variabile globale. Iar initGL() este o funcție definită în altă parte a scriptului care inițializează contextul grafic, inclusiv crearea și instalarea programelor shader. Funcția init() ar putea fi apelată, de exemplu, de către gestionarul de evenimente onload pentru elementul <body> al paginii web:

<body onload="init()">

Odată ce contextul grafic, gl, a fost creat, acesta poate fi utilizat pentru a apela funcții în API-ul WebGL. De exemplu, comanda pentru activarea testului de adâncime, care a fost scrisă ca glEnable(GL_DEPTH_TEST) în OpenGL, devine

gl.enable( gl.DEPTH_TEST );

Rețineți că atât funcțiile, cât și constantele din API sunt referențiate prin contextul grafic. Numele „gl” pentru contextul grafic este convențional, dar rețineți că este doar o variabilă JavaScript obișnuită al cărei nume depinde de programator.

Deși utilizez canvas.getContext(„experimental-webgl”) în programele mele exemplu, în general nu îl voi include în exemplele de cod din text.

Sursa: David J. Eck, Introduction to Computer Graphics (Eck), LibreTexts, licența CC BY-NC-SA 4.0. Traducere și adaptare Nicolae Sfetcu