Differences
This shows you the differences between two versions of the page.
|
egc:teme:2019:03 [2019/12/04 22:19] andrei.lambru |
egc:teme:2019:03 [2020/01/14 08:42] (current) alexandru.gradinaru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Tema 3 ===== | + | ======= Tema 3 - Worms 3D ======= |
| - | <hidden> | + | * **Responsabili:** Cristi Lambru |
| - | ===== Tema 3 - Worms 3D ===== | + | * **Lansare:** 7 decembrie |
| - | + | ||
| - | * **Responsabili:** Cristian Lambru | + | |
| - | * **Lansare:** 6 decembrie | + | |
| * **Termen de predare:** 12 ianuarie 2020, ora 23:55 | * **Termen de predare:** 12 ianuarie 2020, ora 23:55 | ||
| * **Notă: Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!** | * **Notă: Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!** | ||
| - | În cadrul temei 2 trebuie să implementați un joc în care sunteți un aviator ce nu trebuie să se lovească de obstacole și nici să rămână fără combustibil pentru avion. | + | În cadrul temei 3 trebuie să implementați versiunea de Worms în 3D cu teren deformabil. În continuare este prezentat un demo cu toate funcționalitățile de bază. |
| - | === Constructia Scenei === | + | <html> |
| + | <p style="text-align:center;margin:auto;"> | ||
| + | <iframe width="560" height="315" src="https://www.youtube.com/embed/yLusrCTcpwM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| + | </p> | ||
| + | </html> | ||
| - | Definim o suprafata de baleiere descrisa de functia: | + | ===== Construcția terenului ===== |
| + | |||
| + | ==== Harta de inălțimi ==== | ||
| + | |||
| + | Definim o suprafață de baleiere descrisă de funcția: | ||
| $$ | $$ | ||
| Line 19: | Line 24: | ||
| $$ | $$ | ||
| - | Datorita constructiei, o astfel de suprafata poate fi determinata direct de continutul unei texturi in urmatorul mod: | + | Datorită construcției, o astfel de suprafață poate fi determinată direct de conținutul unei texturi în următorul mod: |
| $$ | $$ | ||
| - | f(x,z) = texture2D(unitTexture,vec2 (u,v)) | + | f(x,z) = texture2D(textureUnit,vec2 (u,v)).r |
| $$ | $$ | ||
| - | unde $\{u, v\}$ reprezinta coordonatele de textura asociate coordonatelor spatiale $\{x,z\}$. | + | unde $\{u, v\}$ reprezintă coordonatele de textură asociate coordonatelor spațiale $\{x,z\}$. |
| - | Aceste tipuri de texturi care descriu suprafete de baleiere se numesc harti de inaltime sau **height maps**. Ele contin in fiecare pixel o singura informatie in $[0,255]$ (normalizat $[0,1]$), pe un singur canal, ce reprezinta inaltimea zonei acoperite de pixelul respectiv. Un astfel de exemplu de textura se poate vedea mai jos. | + | Aceste tipuri de texturi care descriu suprafețe de baleiere se numesc hărți de inalțimi sau **height maps**. Ele conțin în fiecare pixel o singură informație în $[0,255]$ (normalizată $[0,1]$), pe un singur canal, ce reprezintă înălțimea zonei acoperite de pixelul respectiv. Un exemplu de astfel de textură se poate vedea mai jos. |
| {{ :egc:teme:2019:heightmap.png?nolink&200 |}} | {{ :egc:teme:2019:heightmap.png?nolink&200 |}} | ||
| - | Pentru a putea crea o suprafata definita de inaltimea data de textura este necesara o geometrie suport care sa cuprinda toate coordonatele $\{x,z\}$ finale si toate coordonatele y egale cu 0. De asemenea, fiecarui vertex trebuie sa i se asocieze o coordonata de textura, $\{u,v\} \in [0, 1]$, normalizata intre limitele geometriei pe x si pe y. In mod particular, geometria din imaginea de mai jos a fost generata cu 100 de linii si 100 de coloane, pe o suprafata de 5x5 unitati. | + | ==== Geometria suport ==== |
| + | |||
| + | Pentru a putea crea o suprafață definită de înălțimea dată de textură este necesară o geometrie suport care să cuprindă toate coordonatele $\{x,z\}$ finale. De asemenea, este necesar ca fiecărui vertex să i se asocieze o coordonată de textură, $\{u,v\} \in [0, 1]$, normalizată între limitele pe $x$ și pe $y$ ale geometriei suport. | ||
| {{ :egc:teme:2019:terrain1.png?nolink&600 |}} | {{ :egc:teme:2019:terrain1.png?nolink&600 |}} | ||
| - | Geometria suport se deseneaza cu un shader special, care la pasul de vertex shader acceseaza textura in care sunt salvate inaltimile. Se obtine valoarea culoarea de la coordonatele $\{u,v\}$ asociate si se obtine o valoare in $[0,1]$. Aceasta valoare reprezinta inaltimea, coordonata y a vertexului, care se poate scala, dupa plac. O desenare a geometriei generate anterior cu inaltimile obtinute din textura de mai sus si cu factorul de scalare al inaltimii egal cu 2 va avea rezultatul din imaginea de mai jos. | + | Geometria suport se desenează cu un shader special, care la pasul de vertex shader accesează textura în care se află înălțimile. Prin interogarea texturii se obține înălțimea de la coordonatele $\{u,v\}$, asociate vertexului. Această valoare se poate asocia direct coordonatei $y$ a vertexului sau se poate scala pentru un impact mai mare al terenului. |
| {{ :egc:teme:2019:terrain2.png?nolink&600 |}} | {{ :egc:teme:2019:terrain2.png?nolink&600 |}} | ||
| - | <note tip>Mai multe informatii despre coliziuni si cum se pot implementa in 3D: | + | ==== Calculul normalelor ==== |
| - | * [[https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection]] | + | |
| + | Pentru a putea lumina terenul este necesară calcularea informației de normală. Tehnica pe care o vom folosi se numește "aproximare prin diferențe finite" și utilizează informația vecinilor pixelului din care s-a interogat înălțimea vertexului curent. | ||
| + | |||
| + | * Se obține înălțimea de la pixelul curent, de la cel din dreapta și cel de sus. | ||
| + | |||
| + | $$ | ||
| + | height = texture2D(heightMap,vec2(u,v)).r \\ | ||
| + | texelSize = vec2 (1.0/heightMapSize.x, 1.0/heightMapSize.y) \\ | ||
| + | heightRight = texture2D(heightMap,vec2(u+texelSize.x,v)).r \\ | ||
| + | heightUp = texture2D(heightMap,vec2(u,v+texelSize.y)).r | ||
| + | $$ | ||
| + | |||
| + | * Se calculează diferențele pe $x$ și pe $z$. | ||
| + | |||
| + | $$ | ||
| + | H_x = height - heightRight \\ | ||
| + | H_z = height - heightUp \\ | ||
| + | $$ | ||
| + | |||
| + | * Normala este reprezentată de vectorul unitate determinat de cele două diferențe pe $x$ și pe $z$. | ||
| + | |||
| + | $$ | ||
| + | normal = normalize(vec3(H_x, 1, H_z)) | ||
| + | $$ | ||
| + | |||
| + | <note tip> | ||
| + | Deoarece diferențele dintre pixelul curent și vecini pot fi destul de mici, este recomandat să se folosească un factor de scalare pentru $H_x$ și $H_z$. | ||
| </note> | </note> | ||
| + | Rezultatul după calcularea normalelor și adăugarea în scenă a unei lumini în centrul terenului: | ||
| + | |||
| + | {{ :egc:teme:2019:terrain3.png?nolink&600 |}} | ||
| + | |||
| + | Pentru adăugarea unei texturi de colorare a terenului (de exemplu pământ), se pot crea coordonate de textură suplimentare doar pentru aceasta sau se pot folosi coordonatele de la harta de înălțimi cu o scalare. Rezultatul final în urma aplicării luminii și a texturii se poate observa mai jos. | ||
| + | |||
| + | {{ :egc:teme:2019:terrain4.png?nolink&600 |}} | ||
| - | === Interfața cu utilizatorul === | + | ===== Deformarea terenului ===== |
| - | Atât viețile rămase, cât și combustibilul disponibil vor fi afișate pe ecran. Pentru acest lucru se pot folosi orice forme sau metode care să exprime acest lucru: sugerăm folosirea unor sfere pentru vieți și două dreptunghiuri suprapuse pentru combustibil (unul negru în spate și unul colorat în față, care se va scala pentru a evidenția consumarea combustibilului). | + | |
| + | ==== Buffer-ul hărții de înălțimi ==== | ||
| - | === Bonusuri Posibile === | + | * Pentru a avea acces la buffer-ul de pixeli al imaginii este necesar ca aceasta să fie încărcată direct cu librăria [[https://github.com/nothings/stb|stb_image]]. Aceasta se află deja în framework și cu ajutorul ei se poate încărca întreaga matrice de pixeli a unui fișier. Se poate folosi direct imaginea din această pagină. <code cpp>#include <stb/stb_image.h> |
| - | Pe lângă obstacole sau combustibil, pot să existe și alte obiecte specifice în scenă ce aduc anumite beneficii/dezavantaje (de exemplu, o sferă galbenă poate aduce o viață în plus sau un cub verde face avionul invincibil pentru o perioadă de timp, sau poate trage proiectile pentru distrugerea obstacolelor etc.). | + | |
| - | * **Avion realist:** corpul avionului nu va fi un simplu cub/paralelipiped, ci va fi mai îngust spre coadă și mai larg spre față. De asemenea, elicea avionului trebuie să se rotească în conformitate cu accelerația avionului (de exemplu dacă accelerează se rotește mai repede, altfel mai încet). | + | heightPixels = stbi_load((textureLoc + "heightmap.png").c_str (), &width, &height, &channels, STBI_grey); |
| + | </code> | ||
| - | {{ :egc:teme:2019:forma_avion.png?nolink&400 |}} | + | * Buffer-ul ''heightPixels'' păstrează toată informația imaginii într-o zonă continuă de memorie în care în prima parte se găsește prima linie de pixeli (fiecare pixel are un singur canal de culoare), urmată de a doua linie de pixeli ș.a.m.d. Pentru a încărca buffer-ul în memoria procesorului grafic se folosește: <code cpp>glTexImage2D(GL_TEXTURE_2D, 0, GL_R8, width, height, 0, GL_RED, GL_UNSIGNED_BYTE, (void*)heightPixels); |
| + | </code> | ||
| - | * **Pilot:** pilotul va fi creat asemănător avionului, folosind mai multe forme simple de mărimi și culori diferite. Pentru că pilotul avionului este un pilot fabulos, acesta va avea pletele în vânt. Astfel, folosind simple translatări ale formelor ce alcătuiesc părul, se va crea impresia că părul acestuia este în bătaia vântului, sau se pot folosi de asemenea deformări în Vertex Shader pentru simularea mișcării părului | + | * Pentru modificarea texturii pur și simplu se modifică o zonă de pixeli din imagine, în interiorul acestui buffer și se reîncarcă buffer-ul în procesorul grafic cu directiva de mai sus. |
| - | {{ :egc:teme:2019:pilotul.png?nolink&300 |}} | + | ===== Gameplay ===== |
| - | * Creșterea dificultății jocului pe măsură ce trece timpul | + | Jocul va fi multiplayer local în care pe rând fiecare jucător va prelua controlul a două personaje aflate în zone diferite ale terenului. Fiecare jucător va avea la dispoziție un singur proiectil pe tură. Acesta va avea o cameră third-person asupra personajului pentru a putea potrivi ținta. Odată decis, la apasărea butonului click stânga de la mouse, proiectilul este lansat și este urmărit de cameră fără ca jucătorul să mai aibă control. La impactul proiectilului cu terenul, acesta va lăsa în urmă un crater. La urmatoarea tură se schimbă personajul. |
| - | * Avionul scoate fum cand accelereaza | + | |
| - | * În momentul coliziunii, obiectele se sparg în mai multe bucățele (ca în video) | + | |
| - | * **Iluminare:** Avionul are lumini de tip spot în fața avionului | + | |
| + | ===== Bonusuri posibile ===== | ||
| - | === Notare (150p) === | + | * Crearea de efecte speciale la impactul proiectilului cu terenul |
| - | * Construcția avionului (total 30p) | + | * Adăugarea unei ținte sau a unor săgeți de ghidaj ale proiectilului |
| - | * Componente (10p) | + | * Adăugarea de cer cu textură |
| - | * Deplasare (10p) | + | * Adăugarea de UI pentru viață/jucător curent |
| - | * Animații (10p) | + | * Orice îmbunătățește vizual scena |
| - | * Construcția mediului (total 70p) | + | |
| - | * Marea (obiect + deformare animata in shader) (30p) | + | |
| - | * Norii (15p) | + | |
| - | * Combustibil (15p) | + | |
| - | * Obstacole (10p) | + | |
| - | * Interfața cu utilizatorul (10p) | + | |
| - | * Implementarea camerei third person (20p) | + | |
| - | * Implementarea camerei first person (20p) | + | |
| + | ===== Notare (150p) ===== | ||
| + | * Construcție teren (50p) | ||
| + | * Deformare teren (50p) | ||
| + | * Cameră third person + lansare proiectil (20p) | ||
| + | * Deplasare proiectil + crater + cameră observație (20p) | ||
| + | * Lumini spot deasupra celor două personaje (10p) | ||
| - | === Arhivarea proiectului === | + | ===== Arhivarea proiectului ===== |
| <note> | <note> | ||
| Line 95: | Line 132: | ||
| </note> | </note> | ||
| - | </hidden> | ||
