Differences
This shows you the differences between two versions of the page.
|
egc:teme:2024:03 [2024/12/14 21:48] mihnea.mitrache |
egc:teme:2024:03 [2024/12/15 21:43] (current) andrei.lapusteanu Corrected normal recomputation text (changed vertex height to texel height) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | <hidden> | ||
| - | |||
| ======= Tema 3 - Cappadocian Balloons ======= | ======= Tema 3 - Cappadocian Balloons ======= | ||
| Line 10: | Line 8: | ||
| * **Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!** | * **Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!** | ||
| - | În cadrul acestei teme veți implementa o scenă virtuală ce face referire la faimoasele baloane cu aer cald Cappadociene - se vor studia astfel conceptele de iluminare și texturare. Elementele vizuale principale ce compun scena vor fi un teren texturat și modificat în înălțime printr-un shader, baloanele cu aer cald, precum și un soare la asfințit. | + | În cadrul acestei teme veți implementa o scenă virtuală ce face referire la faimoasele baloane cu aer cald cappadociene (puteți vizualiza [[https://sofiaadventures.com/wp-content/uploads/2019/10/shutterstock_531058951.jpg|aici]] o imagine de referință) - se vor studia astfel conceptele de iluminare și texturare. Elementele vizuale principale ce compun scena vor fi un teren texturat și modificat în înălțime printr-un shader, baloanele cu aer cald, precum și un soare la asfințit. |
| Puteți studia în următorul videoclip o posibilă implementare a cerințelor. | Puteți studia în următorul videoclip o posibilă implementare a cerințelor. | ||
| Line 16: | Line 14: | ||
| <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/jq4mYlVD5KI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | + | <iframe width="560" height="315" src="https://www.youtube.com/embed/eo0g7awNbsE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </p> | </p> | ||
| </html> | </html> | ||
| Line 38: | Line 36: | ||
| - Corp balon – sferă (cu deformarea propusă mai jos) | - Corp balon – sferă (cu deformarea propusă mai jos) | ||
| - Conectoare – 4 paralelipipede | - Conectoare – 4 paralelipipede | ||
| + | {{ :egc:teme:2024:ballonconstructionref1.png?400 |}} | ||
| Line 62: | Line 60: | ||
| Pentru fiecare balon trebuie să se aleagă (de preferat aleator) o înălțime \(\mathbf{H}\) la care să se rotească (astfel centrul traiectoriei va fi \((C.x, H, C.y)\)), o rază \(\mathbf{R}\) a cercului care descrie traiectoria și o viteză de rotație \(\omega\). Rezultatul va fi o serie de traiectorii concentrice paralele cu \(XOZ\) și paralele între ele, la înălțimi diferite față de pământ. | Pentru fiecare balon trebuie să se aleagă (de preferat aleator) o înălțime \(\mathbf{H}\) la care să se rotească (astfel centrul traiectoriei va fi \((C.x, H, C.y)\)), o rază \(\mathbf{R}\) a cercului care descrie traiectoria și o viteză de rotație \(\omega\). Rezultatul va fi o serie de traiectorii concentrice paralele cu \(XOZ\) și paralele între ele, la înălțimi diferite față de pământ. | ||
| - | În plus, pentru un efect mai realist, fiecare balon va avea o oscilație pe axa \(OY\) de forma \(\Delta y = A \cdot \sin(\omega \cdot \Delta t)\) (unde \(A\) și \(\omega\) se vor alege astfel încât efectul vizual să pară realist). | + | În plus, pentru un efect mai realistic, fiecare balon va avea o oscilație pe axa \(OY\) de forma \(\Delta y = A \cdot \sin(\omega \cdot \Delta t)\) (unde \(A\) și \(\omega\) se vor alege astfel încât efectul vizual să pară realistic). |
| ===== Construcția terenului ===== | ===== Construcția terenului ===== | ||
| Line 78: | Line 76: | ||
| <code cpp> | <code cpp> | ||
| // GLSL code | // GLSL code | ||
| - | const float Y_OFFSET = 15.; | + | const float Y_OFFSET = 0.5; |
| // Get vertex height from the height map | // Get vertex height from the height map | ||
| new_position.y = Y_OFFSET * texture(texture_1, v_texture_coord).r; | new_position.y = Y_OFFSET * texture(texture_1, v_texture_coord).r; | ||
| Line 92: | Line 90: | ||
| Terenul, reprezentat de planul subdivizat, se va textura folosind coordonatele sale de textură. Pentru a obține un efect interesant vă veți folosi de două texturi de culoare, împreună cu textura de adâncime. Fiecare fragment se colorează în funcție de înălțime. Pentru o trecere uniformă este necesară interpolarea liniară în zonele de înălțime medie. Ideea este evidențiată de diagrama de mai jos: | Terenul, reprezentat de planul subdivizat, se va textura folosind coordonatele sale de textură. Pentru a obține un efect interesant vă veți folosi de două texturi de culoare, împreună cu textura de adâncime. Fiecare fragment se colorează în funcție de înălțime. Pentru o trecere uniformă este necesară interpolarea liniară în zonele de înălțime medie. Ideea este evidențiată de diagrama de mai jos: | ||
| + | {{ :egc:teme:2024:groundlerpdiag2.png?400 |}} | ||
| Line 122: | Line 120: | ||
| \] | \] | ||
| - | Se eșantionează textura suport (harta de înălțimi) pentru a determina înălțimea fiecărui vertex. Se folosesc coordonatele de textură (\(v_{\text{texCoord}}\)) pentru a extrage valoarea înălțimii corespunzătoare (\(h\)), dar și valorile de înălțime ale vecinilor acestuia, de-a lungul axelor X și Z. | + | Se eșantionează textura suport (harta de înălțimi) pentru a determina "înălțimea" texelilor (în esență, se identifică valoarea de luminozitate a texelului, pe care o notăm cu (\(h\))). Se folosesc coordonatele de textură (\(v_{\text{texCoord}}\)) pentru a extrage valoarea înălțimii corespunzătoare (\(h\)), dar și valorile de înălțime ale vecinilor acestuia, de-a lungul axelor X și Z. |
| \[ | \[ | ||
| Line 130: | Line 128: | ||
| \] | \] | ||
| - | Următorul pas este calcularea gradientelor pe direcțiile X și Z. Factorul de scalare pe verticală \((y_{\text{offset}})\) reprezintă valoarea utilizată anterior pentru ajustarea înălțimii terenului pe baza harții de înălțimi: | + | Următorul pas este calcularea gradientelor pe direcțiile X și Z. Factorul de scalare pe verticală \((y_{\text{offset}})\) reprezintă valoarea utilizată anterior pentru ajustarea înălțimii terenului pe baza hărții de înălțimi: |
| \[ | \[ | ||
| Line 163: | Line 161: | ||
| {{ :egc:teme:2024:egc_2024_t3_recompute_normals_3.png?300 |}} | {{ :egc:teme:2024:egc_2024_t3_recompute_normals_3.png?300 |}} | ||
| - | În final, animația de mai jos ilustrează cum sunt normalele recalculate în funcție de înălțimea terenului, precum și rezultatul în cazul unei lumini direcționale. | + | În final, animația de mai jos ilustrează cum sunt normalele recalculate în funcție de înălțimea terenului, precum și rezultatul obținut în urma adăugării unei lumini direcționale. |
| {{ :egc:teme:2024:egc_2024_t3_recompute_normals_4.gif?400 |}} | {{ :egc:teme:2024:egc_2024_t3_recompute_normals_4.gif?400 |}} | ||
| Line 175: | Line 173: | ||
| <note>Iluminarea trebuie să fie implementată folosind **modelul de shading Phong**, precum și **modelul de calcul al reflexiei luminii Phong**.</note> | <note>Iluminarea trebuie să fie implementată folosind **modelul de shading Phong**, precum și **modelul de calcul al reflexiei luminii Phong**.</note> | ||
| - | **Lumina punctiformă:** Aceasta este reprezentată de sursele care emit lumina cu aceeași intensitate indiferent de direcție. Acest tip de lumină trebuie implementat pentru **fiecare balon cu aer cald**: Lumina trebuiă să ramână la o poziție fixă relativ la balon și să aibă o culoare și intensitate luminoasă aleatorie. | + | **Lumina punctiformă:** Aceasta este reprezentată de sursele care emit lumina cu aceeași intensitate in toate direcțiile. Acest tip de lumină trebuie implementat pentru **fiecare balon cu aer cald**: Lumina trebuiă să ramână la o poziție fixă relativ la balon și să aibă o culoare și intensitate luminoasă aleatorie. |
| În următoarea imagine au fost activate numai luminile punctiforme: | În următoarea imagine au fost activate numai luminile punctiforme: | ||
| Line 185: | Line 183: | ||
| </note> | </note> | ||
| - | **Lumina direcțională:** aceasta va ilumina toate obiectele din scenă cu aceeași intensitate. Specific luminii de tip direcțional este faptul că vectorul luminii incidente $L$ nu depinde de poziția luminii sau a fragmentului care trebuie iluminat (precum în cazul luminilor de tip point și spot). Așadar, pentru fiecare fragment, iluminarea va fi calculată folosind același vector $L$ (corespunzător direcției luminii). Astfel, pentru o sursă de lumină de tip direcțional este nevoie să se definească direcția acesteia și culoarea luminii emise. În cadrul acestei teme vom considera luna ca `sursa` acestei lumini direcționale, așadar, va trebui să setați direcția acestei lumini în mod corespunzător. | + | **Lumina direcțională:** aceasta va ilumina toate obiectele din scenă cu aceeași intensitate. Specific luminii de tip direcțional este faptul că vectorul luminii incidente $L$ nu depinde de poziția luminii sau a fragmentului care trebuie iluminat (precum în cazul luminilor de tip point și spot). Așadar, pentru fiecare fragment, iluminarea va fi calculată folosind același vector $L$ (corespunzător direcției luminii). Astfel, pentru o sursă de lumină de tip direcțional este nevoie să se definească direcția acesteia și culoarea luminii emise. În cadrul acestei teme vom considera soarele ca `sursa` acestei lumini direcționale, așadar, va trebui să setați direcția acestei lumini în mod corespunzător. |
| În următoarea imagine a fost activată numai lumina direcțională: | În următoarea imagine a fost activată numai lumina direcțională: | ||
| Line 191: | Line 189: | ||
| {{ :egc:teme:2024:egc_2024_t3_lights_2.png?500 |}} | {{ :egc:teme:2024:egc_2024_t3_lights_2.png?500 |}} | ||
| - | ===== Barem ===== | + | ===== Barem [150p] ===== |
| * **Construcția baloanelor [30p]** | * **Construcția baloanelor [30p]** | ||
| Line 214: | Line 212: | ||
| * Câte o lumină de culoare și intensitate aleatorie pentru fiecare balon [25p] | * Câte o lumină de culoare și intensitate aleatorie pentru fiecare balon [25p] | ||
| - | ===== Exemple de Funcționalități Bonus===== | + | ===== Exemple de Funcționalități Bonus ===== |
| * Unele baloane să aibă o traiectorie definită de un set de puncte generate aleatoriu și să se interpoleze poziția acestora între ele. | * Unele baloane să aibă o traiectorie definită de un set de puncte generate aleatoriu și să se interpoleze poziția acestora între ele. | ||
| Line 246: | Line 244: | ||
| * În cazul în care arhiva tot depășește limita de 50MB (nu ar trebui), puteți să ștergeți și folderul __**/deps**__ sau __**/assets**__ întrucât se pot adăuga la testare. Nu este recomandat să faceți acest lucru întrucât îngreunează mult testarea în cazul în care versiunea curentă a bibliotecilor/resurselor diferă de versiunea utilizată la momentul scrierii temei. | * În cazul în care arhiva tot depășește limita de 50MB (nu ar trebui), puteți să ștergeți și folderul __**/deps**__ sau __**/assets**__ întrucât se pot adăuga la testare. Nu este recomandat să faceți acest lucru întrucât îngreunează mult testarea în cazul în care versiunea curentă a bibliotecilor/resurselor diferă de versiunea utilizată la momentul scrierii temei. | ||
| </note> | </note> | ||
| - | |||
| - | </hidden> | ||
