Obiectele 2D sunt definite intr-un sistem de coordonate carteziene 2D, de exemplu, XOY, XOZ sau YOZ. In cadrul acestui laborator vom implementa diferite tipuri de transformari ce pot fi aplicate obiectelor definite in planul XOY: translatii, rotatii si scalari. Aceastea sunt definite in format matriceal, in coordonate omgene, asa cum ati invatat deja la curs. Matricile acestor transformari sunt urmatoarele:

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t_x\\ 0 & 1 & t_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} cos(u) & -sin(u) & 0\\ sin(u) & cos(u) & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

Rotatia relativa la un punct oarecare se rezolva in cel mai simplu mod prin:

1. translatarea atat a punctului asupra carui se aplica rotatia cat si a punctului in jurul caruia se face rotatia a.i. cel din urma sa fie originea sistemului de coordonate.
2. rotatia normala (in jurul originii),
3. translatarea rezultatului a.i. punctul in jurul caruia s-a facut rotatia sa ajunga in pozitia sa initiala

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} s_x & 0 & 0\\ 0 & s_y & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

Daca $sx = sy$ atunci avem scalare uniforma, altfel avem scalare neuniforma.

Scalarea relativa la un punct oarecare se rezolva similar cu rotatia relativa la un punct oarecare.

In cadrul laboratorului folosim biblioteca GLM care este o biblioteca implementata cu matrici in forma coloana, exact acelasi format ca OpenGL. Forma coloana difera de forma linie prin ordinea de stocare a elementelor maricei in memorie, Matricea de translatie arata in modul urmator in memorie:

glm::mat3 Translate(float tx, float ty)
{
	return glm::mat3( 
        	 1,  0, 0,     // coloana 1 in memorie 
		 0,  1, 0,     // coloana 2 in memorie 
		tx, ty, 1);    // coloana 3 in memorie 
 
}

Din aceasta cauza, este convenabil ca matricile sa fie scrise manual in forma aceasta:

glm::mat3 Translate(float tx, float ty)
{
	return glm::transpose(
		glm::mat3( 1, 0, tx, 
			   0, 1, ty, 
			   0, 0, 1)
	); 
}

De ce sunt necesare matricile? Pentru a reprezenta printr-o singura matrice de transformari o secventa de transformari elementare, in locul aplicarii unei secvente de transformari elementare pe un anume obiect.

Deci, daca dorim sa aplicam o rotatie, o scalare si o translatie pe un obiect, nu facem rotatia obiectului, scalarea obiectului urmata de translatia lui, ci calculam o matrice care reprezinta transformarea compusa (de rotatie, scalare si translatie), dupa care aplicam aceasta transformare compusa pe obiectul care se doreste a fi transformat.

Astfel, daca dorim sa aplicam o rotatie (cu matricea de rotatie $R$), urmata de o scalare ($S$), urmata de o translatie ($T$) pe un punct ($x$,$y$), punctul transformat (${x}'$,${y}'$) se va calcula astfel:

$$ \begin{bmatrix} {x}'\\ {y}'\\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t_x\\ 0 & 1 & t_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} sx & 0 & 0\\ 0 & sy & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} cos(u) & -sin(u) & 0\\ sin(u) & cos(u) & 0\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} $$

Deci, matricea de transformari compuse $M$ este $M = T * S * R$.

   modelMatrix = glm::mat3(1);
   modelMatrix *= Transform2D::Translate(150, 250);
   RenderMesh2D(meshes["square1"], shaders["VertexColor"], modelMatrix);

tx += deltaTimeSeconds * 100;
ty += deltaTimeSeconds * 100;
model_matrix *= Transform2D::Translate(tx, ty);

Desenele reprezentate intr-un program de aplicatie grafica (2D sau 3D) sunt, de regula, raportate la un sistem de coordonate diferit de cel al suprafetei de afisare.

$$ \frac{xp - xpmin}{xpmax - xpmin} = \frac{xf - xfmin}{xfmax - xfmin} $$ $$ \frac{yp - ypmin}{ypmax - ypmin} = \frac{yf - yfmin}{yfmax - yfmin} $$

Transformarea este definita prin 2 dreptunghiuri, in cele doua sisteme de coordonate, numite fereastra sau spatiul logic si poarta, sau spatiul de afisare. De aici numele de transformarea fereastra-poarta sau transformarea de vizualizare 2D.

F: un punct din fereastra

P: punctul in care se transforma F prin transformarea de vizualizare

Pozitia relativa a lui P in poarta de afisare trebuie sa fie aceeasi cu pozitia relativa a lui F in fereastra.

