Differences
This shows you the differences between two versions of the page.
|
egc:laboratoare:09 [2018/12/04 14:08] ovidiu.dinu [Utilizarea texturii] |
egc:laboratoare:09 [2021/11/12 19:22] (current) victor.asavei [Cerinte laborator] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Laboratorul 09 ====== | ====== Laboratorul 09 ====== | ||
| + | **Video Laborator 9**: https://youtu.be/YS262bweU2Q\\ | ||
| + | **Autor**: [[bogdan.teaca.dev@gmail.com | Bogdan Teacă]] | ||
| ==== Introducere ==== | ==== Introducere ==== | ||
| - | Am invatat in laboratoarele trecute ca, pentru a adauga detalii obiectului nostru, putem folosi culori asociate fiecarui vertex. Pentru a putea crea obiecte detaliate, asta ar insemna sa avem foarte multi vetecsi astfel incat sa putem specifica o gama cat mai variata de culori si ar ocupa foarte multa memorie. Pentru a rezolva aceasta problema se folosesc texturi. | + | Am invatat in laboratoarele trecute ca, pentru a adauga detalii obiectului nostru, putem folosi culori asociate fiecarui vertex. Pentru a putea crea obiecte detaliate, asta ar insemna sa avem foarte multi vertecsi astfel incat sa putem specifica o gama cat mai variata de culori si ar ocupa foarte multa memorie. Pentru a rezolva aceasta problema se folosesc **texturi**. |
| Pentru scopul acestui laborator, o textura este o **imagine 2D** (exista si texturi 1D si [[https://gamedev.stackexchange.com/a/9674|3D]]) care este folosita pentru a adauga detalii obiectului. Ganditi-va la textura ca la o bucata de hartie (cu un desen pe ea) care este impaturita peste obiectul 3D. Pentru ca putem adauga oricate detalii vrem intr-o singura imagine, putem da iluzia ca obiectul este foarte detaliat fara sa adaugam vertecsi in plus. | Pentru scopul acestui laborator, o textura este o **imagine 2D** (exista si texturi 1D si [[https://gamedev.stackexchange.com/a/9674|3D]]) care este folosita pentru a adauga detalii obiectului. Ganditi-va la textura ca la o bucata de hartie (cu un desen pe ea) care este impaturita peste obiectul 3D. Pentru ca putem adauga oricate detalii vrem intr-o singura imagine, putem da iluzia ca obiectul este foarte detaliat fara sa adaugam vertecsi in plus. | ||
| Line 14: | Line 15: | ||
| ==== Maparea texturilor ==== | ==== Maparea texturilor ==== | ||
| - | Pentru a mapa (impacheta) o textura peste un triunghi, trebuie sa specificam in ce parte din textura corespunde fiecare vertex. Asadar, fiecare vertex ar trebui sa aiba asociata un set de coordonate de textura (2D adica ''glm::vec2'') care specifica partea din textura unde isi are locul. Interpolarea intre vertecsi se face in //fragment shader//. | + | Pentru a mapa (impacheta) o textura peste un triunghi, trebuie sa specificam in ce parte din textura corespunde fiecare vertex. Asadar, fiecare vertex ar trebui sa aiba asociat un set de coordonate de textura (2D adica ''glm::vec2'') care specifica partea din textura unde isi are locul. |
| Coordonatele de textura se afla in intervalul $[0, 1]$ pentru axele x si y (in cazul 2D). Coordonatele texturii incep din punctul $(0, 0)$ pentru coltul din stanga jos a imaginii pana la punctul $(1, 1)$ care se afla in coltul din dreapta sus. | Coordonatele de textura se afla in intervalul $[0, 1]$ pentru axele x si y (in cazul 2D). Coordonatele texturii incep din punctul $(0, 0)$ pentru coltul din stanga jos a imaginii pana la punctul $(1, 1)$ care se afla in coltul din dreapta sus. | ||
| Line 38: | Line 38: | ||
| {{ egc:laboratoare:lab9texturephoto3.png |}} | {{ egc:laboratoare:lab9texturephoto3.png |}} | ||
| + | |||
| + | Pentru a seta manual modul de wrapping al texturii se pot folosi: | ||
| + | |||
| + | <code cpp> | ||
| + | glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrapping_mode); // modul de wrapping pe orizontala | ||
| + | glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrapping_mode); // modul de wrapping pe verticala | ||
| + | </code> | ||
| Dupa ce avem pixelii imaginii incarcate putem genera un __obiect de tip textura__ de OpenGL folosind comanda: | Dupa ce avem pixelii imaginii incarcate putem genera un __obiect de tip textura__ de OpenGL folosind comanda: | ||
| Line 59: | Line 66: | ||
| <code cpp>glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);</code> | <code cpp>glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);</code> | ||
| - | * Primul argument specifica tipul de textura. Daca punem ''GL_TEXTURE_2D'', inseamna ca aceasta functie va asocia obiectului de tip textura (trecut anterior prin ''bind'') o textura 2D (deci daca avem bind-uite un ''GL_TEXTURE_1D'' sau ''GL_TEXTURE_3D'', acestea nu vor fi afectate). | + | * Primul argument specifica tipul de textura. Daca punem ''GL_TEXTURE_2D'', inseamna ca aceasta functie va asocia obiectului de tip textura (trecut anterior prin ''bind'') o textura 2D (deci daca avem legate un ''GL_TEXTURE_1D'' sau ''GL_TEXTURE_3D'', acestea nu vor fi afectate). |
| * Al 2-lea argument specifica nivelul de [[https://en.wikipedia.org/wiki/Mipmap|mipmap]] pentru care vrem sa cream imaginea. Vom explica ce este un mipmap pe parcusul laboratorului. Pentru moment, putem sa lasam valoarea aceasta 0. | * Al 2-lea argument specifica nivelul de [[https://en.wikipedia.org/wiki/Mipmap|mipmap]] pentru care vrem sa cream imaginea. Vom explica ce este un mipmap pe parcusul laboratorului. Pentru moment, putem sa lasam valoarea aceasta 0. | ||
| * Al 3-lea argument specifica formatul in care vrem sa fie stocata imaginea. In cazul nostru este RGB. | * Al 3-lea argument specifica formatul in care vrem sa fie stocata imaginea. In cazul nostru este RGB. | ||
| Line 67: | Line 74: | ||
| * Ultimul argument il reprezinta vectorul de date al imaginii. | * Ultimul argument il reprezinta vectorul de date al imaginii. | ||
| - | Asadar, ''glTextImage2D'' incarca o imagine definita prin __datele efective__, adica un array de ''unsigned char''s, pe __obiectul de tip textura__ legat la __punctul de legare__ ''GL_TEXTURE_2D'' al __unitatii de texturare__ active la momentul curent, nivelul 0 (o sa luam aceasta constanta ca atare pentru moment), cu formatul intern ''GL_RGB'' cu lungimea width si cu inaltimea height, din formatul ''GL_RGB''. Datele citite sunt de tip ''GL_UNSIGNED_BYTE'' (adica ''unsigned char'') si sunt citite de la adresa data. | + | **Asadar:** ''glTextImage2D'' incarca o imagine definita prin __datele efective__, adica un array de ''unsigned char''s, pe __obiectul de tip textura__ legat la __punctul de legare__ ''GL_TEXTURE_2D'' al __unitatii de texturare__ active la momentul curent, nivelul 0 (o sa luam aceasta constanta ca atare pentru moment), cu formatul intern ''GL_RGB'' cu lungimea width si cu inaltimea height, din formatul ''GL_RGB''. Datele citite sunt de tip ''GL_UNSIGNED_BYTE'' (adica ''unsigned char'') si sunt citite de la adresa data. |
| + | |||
| + | Pentru a va cimenta si mai mult aceste notiuni, gasiti detalii si exemple suplimentare **[[https://stackoverflow.com/a/8887844|in aceasta postare]]**. | ||
| ==== Utilizarea texturii ==== | ==== Utilizarea texturii ==== | ||
| Line 76: | Line 85: | ||
| glActiveTexture(GL_TEXTURE0); | glActiveTexture(GL_TEXTURE0); | ||
| - | glBindTexture(GL_TEXTURE_2D, texture1); | + | glBindTexture(GL_TEXTURE_2D, texture1->GetTextureID()); |
| glUniform1i(glGetUniformLocation(shader->program, "texture_1"), 0); | glUniform1i(glGetUniformLocation(shader->program, "texture_1"), 0); | ||
| Line 82: | Line 91: | ||
| glActiveTexture(GL_TEXTURE1); | glActiveTexture(GL_TEXTURE1); | ||
| - | glBindTexture(GL_TEXTURE_2D, texture2); | + | glBindTexture(GL_TEXTURE_2D, texture2->GetTextureID()); |
| glUniform1i(glGetUniformLocation(shader->program, "texture_2"), 1); | glUniform1i(glGetUniformLocation(shader->program, "texture_2"), 1); | ||
| Line 110: | Line 119: | ||
| </code> | </code> | ||
| - | Multitexturarea este folositare in momentul in care reprezentam o un obiect topologic complex, de exemplu frunze, cu o textura ce are o topologie mult inferioara ca si complexitate (de exemplu un quad). Daca utilizam o asemenea reducere de complexitate trebuie sa avem o metoda prin care sa putem elimina, la nivel de fragment, fragmentele ce nu sunt necesare (evidentiate in imaginea urmatoare). | + | Multitexturarea este folositare in momentul in care reprezentam un obiect complex din punct de vedere topologic, de exemplu frunze, cu o textura ce are o topologie mult inferioara ca si complexitate (de exemplu un quad). Daca utilizam o asemenea reducere de complexitate, trebuie sa avem o metoda prin care sa putem elimina, la nivel de fragment, acele fragmente care nu sunt necesare (evidentiate in imaginea urmatoare). |
| {{ :egc:laboratoare:lab9texturephoto4.png |}} | {{ :egc:laboratoare:lab9texturephoto4.png |}} | ||
| - | Puntru aceasta putem sa folosim o textura de opacitate (alpha) care ne spune care sunt fragmentele reale, vizibile, ale obiectului. Combinatia de textura de opacitate si textura de culoare este suficienta pentru definirea acestui bambus: | + | Pentru aceasta, putem sa folosim o textura de opacitate (alpha) care ne spune care sunt fragmentele reale, vizibile, ale obiectului. Combinatia de textura de opacitate si textura de culoare este suficienta pentru definirea acestui bambus: |
| {{ egc:laboratoare:lab9texturephoto5.png |}} | {{ egc:laboratoare:lab9texturephoto5.png |}} | ||
| + | |||
| + | Elementele individuale ale unui ''vec4'' pot fi accesate utilizand numele componentelor:\\ | ||
| + | - Pentru date geometrice: ''x, y, z, w''\\ | ||
| + | - Pentru date legate de culori (red, green, blue, alpha): ''r, g, b, a''\\ | ||
| + | - Pentru date de texturare: ''s, t, p, q''\\ | ||
| Pentru a omite desenarea fragmentelor care nu sunt vizibile se foloseste directiva de shader ''discard''. | Pentru a omite desenarea fragmentelor care nu sunt vizibile se foloseste directiva de shader ''discard''. | ||
| <code glsl> | <code glsl> | ||
| - | if (visible == 0) { | + | if (alpha == 0) { |
| discard; | discard; | ||
| } | } | ||
| Line 145: | Line 159: | ||
| {{ egc:laboratoare:tutorial6-gl_linear.png |}} | {{ egc:laboratoare:tutorial6-gl_linear.png |}} | ||
| - | Se pot folosi filtre diferite pentru cazul in care vrem sa marim imaginea si cand vrem sa o micsoram (//upscaling// si //downscaling//). Filtrul se specifica folosind metoda ''glTextPameter'': | + | Se pot folosi filtre diferite pentru cazul in care vrem sa marim imaginea si cand vrem sa o micsoram (//upscaling// si //downscaling//). Filtrul se specifica folosind metoda ''glTexParameteri'': |
| <code cpp> | <code cpp> | ||
| Line 195: | Line 209: | ||
| - Descarcati [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|framework-ul de laborator]] | - Descarcati [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|framework-ul de laborator]] | ||
| - | - Completati functia ''RenderSimpleMesh'' astfel inca sa trimiteti corect textura catre Shader | + | - Completati functia ''RenderSimpleMesh'' astfel incat sa trimiteti corect textura catre Shader |
| - Completati coordonatele de textura pentru patrat | - Completati coordonatele de textura pentru patrat | ||
| - Completati shaderele astfel incat sa foloseasca coordonatele de textura | - Completati shaderele astfel incat sa foloseasca coordonatele de textura | ||
| Line 202: | Line 216: | ||
| * Ex: Faceti alpha discard daca valoarea ''alpha'' este mai mica de 0.5f | * Ex: Faceti alpha discard daca valoarea ''alpha'' este mai mica de 0.5f | ||
| - Creati si incarcati pe GPU o textura random | - Creati si incarcati pe GPU o textura random | ||
| - | * completati functia ''Laborator9::CreateRandomTexture'' | + | * completati functia ''Lab9::CreateRandomTexture'' |
| * ! generati mipmaps : ''glGenerateMipmap(GL_TEXTURE_2D);'' | * ! generati mipmaps : ''glGenerateMipmap(GL_TEXTURE_2D);'' | ||
| * textura va fi folosita in cadrul randarii pe cubul din stanga | * textura va fi folosita in cadrul randarii pe cubul din stanga | ||
| Line 222: | Line 236: | ||
| Bonus: | Bonus: | ||
| - | - Sa se trimita timpul aplicatiei ''Engine::GetElapsedTime()'' catre fragment shader si sa se utilizeze pentru a cicla prin textura de pe globul pamantesc (pe coordonata OY) (doar pentru acel obiect, deci e nevoie de si de o variabila uniform pentru a testa obiectul randat) | + | - Sa se trimita timpul aplicatiei ''Engine::GetElapsedTime()'' catre fragment shader si sa se utilizeze pentru a cicla prin textura de pe globul pamantesc (pe coordonata OX) (doar pentru acel obiect, deci e nevoie de si de o variabila uniform pentru a testa obiectul randat) |
| - Sa se roteasca spre directia camerei (doar pe OY) quadul cu textura de iarba astfel incat sa fie orientat tot timpul catre camera. <hidden>Sa se randeze inca de 2 ori aceasi textura in aceasi pozitie dar cu o rotatie (fata de cea pricipala) de +- 30 grade. | - Sa se roteasca spre directia camerei (doar pe OY) quadul cu textura de iarba astfel incat sa fie orientat tot timpul catre camera. <hidden>Sa se randeze inca de 2 ori aceasi textura in aceasi pozitie dar cu o rotatie (fata de cea pricipala) de +- 30 grade. | ||
| </hidden> | </hidden> | ||
