Differences
This shows you the differences between two versions of the page.
|
ppbg:laboratoare:10 [2023/09/28 15:28] 127.0.0.1 external edit |
ppbg:laboratoare:10 [2024/12/03 15:19] (current) andrei.lambru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 10. ===== | + | ====== Laboratorul 10 ====== |
| + | <note tip> | ||
| + | **Reamintire!!!** Puteți prezenta rezolvările cerințelor de până la 2 laboratoare, în fiecare săptămână. De exemplu, puteți prezenta laboratorul curent și pe cel din săptămâna anterioară, în totalitate sau parțial, inclusiv punctajul pentru cerința bonus :) . | ||
| + | </note> | ||
| + | ===== Programe de tip shader pentru prelucrarea geometriei ===== | ||
| + | |||
| + | În acest laborator, se introduce un nou tip de program de tip shader ce are rolul de a prelucra geometria modelelor 3D, precum triunghiurile dintr-o rețea de triunghiuri prin care este definit un astfel de model. Acest tip de program de tip shader este cunoscut în limba engleză sub numele de **geometry shader** și are scopul de a oferi control asupra geometriei desenate. În banda grafică, el apare după pasul de asamblare a triunghiurilor, pe baza indicilor specificati în [[ https://ocw.cs.pub.ro/courses/ppbg/laboratoare/04#index_buffer_object_ibo | IBO]]. O privire de ansamblu a benzii grafice, ce cuprinde și programele de tip geometry shader, poate fi vizualizată în imaginea de mai jos. | ||
| + | |||
| + | {{ :ppbg:laboratoare:geometry-shader.png?600 |}} | ||
| + | |||
| + | Pentru fiecare triunghi rezultat în urma procesului de asamblare pe baza indicilor din IBO, se apelează **o singură instanță** de program de tip geometry shader. | ||
| + | |||
| + | ====== Sintaxa limbajului GLSL ====== | ||
| + | Un exemplu de vertex shader: | ||
| + | <code glsl> | ||
| + | #version 330 | ||
| + | |||
| + | layout(location = 0) in vec3 v_position; | ||
| + | layout(location = 1) in vec2 v_texcoord; | ||
| + | |||
| + | uniform mat4 Model; | ||
| + | uniform mat4 View; | ||
| + | uniform mat4 Projection; | ||
| + | |||
| + | // coordonatele de textura ale varfului | ||
| + | // atributele de iesire ale unui program de tip vertex shader | ||
| + | // sunt atribute de intrare pentru un program de tip geometry shader | ||
| + | out vec2 vert_texcoord; | ||
| + | |||
| + | void main() | ||
| + | { | ||
| + | gl_Position = Projection * View * Model * vec4(v_position, 1.0); | ||
| + | | ||
| + | vert_texcoord = v_texcoord; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | Un exemplu de geometry shader: | ||
| + | <code glsl> | ||
| + | #version 330 | ||
| + | |||
| + | // geometria primita la intrare este formata dintr-un triunghi | ||
| + | layout(triangles) in; | ||
| + | |||
| + | // geometria transmisa la iesire | ||
| + | layout(triangle_strip, max_vertices = 3) out; | ||
| + | |||
| + | // atribut de intrare - coordonatele de textura ale varfurilor unui triunghi | ||
| + | in vec2 vert_texcoord[3]; | ||
| + | |||
| + | // atribut de iesire - coordonatele textura asociate fiecarui varf emis | ||
| + | out vec2 geom_texcoord; | ||
| + | |||
| + | void main() | ||
| + | { | ||
| + | gl_Position = gl_in[0].gl_Position; | ||
| + | geom_texcoord = vert_texcoord[0]; | ||
| + | EmitVertex(); | ||
| + | |||
| + | gl_Position = gl_in[1].gl_Position; | ||
| + | geom_texcoord = vert_texcoord[1]; | ||
| + | EmitVertex(); | ||
| + | |||
| + | gl_Position = gl_in[2].gl_Position; | ||
| + | geom_texcoord = vert_texcoord[2]; | ||
| + | EmitVertex(); | ||
| + | |||
| + | EndPrimitive(); | ||
| + | //directiva aceasta incheie primitiva | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ==== Atribute de intrare și de iesire ==== | ||
| + | |||
| + | * Trebuie specificat tipul geometriei de la intrare: <code glsl> | ||
| + | layout(triangles) in; | ||
| + | </code> Trebuie să fie unul dintre: ''points'', ''lines'', ''lines_adjacency'', ''triangles'', ''triangles_adjacency''. Aceste tipuri de date sunt descrise într-o secțiune următoare. | ||
| + | |||
| + | * Trebuie specificat tipul geometriei de la ieșire: <code glsl> | ||
| + | layout(triangle_strip, max_vertices = 3) out; | ||
| + | </code> Trebuie să fie unul dintre: ''points'', ''line_strip'', ''triangle_strip''. Aceste tipuri de date sunt descrise într-o secțiune următoare. | ||
| + | |||
| + | * Se primesc coordonatele de textură de la toată primitiva (triunghiul). Astfel că intrarea este un vector de 3 valori ''vec2''. <code glsl> | ||
| + | in vec2 vert_texcoord[3]; | ||
| + | </code> | ||
| + | * Nu este necesar să se dea dimensiunea vectorului. Astfel, codul de mai sus se poate scrie: <code glsl> | ||
| + | in vec2 vert_texcoord[]; | ||
| + | </code> | ||
| + | |||
| + | * De asemenea, există și un atribut implicit într-un program de tip geometry shader, cu numele ''gl_in'', din care ne interesează ''gl_Position'': <code glsl> | ||
| + | in gl_PerVertex | ||
| + | { | ||
| + | vec4 gl_Position; | ||
| + | ... | ||
| + | } gl_in[]; | ||
| + | </code> | ||
| + | |||
| + | * Atributele de ieșire ale unui program de tip geometry shader sunt descrise în secțiunea următoare: <code glsl> | ||
| + | out vec2 geom_texcoord; | ||
| + | </code> | ||
| + | |||
| + | ==== Emiterea de primitive ==== | ||
| + | |||
| + | Pentru fiecare vârf emis dintr-un program de tip geometry shader, se poate asocia informație despre coordonata de textură, vectorul normal, culoarea și orice alt tip de informație asociată vârfului (specificate înainte de fiecare apel ''EmitVertex()''). | ||
| + | Acestea trebuie declarate ca variabile de ieșire. | ||
| + | După cum se poate observa, valoarea lui ''geom_texcoord'' este actualizată înainte de fiecare apel ''EmitVertex()'':<code glsl> | ||
| + | gl_Position = gl_in[0].gl_Position; | ||
| + | geom_texcoord = vert_texcoord[0]; | ||
| + | EmitVertex(); | ||
| + | </code> | ||
| + | |||
| + | Într-un geometry shader, se pot emite mai multe primitive (comanda ''EmitVertex()'' se poate da o dată sau de mai multe ori). | ||
| + | |||
| + | ==== Tipuri de primitive ==== | ||
| + | |||
| + | La ieșirea unui program de tip geometry shader, se permit doar 3 tipuri de date, cum a fost menționat mai sus: ''points'', ''line_strip'' și ''triangle_strip''. Descrierea topologiei pentru fiecare tip de date este după cum urmează: | ||
| + | * ''points'': se desenează un singur pixel, la poziția din poarta de afișare în care se regăsește fiecare vârf emis de un program de tip geometry shader. Un astfel de exemplu este reprezentat vizual în imaginea de mai jos. | ||
| + | * ''line_strip'': se desenează linii între fiecare pereche consecutivă de vârfuri emise de un program de tip geometry shader. După cum se poate urmări în panoul din mijloc al imaginii de mai jos, pentru o listă de 6 vârfuri emise în ordinea { v0, v1, v2, v3, v4, v5 }, se creează o linie între vârfurile { v0, v1 }, { v1, v2 }, { v2, v3 }, { v3, v4 } și { v4, v5 }. | ||
| + | * ''triangle_strip'': se desenează triunghiuri pentru toate tripletele consecutive de vârfuri emise de un program de tip geometry shader. După cum se poate urmări în panoul din dreapta al imaginii de mai jos, pentru o listă de 7 varfuri emise în ordinea { v0, v1, v2, v3, v4, v5, v6 }, se creează un triunghi cu vârfurile { v0, v1, v2 }, { v1, v2, v3 }, { v2, v3, v4 }, { v3, v4, v5 } și { v4, v5, v6 }. | ||
| + | |||
| + | {{ :ppbg:laboratoare:triangles.png?600 |}} | ||
| + | |||
| + | La intrarea unui program de tip geometry shader se permit 5 tipuri de date, cum a fost menționat mai sus: ''points'', ''lines'', ''lines_adjacency'', ''triangles'', ''triangles_adjacency''. Pentru toate tipurile de date se primește exact **o singură instanță** din tipul de date specificat la execuția unei instanțe de program de tip geometry shader. Diferența principală între aceste tipuri de date este numărul de elemente primite în atributele de intrare ''gl_in'' și în atributele proprii programelor de tip shader. Mai exact: | ||
| + | * ''points'': se primește exact //un singur// element în atributele de intrare. | ||
| + | * ''lines'': se primesc //două// elemente în atributele de intrare. | ||
| + | * ''lines_ajacency'': se primesc //4// elemente în atributele de intrare. | ||
| + | * ''triangles'': se primesc //3// elemente în atributele de intrare. | ||
| + | * ''triangles_adjacency'': se primesc //6// elemente în atributele de intrare. | ||
| + | |||
| + | ===== Prelucrări la nivel de triunghi ===== | ||
| + | |||
| + | Printre prelucrările frecvente asupra unui triunghi, se numără calcularea unui centru și a vectorului perpendicular pe planul triunghiului. | ||
| + | |||
| + | Se poate calcula centroidul unui triunghi cu următoarea abordare: | ||
| + | <code glsl> | ||
| + | vec3 p1 = gl_in[0].gl_Position.xyz; | ||
| + | vec3 p2 = gl_in[1].gl_Position.xyz; | ||
| + | vec3 p3 = gl_in[2].gl_Position.xyz; | ||
| + | |||
| + | vec3 center = (p1 + p2 + p3) / 3; | ||
| + | </code> | ||
| + | |||
| + | Se poate calcula vectorul perpendicular pe planul triunghiului cu abordarea: | ||
| + | <code glsl> | ||
| + | vec3 p1 = gl_in[0].gl_Position.xyz; | ||
| + | vec3 p2 = gl_in[1].gl_Position.xyz; | ||
| + | vec3 p3 = gl_in[2].gl_Position.xyz; | ||
| + | |||
| + | vec3 v12 = normalize(p2 - p1); | ||
| + | vec3 v13 = normalize(p3 - p1); | ||
| + | |||
| + | // produs vectorial | ||
| + | vec3 normal = cross(v12, v13); | ||
| + | </code> | ||
| + | |||
| + | ===== Cerințe laborator ====== | ||
| + | |||
| + | - 0.05p - Completați fișierele ''LabShader.GS.glsl'' și ''Texture.FS.glsl'' pentru a desena geometria arcașei pe baza texturii. După acest pas, rezultatul vizual ar trebui să fie urmatorul: {{ :ppbg:laboratoare:geometry-shader1.png?600 |}} | ||
| + | - 0.05p - Modificați programul de tip geometry shader din fișierul ''LabShader.GS.glsl'' pentru a desena obiectele pentru care se utilizează acest program de tip shader de cel puțin 5 ori, la poziții diferite în scenă. Desenările se pot realiza pe aceeași linie, la intervale regulate între ele. | ||
| + | - 0.1p - Completați fișierele ''Triangle.GS.glsl'' și ''Color.FS.glsl'' pentru a obține următorul rezultat vizual: {{ :ppbg:laboratoare:geometry-shader2.png?600 |}} | ||
| + | * Utilizați programul de tip shader pentru desenarea triunghiului din centru. | ||
| + | * Pentru a obține rezultatul vizual din imagine, la ieșire trebuie transmise mai multe triunghiuri :) . | ||
| + | - 0.05p - Creați un alt program de tip geometry shader cu care să realizați o animație de "explozie" a geometriei, similară cu cea din imaginea următoare: {{ :ppbg:laboratoare:geometry-shader.gif?600 |}} | ||
| + | * Aveți în vedere că animația de "explozie" se resetează după un interval de timp. Hint: utilizați timpul aplicației și informația vectorilor normali. | ||
| + | - 0.05p - Creați un alt program de tip geometry shader cu care să desenați marcaje liniare ce specifică direcția vectorului normal în fiecare vârf al rețelei de triunghiuri ce formează geometria. | ||
| + | * Desenați de două ori geometria: odată se utilizează un program de tip shader care desenează triunghiurile peste care se aplică textura și o a doua oară în care se utilizează un program de tip geometry shader cu care se desenează liniile ce reprezintă vectorii normali. | ||
| + | * Specificați tipul geometriei transmise la ieșire în programul de tip geometry shader la ''line_strip''. | ||
| + | * Trebuie desenată o linie pentru fiecare vârf, cu care se specifică direcția vectorului normal din informația vârfului. | ||
| + | * Rezultatul vizual ar trebui să fie similar cu cel din imaginea de mai jos: {{ :ppbg:laboratoare:geometry-shader3.png?600 |}} | ||
| + | |||
| + | Bonus: Creați un alt program de tip geometry shader cu care să realizați un efect de explozie în care geometria este afectată de gravitație, similar cu cea din imaginea de mai jos: | ||
| + | {{ :ppbg:laboratoare:geometry-shader1.gif?600 |}} | ||
| + | |||
| + | Utilizați ecuația mișcării: | ||
| + | |||
| + | |||
| + | $$ | ||
| + | P = P_0 + \vec{V} \cdot t + \frac{1}{2} \cdot \vec{a} \cdot t^2 | ||
| + | $$ | ||
| + | |||
| + | unde V este o direcție de mișcare specifică fiecărui triunghi :), iar a este vec3(0, -1, 0). Puteți utiliza și alte valori pentru acceleratia gravitațională. t este timpul animației. Aveți în vedere că triunghiurile nu coboară sub valoarea 0 pentru componenta y. Animația se resetează după un anumit timp. | ||
