Differences
This shows you the differences between two versions of the page.
|
egc:laboratoare:03 [2019/10/12 12:27] andrei.lambru |
egc:laboratoare:03 [2021/10/12 11:07] (current) chris.luntraru Filename and class name update |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Laboratorul 03 ====== | ====== Laboratorul 03 ====== | ||
| + | **Video Laborator 3**: https://youtu.be/G-rR8QFZVuI\\ | ||
| + | **Autor**: [[stefania.cristea1708@gmail.com | Stefania Cristea]] | ||
| ===== Transformări 2D ===== | ===== Transformări 2D ===== | ||
| Obiectele 2D sunt definite într-un sistem de coordonate carteziene 2D, de exemplu, XOY, XOZ sau YOZ. | Obiectele 2D sunt definite într-un sistem de coordonate carteziene 2D, de exemplu, XOY, XOZ sau YOZ. | ||
| - | În cadrul acestui laborator vom implementa diferite tipuri de transformări ce pot fi aplicate obiectelor definite în planul XOY: translații, rotații și scalări. Aceastea sunt definite în format matriceal, în coordonate omgene, așa cum ați învățat deja la curs. Matricile acestor transformări sunt următoarele: | + | În cadrul acestui laborator vom implementa diferite tipuri de transformări ce pot fi aplicate obiectelor definite în planul XOY: translații, rotații și scalări. Acestea sunt definite în format matriceal, în coordonate omgene, așa cum ați învățat deja la curs. Matricile acestor transformări sunt următoarele: |
| ==== Translația ==== | ==== Translația ==== | ||
| Line 83: | Line 84: | ||
| ===== Utilizarea bibliotecii GLM ===== | ===== Utilizarea bibliotecii GLM ===== | ||
| - | În cadrul laboratorului folosim biblioteca GLM care este o bibliotecă implementată cu matrici în formă coloană, exact același format ca OpenGL. Forma coloană diferă de forma linie prin ordinea de stocare a elementelor maricei în memorie, Matricea de translație arată în modul următor în memorie: | + | În cadrul laboratorului folosim biblioteca GLM, care este o bibliotecă implementată cu matrici în formă coloană, exact același format ca OpenGL. Forma coloană diferă de forma linie prin ordinea de stocare a elementelor matricei în memorie, Matricea de translație arată în modul următor în memorie: |
| <code cpp> | <code cpp> | ||
| Line 110: | Line 111: | ||
| <note> | <note> | ||
| - | În cadrul framework-ului de laborator, în fișierul ''Transform2D.h'' sunt definite funcțiile pentru calculul matricilor de translație, rotație și scalare. În momentul acesta toate funcțiile întorc matricea identitate. În cadrul laboratorului va trebui să modificați codul pentru a calcula matricile respective. | + | În cadrul framework-ului de laborator, în fișierul ''transform2D.h'' sunt definite funcțiile pentru calculul matricilor de translație, rotație și scalare. În momentul acesta toate funcțiile întorc matricea identitate. În cadrul laboratorului va trebui să modificați codul pentru a calcula matricile respective. |
| </note> | </note> | ||
| Line 156: | Line 157: | ||
| <note> | <note> | ||
| - | În cadrul laboratorului, în fișierul ''Laborator3.cpp'', există o serie de obiecte (pătrate) pentru care, în funcția ''Update()'', înainte de desenare, se definesc matricile de transformări. Comanda de desenare se dă prin funcția ''RenderMesh2D()''. | + | În cadrul laboratorului, în fișierul ''lab3.cpp'', există o serie de obiecte (pătrate) pentru care, în funcția ''Update()'', înainte de desenare, se definesc matricile de transformări. Comanda de desenare se dă prin funcția ''RenderMesh2D()''. |
| <code cpp> | <code cpp> | ||
| Line 189: | Line 190: | ||
| În exercițiile anterioare din acest laborator, coordonatele obiectelor au fost raportate la dimensiunea ferestrei definită prin ''glViewport()''. | În exercițiile anterioare din acest laborator, coordonatele obiectelor au fost raportate la dimensiunea ferestrei definită prin ''glViewport()''. | ||
| - | Exemplu: Dacă viewport-ul meu are colțul din stânga jos (0, 0) și are lățimea 1280 și înălțimea 720, atunci toate obiectele ar trebui desenate în acest interval, daca vreau să fie vizibile. Acest lucru mă condiționează să îmi gândesc toată scena în (0, 0) - (1280, 720). Dacă vreau să scap de această limitare, pot să îmi gândesc scena într-un spațiu logic (de exemplu îmi creez toate obiectele în spațiul (-1, -1) - (1, 1), și apoi să le desenez în poarta de afișare, dar aplicând ceea ce se numește **transformarea fereastră poartă**. | + | Exemplu: Dacă viewport-ul meu are colțul din stânga jos (0, 0) și are lățimea 1280 și înălțimea 720, atunci toate obiectele ar trebui desenate în acest interval, dacă vreau să fie vizibile. Acest lucru mă condiționează să îmi gândesc toată scena în (0, 0) - (1280, 720). Dacă vreau să scap de această limitare, pot să îmi gândesc scena într-un spațiu logic (de exemplu îmi creez toate obiectele în spațiul (-1, -1) - (1, 1) și apoi să le desenez în poarta de afișare, dar aplicând ceea ce se numește **transformarea fereastră poartă**. |
| În cele ce urmează vedem ce presupune această transformare și cum pot să imi gândesc scena fără să fiu limitat de dimensiunea viewport-ului. | În cele ce urmează vedem ce presupune această transformare și cum pot să imi gândesc scena fără să fiu limitat de dimensiunea viewport-ului. | ||
| Line 205: | Line 206: | ||
| - | Transformarea este definită prin 2 dreptunghiuri, în cele două sisteme de coordonate, numite fereastră sau spațiul logic și poarta, sau spațiul de afișare. De aici numele de transformarea fereastră-poartă sau transformarea de vizualizare 2D. | + | Transformarea este definită prin 2 dreptunghiuri, în cele două sisteme de coordonate, numite fereastră sau spațiul logic și poartă sau spațiul de afișare. De aici numele de transformarea fereastră-poartă sau transformarea de vizualizare 2D. |
| F: un punct din fereastră | F: un punct din fereastră | ||
| Line 218: | Line 219: | ||
| * sx, sy depind de dimensiunile celor două ferestre | * sx, sy depind de dimensiunile celor două ferestre | ||
| - | * tx, ty depind de pozițiile celor două ferestre față de originea sistemului de coordonate în care sunt definite. | + | * tx, ty depind de pozițiile celor două ferestre față de originea sistemului de coordonate în care sunt definite |
| $$ tx = xpmin - sx * xfmin $$ | $$ tx = xpmin - sx * xfmin $$ | ||
| $$ ty = ypmin - sy * yfmin $$ | $$ ty = ypmin - sy * yfmin $$ | ||
| - | În final, transformarea fereastră poartă are următoarele ecuații: | + | În final, transformarea fereastră-poartă are următoarele ecuații: |
| $$ xp = xf * sx + tx $$ | $$ xp = xf * sx + tx $$ | ||
| $$ yp = yf * sy + ty $$ | $$ yp = yf * sy + ty $$ | ||
| - | Considerăm o aceeași orientare a axelor celor două sisteme de coordonate. Dacă acestea au orientari diferite (ca în prima imagine), trebuie aplicată o transformare suplimentară de corecție a coordonatei y. | + | Considerăm o aceeași orientare a axelor celor două sisteme de coordonate. Dacă acestea au orientări diferite (ca în prima imagine), trebuie aplicată o transformare suplimentară de corecție a coordonatei y. |
| ==== Efectele transformării ==== | ==== Efectele transformării ==== | ||
| Line 242: | Line 243: | ||
| ==== Matricea transformării fereastră-poartă ==== | ==== Matricea transformării fereastră-poartă ==== | ||
| - | De reținut este că transformarea fereastră poartă presupune o scalare și o translație. Ea are următoarea expresie, cu formulele de calcul pentru sx, sy, tx, ty prezentate anterior: | + | De reținut este că transformarea fereastră-poartă presupune o scalare și o translație. Ea are următoarea expresie, cu formulele de calcul pentru sx, sy, tx, ty prezentate anterior: |
| $$ | $$ | ||
| Line 263: | Line 264: | ||
| <note> | <note> | ||
| - | Transformarea de vizualizare este deja implementată în clasa ''Laborator3_Vis2D'': | + | Transformarea de vizualizare este deja implementată în clasa ''lab3_vis2D'': |
| <code cpp> | <code cpp> | ||
| //2D vizualization matrix | //2D vizualization matrix | ||
| - | glm::mat3 Laborator3_Vis2D::VisualizationTransf2D(const LogicSpace & logicSpace, const ViewportSpace & viewSpace) | + | glm::mat3 Lab3_Vis2D::VisualizationTransf2D(const LogicSpace & logicSpace, const ViewportSpace & viewSpace) |
| { | { | ||
| float sx, sy, tx, ty; | float sx, sy, tx, ty; | ||
| Line 284: | Line 285: | ||
| <note> | <note> | ||
| - | În cadrul laboratorului, în clasa ''Laborator3_Vis2D'', este creat un pătrat, în spațiul logic (0,0) - (4,4). De reținut este faptul că acum nu mai trebuie sa raportăm coordonatele pătratului la spațiul de vizualizare (cum se intamplă în exercițiile anterioare), ci la spațiul logic pe care l-am definit noi. | + | În cadrul laboratorului, în clasa ''Lab3_Vis2D'', este creat un pătrat, în spațiul logic (0,0) - (4,4). De reținut este faptul că acum nu mai trebuie să raportăm coordonatele pătratului la spațiul de vizualizare (cum se intamplă în exercițiile anterioare), ci la spațiul logic pe care l-am definit noi. |
| <code cpp> | <code cpp> | ||
| Line 300: | Line 301: | ||
| - | În funcția ''Update()'' se desenează același pătrat creat anterior, de 5 ori: patru pătrate în cele patru colțuri și un pătrat în mijlocul spațiului logic. Se definesc 2 viewport-uri, ambele conținând aceleași obiecte. Primul viewport este definit în jumătatea din stânga a ferestrei de afișare, iar al doilea, în jumătatea din dreapta. Pentru primul viewport se definește transformarea fereastră poartă default și pentru al doilea viewport, cea uniformă. Observați că în al doilea viewport pătratele rămân întotdeauna pătrate, pe când în primul viewport se văd ca dreptunghiuri (adică sunt deformate), dacă spațiul logic și spațiul de vizualizare nu sunt reprezentate prin dreptunghiuri asemenea. | + | În funcția ''Update()'' se desenează același pătrat creat anterior, de 5 ori: patru pătrate în cele patru colțuri și un pătrat în mijlocul spațiului logic. Se definesc 2 viewport-uri, ambele conținând aceleași obiecte. Primul viewport este definit în jumătatea din stânga a ferestrei de afișare, iar al doilea, în jumătatea din dreapta. Pentru primul viewport se definește transformarea fereastră-poartă default și pentru al doilea viewport, cea uniformă. Observați că în al doilea viewport pătratele rămân întotdeauna pătrate, pe când în primul viewport se văd ca dreptunghiuri (adică sunt deformate), dacă spațiul logic și spațiul de vizualizare nu sunt reprezentate prin dreptunghiuri asemenea. |
| </note> | </note> | ||
| Line 308: | Line 309: | ||
| - | Unde se poate folosi această transformare fereastră poartă? De exemplu, într-un joc 2D cu mașini de curse, se dorește în dreapta-jos a ecranului vizualizarea mașinii proprii, într-un minimap. Acest lucru se face prin desenarea scenei de două ori. | + | Unde se poate folosi această transformare fereastră-poartă? De exemplu, într-un joc 2D cu mașini de curse, se dorește în dreapta-jos a ecranului vizualizarea mașinii proprii, într-un minimap. Acest lucru se face prin desenarea scenei de două ori. |
| Dacă de exemplu toată scena (traseul și toate mașinile) este gândită în spațiul logic (-10,-10) - (10,10) (care are dimensiunea 20x20) și spațiul de afișare este (0,0) - (1280, 720), prima dată se desenează toată scena cu parametrii funcției fereastră-poartă anterior menționați: | Dacă de exemplu toată scena (traseul și toate mașinile) este gândită în spațiul logic (-10,-10) - (10,10) (care are dimensiunea 20x20) și spațiul de afișare este (0,0) - (1280, 720), prima dată se desenează toată scena cu parametrii funcției fereastră-poartă anterior menționați: | ||
| Line 331: | Line 332: | ||
| <note tip> | <note tip> | ||
| În cadrul acestui laborator aveți de programat în două clase: | În cadrul acestui laborator aveți de programat în două clase: | ||
| - | * ''Laborator3.cpp'', pentru familiarizarea cu transformările 2D de translație, rotație și scalare | + | * ''lab3.cpp'', pentru familiarizarea cu transformările 2D de translație, rotație și scalare |
| - | * ''Laborator3_Vis2D.cpp'', pentru familiarizarea cu transformarea fereastră-poartă | + | * ''lab3_vis2D.cpp'', pentru familiarizarea cu transformarea fereastră-poartă |
| - | Din clasa ''Main'' puteți să alegeți ce laborator rulați: | + | Din fisierul ''main.cpp'' puteți să alegeți ce laborator rulați: |
| <code cpp> | <code cpp> | ||
| - | World *world = new Laborator3(); | + | World *world = new Lab3(); |
| </code> | </code> | ||
| Line 342: | Line 343: | ||
| <code cpp> | <code cpp> | ||
| - | World *world = new Laborator3_Vis2D(); | + | World *world = new Lab3_Vis2D(); |
| </code> | </code> | ||
| </note> | </note> | ||
| Line 355: | Line 356: | ||
| - Descarcăți [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|framework-ul de laborator]] | - Descarcăți [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|framework-ul de laborator]] | ||
| - | - Completați funcțiile de translație, rotație, scalare din ''/Laborator3/Transform2D.h'' | + | - Completați funcțiile de translație, rotație și scalare din ''lab3/transform2D.h'' |
| - | - Să modifice pașii de translație și rotație și scalare pentru cele trei pătrate ca să creeze animație. | + | - Să se modifice pașii de translație, rotație și scalare pentru cele trei pătrate ca să se creeze animații. |
| - | - Cu tastele W, A, S, D să se translateze fereastra logică ''Laborator3_Vis2D''. Cu tastele Z și X să se facă zoom în și zoom out pe fereastră logică. | + | - Cu tastele W, A, S, D să se translateze fereastra logică ''lab3_vis2D''. Cu tastele Z și X să se facă zoom in și zoom out pe fereastra logică. |
| <hidden> | <hidden> | ||
| - | ---- | ||
| - | - Să modifice pașii de translație și rotație și scalare pentru cele trei pătrate ca să creeze animație. | ||
| - | - Cu tastele W, A, S, D sa translateze fereastra logica ''Laborator3_Vis2D'' (sa inteleaga ca atunci cand se duce fereastra in jos, pare ca obiectele scenei se duc in sus, cand se duce fereastra in stanga, obiectele se duc in dreapta, etc.). Cu tastele Z si X sa faca zoom in si zoom out pe fereastra logica (sa se inteleaga ca atunci cand micsorezi fereastra, pare ca se maresc obiectele si invers). | ||
| - | |||
| - | |||
| Bonusuri posibile: | Bonusuri posibile: | ||
| - | + | * **[Bonus]** Diverse combinații de transformări (primul pătrat stă pe loc, al doilea se rotește în jurul lui și al treilea în jurul celui de-al doilea - cum sunt soarele, pământul și luna) | |
| - | * **[Bonus]** Diverse combinatii de transformari (gen primul patrat sta pe loc, al doilea se roteste in jurul lui si al treilea in jurul celui de-al doilea - cum sunt soarele, pamantul si luna) | + | |
| </hidden> | </hidden> | ||
