Differences
This shows you the differences between two versions of the page.
|
egc:teme:2019:03 [2019/12/04 20:56] 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ă. |
| - | + | ||
| - | Demo (cu tot cu bonusuri): | + | |
| <html> | <html> | ||
| <p style="text-align:center;margin:auto;"> | <p style="text-align:center;margin:auto;"> | ||
| - | <iframe width="560" height="315" src="https://www.youtube.com/embed/s6gM2GBF3Ek?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="text-align:center;margin:auto;"></iframe> | + | <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> | </p> | ||
| </html> | </html> | ||
| + | ===== Construcția terenului ===== | ||
| - | === Gameplay === | + | ==== Harta de inălțimi ==== |
| - | Jocul va fi un endless runner cu un avion într-o mișcare continuă de la stânga la dreapta. Pentru control avionul va urmări mouse-ul în deplasarea sus-jos. În momentul în care avionul merge în sus, acesta va fi rotit corespunzător cu partea din față a avionului orientată înspre cer. Când acesta merge în jos, avionul va fi rotit înspre mare. | + | |
| - | Pilotul va avea un total de 3 vieți. În scenă, vor apărea periodic obstacole pe care pilotul trebuie să le evite. Dacă nu reușește să le evite și intră în ele, acesta va pierde o viață. În momentul în care rămâne fără vieți, jocul s-a terminat. | + | Definim o suprafață de baleiere descrisă de funcția: |
| - | De asemenea, pilotul trebuie să aibă în calcul și cât combustibil mai are. Combustibilul se consumă constant în timp sau în momentul accelerării. În momentul în care rămâne fără combustibil, jocul s-a terminat. Pentru a nu rămâne fără combustibil, pilotul trebuie să adune cât mai multe obiecte de combustibil. | + | $$ |
| + | f(x,z) = y | ||
| + | $$ | ||
| - | Pentru a evidenția finalul jocului se va implementa o animație de prăbușire a avionului prin rotirea și căderea acestuia în jos (vedeți un exemplu la finalul demo-ului). | + | Datorită construcției, o astfel de suprafață poate fi determinată direct de conținutul unei texturi în următorul mod: |
| - | Jucătorul va avea la dispoziție o cameră first person și o cameră third person asemănătoare cu cea din demo. Se poate schimba între cele două camere prin apăsarea tastei C. | + | $$ |
| + | f(x,z) = texture2D(textureUnit,vec2 (u,v)).r | ||
| + | $$ | ||
| + | unde $\{u, v\}$ reprezintă coordonatele de textură asociate coordonatelor spațiale $\{x,z\}$. | ||
| - | === Construcția Scenei === | + | 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. |
| - | * **Avionul:** Pentru a crea avionul, veți folosi mai multe forme simple. De exemplu, puteți folosi cuburi de mărimi și culori diferite. Astfel, puteți avea două cuburi pentru aripi, un cub pentru coadă, un cub pentru corp, un cub pentru cap, un cub pentru elice și un cub pentru suportul de elice. De asemenea, elicea avionului trebuie să se rotească în continuu (exemplu în figura de mai jos). | + | |
| - | {{ :egc:teme:2019:constructia_avionului.png?nolink&300 |}} | + | {{ :egc:teme:2019:heightmap.png?nolink&200 |}} |
| + | ==== Geometria suport ==== | ||
| - | * **Norii:** Norii vor fi și ei, la rândul lor, construiți din mai multe forme simple. Puteți să îi construiți, folosind 4 cuburi poziționate aleator unul lângă altul. Un exemplu de nor aveți în figura de mai jos. Norii trebuie să aibă o animație (de exemplu să se rotească anumite cuburi din componența lor). | + | 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:norii.png?nolink&300 |}} | + | {{ :egc:teme:2019:terrain1.png?nolink&600 |}} |
| + | 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. | ||
| - | * **Marea:** Pentru a crea marea deasupra căreia zboară avionul, veți folosi un cilindru pe care îl veți plasa centrat în partea de jos a ecranului. Pentru realism, marea va avea valuri generate și se va roti în continuu. Valurile vor fi realizate în Vertex Shader prin deformări aleatoare, dar care sa asigure o continuitate in timp (de exemplu se pot defini varfuri interioare cilindrului cu pozitii distorsionate ca in figura, iar apoi se poate aplica in vertex shader o rotație în jurul poziției inițiale pentru fiecare vertex al cilindrului, fiecare astfel de rotație având viteză și rază aleatoare definita pentru vertexul respectiv) | + | {{ :egc:teme:2019:terrain2.png?nolink&600 |}} |
| - | {{ :egc:teme:2019:marea.png?nolink&400 |}} | + | ==== Calculul normalelor ==== |
| + | 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. | ||
| - | * **Obstacole:** Obstacolele vor fi reprezentate în scenă prin obiecte de culoare roșie (de exemplu sfere) cu o animație de rotație. În momentul coliziunii cu avionul acestea dispar iar jucătorul pierde o viață. | + | * Se obține înălțimea de la pixelul curent, de la cel din dreapta și cel de sus. |
| - | * **Combustibil:** Alimentarea avionului se poate face din zbor prin colectarea obiectelor de combustibil. Acestea vor fi reprezentate de obiecte cu o culoare turcoaz, vor dispuse într-o înșiruire arcuită și vor avea o animație de rotire permanentă. Pot fi reprezentate spre exemplu prin obiecte de tip Teapot. În momentul coliziunii cu avionul acestea dispar, iar combustibilul avionului va crește. | + | $$ |
| + | 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 | ||
| + | $$ | ||
| - | <note tip>Mai multe informatii despre coliziuni si cum se pot implementa in 3D: | + | * Se calculează diferențele pe $x$ și pe $z$. |
| - | * [[https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection]] | + | |
| + | $$ | ||
| + | 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 108: | Line 132: | ||
| </note> | </note> | ||
| - | </hidden> | ||