$$ sx = \frac{xpmax - xpmin}{xfmax - xfmin} $$

$$ sy = \frac{ypmax - ypmin}{yfmax - yfmin} $$

• sx, sy depind de dimensiunile celor doua ferestre
• tx, ty depind de pozitiile celor doua ferestre fata de originea sistemului de coordonate in care sunt definite.

$$ tx = xpmin - sx * xfmin $$ $$ ty = ypmin - sy * yfmin $$

In final, transformarea fereastra poarta are urmatoarele ecuatii:

$$ xp = xf * sx + tx $$ $$ yp = yf * sy + ty $$

Consideram o aceeasi orientare a axelor celor doua sisteme de coordonate. Daca acestea au orientari diferite (ca in prima imagine), trebuie aplicata o transformare suplimentara de corectie a coordonatei y.

• marire/micsorare, in functie de dimensiunile ferestrei si ale portii
• deformare daca fereastra si poarta nu sunt dreptunghiuri asemenea
• pentru scalare uniforma, $s=min(sx,sy)$, afisarea centrata in poarta presupune o translatie suplimentara pe axa Ox sau pe axa Oy:

$$Tsx = (xpmax - xpmin - s*(xfmax - xfmin)) / 2$$ $$Tsy = (ypmax - ypmin - s*(yfmax - yfmin)) / 2$$

• decuparea primitivelor aflate in afara ferestrei vizuale

De retinut este ca transformarea fereastra poarta presupune o scalare si o translatie. Ea are urmatoarea expresie, cu formulele de calcul pentru sx, sy, tx, ty prezentate anterior:

$$ \begin{bmatrix} xp\\ yp\\ 1 \end{bmatrix} = \begin{bmatrix} sx & 0 & tx\\ 0 & sy & ty\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} xf\\ yf\\ 1 \end{bmatrix} $$

//2D vizualization matrix
glm::mat3 Laborator3_Vis2D::VisualizationTransf2D(const LogicSpace & logicSpace, const ViewportSpace & viewSpace)
{
	float sx, sy, tx, ty;
	sx = viewSpace.width / logicSpace.width;
	sy = viewSpace.height / logicSpace.height;
	tx = viewSpace.x - sx * logicSpace.x;
	ty = viewSpace.y - sy * logicSpace.y;
 
	return glm::transpose(glm::mat3(
		sx, 0.0f, tx,
		0.0f, sy, ty,
		0.0f, 0.0f, 1.0f));
}

logicSpace.x = 0;	// logic x
logicSpace.y = 0;	// logic y
logicSpace.width = 4;	// logic width
logicSpace.height = 4;	// logic height
 
glm::vec3 corner = glm::vec3(0.001, 0.001, 0);
length = 0.99f;
 
Mesh* square1 = Object2D::CreateSquare("square1", corner, length, glm::vec3(1, 0, 0));
AddMeshToList(square1);

Unde se poate folosi aceasta transformare fereastra poarta? De exemplu, intr-un joc 2D cu masini de curse, se doreste in dreapta-jos a ecranului vizualizarea masinii proprii, intr-un minimap. Acest lucru se face prin desenarea scenei de doua ori.

Daca de exemplu toata scena (traseul si toate masinile) este gandita in spatiul logic (-10,-10) - (10,10) (care are dimensiunea 20×20) si spatiul de afisare este (0,0) - (1280, 720), prima data se deseneaza toata scena cu parametrii functiei fereastra-poarta anterior mentionati:

LogicSpace logic_space = LogicSpace(-10, -10, 20, 20);
ViewportSpace view_space = ViewportSpace(0, 0, 1280, 720);
vis_matrix *= VisualizationTransf2D(logic_space, view_space);

Daca la un moment dat masina proprie este in spatiul (2,2) - (5,5), adica de dimensiune 3×3 si vreau sa creez un minimap in coltul din dreapta jos al ecranului de rezolutie 280×220, pot desena din nou aceeasi scena, dar cu urmatoarea transformare fereastra-poarta:

LogicSpace logic_space = LogicSpace(2, 2, 3, 3);
ViewportSpace view_space = ViewportSpace(1000, 500, 280, 220);
vis_matrix *= VisualizationTransf2D(logic_space, view_space);

1. Descarcati framework-ul de laborator
2. Completati functiile de translatie, rotatie, scalare din /Laborator3/Transform2D.h
3. Sa modifice pasii de translatie si rotatie si scalare pentru cele trei patrate ca sa creeze animatie.
4. 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).