Grafica pe calculator: Grafica 3D cu WebGL – Transformări în 3D – Scripturi shader

Pe măsură ce trecem în 3D, va trebui să lucrăm cu transformări mai complexe. Pentru asta, ne vom baza în principal pe o bibliotecă JavaScript open-source pentru matematică vectorială și matrice. De asemenea, va trebui să implementăm iluminat și material, ceea ce vom face direct în GLSL.

Desenarea primitivelor este aceeași în 3D, cu excepția faptului că există trei coordonate pe vârf în loc de două. Transformările în 3D sunt, de asemenea, similare cu 2D, dar pentru transformări creșterea complexității care vine cu cea de-a treia dimensiune este substanțială. Această secțiune acoperă partea geometrică a graficelor 3D cu WebGL. În secțiunea următoare, vom trece la problema luminii și materialelor.

Scripturile Shader

Dar înainte de a începe să lucrăm mai serios cu WebGL, va fi bine să avem o modalitate mai bună de a include codul sursă shader pe o pagină web. Până acum, am stocat codul în șiruri literale JavaScript. Acest format este greu de citit și foarte greu de editat. Există o altă tehnică, care este adesea folosită: Pune codul sursă al shaderului GLSL în elementele <script>. Iată un exemplu pentru un vertex shader:

<script type="x-shader/x-vertex" >
    attribute vec3 a_coords;
    uniform mat4 modelviewProjection;
    void main() {
        vec4 coords = vec4(a_coords,1.0);
        gl Position = modelviewProjection * coords;
    }
</script>

Acesta se bazează pe faptul că un browser web nu va recunoaște tipul listat în elementul <script>, deci nu va încerca să execute scriptul. Cu toate acestea, stochează conținutul elementului <script> în structura de date DOM care reprezintă pagina web. Conținutul poate fi preluat ca șir folosind API-ul DOM standard. Nu voi explica funcțiile API care sunt utilizate, dar iată o funcție care ia id-ul elementului de script ca parametru și returnează un șir care conține textul din interiorul elementului:

function getTextContent( elementID ) {
    var element = document.getElementById(elementID);
    var node = element.firstChild;
    var str = "";
    while (node) {
        if (node.nodeType == 3) // this is a text node
            str += node.textContent;
        node = node.nextSibling;
    }
    return str;
}

Pentru exemplul de mai sus, aș apela getTextContent („vshader”) și aș folosi valoarea returnată ca cod sursă pentru vertex shader. Exemplele de programe pentru acest capitol folosesc această tehnică. Pentru fragment shader, voi folosi tipul „x-shader/x-fragment”, dar de fapt valoarea tipului nu contează atâta timp cât este ceva pe care browserele web nu îl vor recunoaște ca un limbaj de scripting legitim. (Apropo, elementele JavaScript <script> pot folosi „text/javascript” ca tip, dar aceasta este valoarea implicită și este de obicei omisă.)

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