Differences
This shows you the differences between two versions of the page.
|
ipg:laboratoare:03 [2025/09/30 12:29] 127.0.0.1 external edit |
ipg:laboratoare:03 [2025/10/23 12:05] (current) andrei.lambru |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| <note important> | <note important> | ||
| - | Pentru rezolvarea cerințelor din acest laborator, aveți nevoie de codul utilizat în rezolvarea cerințelor din cadrul laboratorului 2. În laboratoarele 3 și 4, vom reutiliza acest cod. În situatia în care nu ați rezolvat [[:ipg:laboratoare:02|laboratorul 2]], va trebui sa îl realizați mai întâi pe el și ulterior să reveniți la cerințele celui curent. | + | Pentru rezolvarea cerințelor din acest laborator, aveți nevoie de codul utilizat în rezolvarea cerințelor din cadrul laboratorului 2. În laboratoarele 3 și 4 vom reutiliza acest cod. În situația în care nu ați rezolvat [[:ipg:laboratoare:02|laboratorul 2]], va trebui să îl realizați mai întâi pe el și ulterior să reveniți la cerințele celui curent. |
| </note> | </note> | ||
| Line 11: | Line 11: | ||
| ===== Transformări în spații 2D ===== | ===== Transformări în spații 2D ===== | ||
| - | În laboratorul anterior, am văzut cum se poate desena un triunghi pe ecran, dacă avem la dispoziție informația necesară pentru fiecare vârf: coordonatele în spațiul 2D, valoarea de adâncime și o culoare. Cu toate acestea, un astfel de sistem nu este suficient de flexibil, deoarece, în cadrul unei aplicații grafice în timp real, dorim să realizăm animații cu un model 3D, reprezentat de o rețea de triunghiuri. Coordonatele inițiale ale triunghiurilor trebuie modificate pentru a realiza o animație. //Realizarea aceleeași modificări, sau transformări, pentru toate vârfurile unei rețele de triunghiuri, produce, din punct de vedere vizual, efectul de aplicare a modificării pentru întreg ansamblul, respectiv pentru tot modelul 3D.// | + | În laboratorul anterior am văzut cum se poate desena un triunghi pe ecran, dacă avem la dispoziție informația necesară pentru fiecare vârf: coordonatele în spațiul 2D, valoarea de adâncime și o culoare. Cu toate acestea, un astfel de sistem nu este suficient de flexibil, deoarece, în cadrul unei aplicații grafice în timp real, dorim să realizăm animații cu un model 3D, reprezentat de o rețea de triunghiuri. Coordonatele inițiale ale triunghiurilor trebuie modificate pentru a realiza o animație. //Realizarea aceleeași modificări, sau transformări, pentru toate vârfurile unei rețele de triunghiuri, produce, din punct de vedere vizual, efectul de aplicare a modificării pentru întreg ansamblul, respectiv pentru tot modelul 3D.// |
| Din acest motiv, de-a lungul timpului, au fost standardizate mai multe tipuri de modificări asupra informației unui vârf, în particular asupra coordonatelor lui, ce pot fi utilizate în vederea realizării animațiilor. | Din acest motiv, de-a lungul timpului, au fost standardizate mai multe tipuri de modificări asupra informației unui vârf, în particular asupra coordonatelor lui, ce pot fi utilizate în vederea realizării animațiilor. | ||
| Line 52: | Line 52: | ||
| ==== Transformarea de rotație ==== | ==== Transformarea de rotație ==== | ||
| - | Ultima transformare des intalnită în grafica pe calculator este rotația unui model. Pentru realizarea acestui proces, pentru spații 2D, vom utiliza un aparat matematic care se aplică în felul următor: //rotația unui triunghi se realizeaza prin rotația tuturor vârfurilor, în sens trigonometric, față de originea axelor de coordonate//. | + | Ultima transformare des întâlnită în grafica pe calculator este rotația unui model. Pentru realizarea acestui proces, pentru spații 2D, vom utiliza un aparat matematic care se aplică în felul următor: //rotația unui triunghi se realizeaza prin rotația tuturor vârfurilor, în sens trigonometric, față de originea axelor de coordonate//. |
| Un exemplu pentru această transformare se poate vedea în imaginea de mai jos, unde pătratul este rotit cu 45 de grade, în sens trigonometric, față de punctul v0, care este în originea axelor de coordonate. | Un exemplu pentru această transformare se poate vedea în imaginea de mai jos, unde pătratul este rotit cu 45 de grade, în sens trigonometric, față de punctul v0, care este în originea axelor de coordonate. | ||
| Line 66: | Line 66: | ||
| <note> | <note> | ||
| - | Această formula reiese din următorul fapt. Conform imaginii de mai jos, avem punctul V, pe care dorim sa îl rotim cu unghiul B, în sens trigonometric, față de originea axelor de coordonate pentru a obține punctul V'. | + | Această formula reiese din următorul fapt. Conform imaginii de mai jos, avem punctul V, pe care dorim să îl rotim cu unghiul B, în sens trigonometric, față de originea axelor de coordonate pentru a obține punctul V'. |
| Line 123: | Line 123: | ||
| - În acest moment, putem roti vârfurile pătratului față de centrul lui; | - În acest moment, putem roti vârfurile pătratului față de centrul lui; | ||
| - După rotație, pătratul rămâne cu centrul în originea axelor de coordonate, astfel că aplicăm transformarea inversă de la punctul 1 pentru a readuce pătratul cu centrul în poziția lui originală. | - După rotație, pătratul rămâne cu centrul în originea axelor de coordonate, astfel că aplicăm transformarea inversă de la punctul 1 pentru a readuce pătratul cu centrul în poziția lui originală. | ||
| - | . | + | |
| <note tip> | <note tip> | ||
| Același proces se poate aplica și pentru transformarea de modificare a scării, pentru a face modificarea de scară din centrul pătratului :) . | Același proces se poate aplica și pentru transformarea de modificare a scării, pentru a face modificarea de scară din centrul pătratului :) . | ||
| Line 201: | Line 201: | ||
| Se poate observa că doar transformarea de translație necesită o matrice de dimensiune 3x3, iar pentru celelalte 2 transformări sunt necesare matrici de dimensiune 2x2. Sunt 2 motive principale pentru care se utilizează matrici de 3x3 pentru toate transformările: | Se poate observa că doar transformarea de translație necesită o matrice de dimensiune 3x3, iar pentru celelalte 2 transformări sunt necesare matrici de dimensiune 2x2. Sunt 2 motive principale pentru care se utilizează matrici de 3x3 pentru toate transformările: | ||
| * Pentru a realiza transformări compuse, operația de înmulțire între matrici trebuie să fie posibilă, astfel că se utilizează aceeași dimensiune pentru toate tipurile de matrici de transformare. Mai exact, se alege dimensiunea maximă necesară dintre dimensiunile matricelor celor 3 transformări de bază, respectiv 3x3, necesară pentru translație. Astfel, se completează celelalte 2 matrici cu încă o linie și o coloană în a căror celule se scrie 0, cu excepția celulei (3,3), în care se scrie 1. În plus, la reprezentarea matriceală a vectorului se mai adaugă o celulă cu valoarea 1. | * Pentru a realiza transformări compuse, operația de înmulțire între matrici trebuie să fie posibilă, astfel că se utilizează aceeași dimensiune pentru toate tipurile de matrici de transformare. Mai exact, se alege dimensiunea maximă necesară dintre dimensiunile matricelor celor 3 transformări de bază, respectiv 3x3, necesară pentru translație. Astfel, se completează celelalte 2 matrici cu încă o linie și o coloană în a căror celule se scrie 0, cu excepția celulei (3,3), în care se scrie 1. În plus, la reprezentarea matriceală a vectorului se mai adaugă o celulă cu valoarea 1. | ||
| - | * În procesul de transformare perspectivă, ce va fi utilizat în laboratorul următor, se utilizează coordonate într-un spatiu omogen, ceea ce necesită o informație scalară suplimentară. Vom discuta mai multe detalii în legatură cu acest aspect în laboratorul următor :) . | + | * În procesul de transformare perspectivă, ce va fi utilizat în laboratorul următor, se utilizează coordonate într-un spațiu omogen, ceea ce necesită o informație scalară suplimentară. Vom discuta mai multe detalii în legătură cu acest aspect în laboratorul următor :) . |
| </note> | </note> | ||
| Line 368: | Line 368: | ||
| </note> | </note> | ||
| - | <note> | + | <note important> |
| În cadrul laboratoarelor de la această materie, până la finalul semestrului, vom utiliza reprezentarea unui vector în formă coloană. Ambele reprezentări ale vectorilor sunt practice și compatibile cu procesorul grafic. | În cadrul laboratoarelor de la această materie, până la finalul semestrului, vom utiliza reprezentarea unui vector în formă coloană. Ambele reprezentări ale vectorilor sunt practice și compatibile cu procesorul grafic. | ||
| </note> | </note> | ||
| Line 376: | Line 376: | ||
| În cadrul laboratoarelor de la această materie, vom utiliza biblioteca glm pentru gestionarea matricilor și a operațiilor cu matrici. | În cadrul laboratoarelor de la această materie, vom utiliza biblioteca glm pentru gestionarea matricilor și a operațiilor cu matrici. | ||
| - | La bază, biblioteca glm folosește matrici column-major, mai precis, matrici care au informația transpusă în memorie. Astfel, în constructorul tipului de date ''glm::mat3'', trebuie transmisă forma transpusă a matricei pe care dorim sa o reținem. | + | La bază, biblioteca glm folosește matrici column-major, mai precis, matrici care au informația transpusă în memorie. Astfel, în constructorul tipului de date ''glm::mat3'', trebuie transmisă forma transpusă a matricei pe care dorim să o reținem. |
| - | De exemplu, matricea pentru transformarea de translație, utilizată pentru inmulțirea cu un **vector coloană**, trebuie inițializată astfel: | + | De exemplu, matricea pentru transformarea de translație, utilizată pentru înmulțirea cu un **vector coloană**, trebuie inițializată astfel: |
| <code cpp> | <code cpp> | ||
| Line 406: | Line 406: | ||
| ===== Transformarea fereastră-poartă ===== | ===== Transformarea fereastră-poartă ===== | ||
| - | În situatia în care dorim ca aplicația grafică proiectată de noi să nu depindă de rezoluția ferestrei și astfel să poată funcționa la rezoluții diferite, trebuie să nu mai definim coordonatele vârfurilor în grila de pixeli a ecranului. Pentru acest proces, vom defini un spațiu special, finit, denumit spațiu logic, în care vom declara coordonatele vârfurilor. Acest spațiu este o fereastră peste spațiul 2D și din acest motiv, transformarea are numele de transformare fereastră-poartă, respectiv transformare din fereastra peste spațiul 2D în poarta de vizualizare, reprezentată de ecran. | + | În situația în care dorim ca aplicația grafică proiectată de noi să nu depindă de rezoluția ferestrei și astfel să poată funcționa la rezoluții diferite, trebuie să nu mai definim coordonatele vârfurilor în grila de pixeli a ecranului. Pentru acest proces, vom defini un spațiu special, finit, denumit spațiu logic, în care vom declara coordonatele vârfurilor. Acest spațiu este o fereastră peste spațiul 2D și din acest motiv, transformarea are numele de transformare fereastră-poartă, respectiv transformare din fereastra peste spațiul 2D în poarta de vizualizare, reprezentată de ecran. |
| În laborator, a fost definit spațiul logic, după cum urmează: | În laborator, a fost definit spațiul logic, după cum urmează: | ||
| Line 420: | Line 420: | ||
| </code> | </code> | ||
| - | Se poate observa ca acest spațiu este definit de coordonatele calțului stânga-jos pentru fereastra și de o lățime și o înălțime a acesteia. | + | Se poate observa că acest spațiu este definit de coordonatele colțului stânga-jos pentru fereastra și de o lățime și o înălțime a acesteia. |
| - | Analog, realizăm o structură de date pentru poarta de vizualizare, cunoscută în limba engleza sub numele de viewport: | + | Analog, realizăm o structură de date pentru poarta de vizualizare, cunoscută în limba engleza sub numele de „viewport”: |
| <code cpp> | <code cpp> | ||
| Line 434: | Line 434: | ||
| </code> | </code> | ||
| - | De exemplu, pentru a transforma obiectele definite în spatiul logic ce are colțul stânga-jos la coordonatele (1, 1) și rezoluția de 3x2, astfel încât să fie puse pe întreg ecranul, de rezoluție 1280x720, se pot defini spațiile în felul următor. | + | De exemplu, pentru a transforma obiectele definite în spațiul logic ce are colțul stânga-jos la coordonatele (1, 1) și rezoluția de 3x2, astfel încât să fie puse pe întreg ecranul, de rezoluție 1280x720, se pot defini spațiile în felul următor. |
| <code cpp> | <code cpp> | ||
| Line 488: | Line 488: | ||
| {{ :ipg:laboratoare:transformations2.png?600 |}} | {{ :ipg:laboratoare:transformations2.png?600 |}} | ||
| + | <hidden> | ||
| <note tip> | <note tip> | ||
| Utilizați tastele **sus**, **jos**, **stânga** și **dreapta** pentru a controla interactiv pozitia colțului din stânga-jos a spațiului logic. | Utilizați tastele **sus**, **jos**, **stânga** și **dreapta** pentru a controla interactiv pozitia colțului din stânga-jos a spațiului logic. | ||
| </note> | </note> | ||
| + | </hidden> | ||
| Bonus: Realizați razele unei stele prin desenarea multiplă a unui triunghi rotit la unghiuri diferite. Este necesar să construiți o nouă geometrie pentru triunghiul ce reprezintă o rază. Un exemplu vizual ar putea fi: | Bonus: Realizați razele unei stele prin desenarea multiplă a unui triunghi rotit la unghiuri diferite. Este necesar să construiți o nouă geometrie pentru triunghiul ce reprezintă o rază. Un exemplu vizual ar putea fi: | ||
