Differences
This shows you the differences between two versions of the page.
|
egc:teme:2023:03 [2023/12/16 15:35] andrei.lapusteanu Fix deadline |
egc:teme:2023:03 [2023/12/17 20:28] (current) andrei.lapusteanu Fix typo |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | <hidden> | ||
| ======= Tema 3 - Lighthouse ======= | ======= Tema 3 - Lighthouse ======= | ||
| Line 12: | Line 11: | ||
| 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. | ||
| + | |||
| + | <note important>În videoclip interacțiunea cu slider-ele se realizează folosind cursorul - această cerință **nu este impusă**.</note> | ||
| <html> | <html> | ||
| Line 28: | Line 29: | ||
| * **Bărcuțe**: Formate din cel puțin două primitive | * **Bărcuțe**: Formate din cel puțin două primitive | ||
| - | <note>Este permisă importarea de mesh-uri create în aplicații de modelare 3D.</note> | + | <note> |
| + | * Este permisă importarea de mesh-uri create în aplicații de modelare 3D | ||
| + | * Primitiva **cilindru** pe care am folosit-o pentru demo o puteți descărca de aici: {{:egc:teme:2023:cylinder.zip|}} | ||
| + | </note> | ||
| Următoarea imagine prezintă un exemplu de construcție al acestor modele. | Următoarea imagine prezintă un exemplu de construcție al acestor modele. | ||
| Line 38: | Line 42: | ||
| ==== Construcția scenei ==== | ==== Construcția scenei ==== | ||
| - | Scena virtuală trebuie configurată astfel încât să se poate vizualiza în mod ușor toate elementele de interes. Vă recomandăm o configurație similară cu cea prezentată în demo. | + | Scena virtuală trebuie configurată astfel încât să se poată vizualiza în mod ușor toate elementele de interes. Vă recomandăm o configurație similară cu cea prezentată în demo. |
| - | ==== [WIP] Comportamentul bărcuțelor ==== | + | ==== Comportamentul bărcuțelor ==== |
| - | **Instanțiere și construcție**: În scenă vom avem un număr fix de bărcuțe, minim 4. Bărcuțele trebuie să fie modelate a.î. să se poată identifica direcția lor de deplasare. În demo, direcția este indicată de velă. Aceasta rămâne tangentă la cerc pe toată durata deplasării. | + | **Instanțiere și construcție**: În scenă vom avem un număr fix de bărcuțe, minim 4. Bărcuțele trebuie să fie modelate a.î. să se poată identifica direcția lor de deplasare. În demo, direcția este indicată de velă. |
| **Dinamică**: Fiecare bărcuță se va deplasa pe un cerc de rază aleatorie, centrat în poziția farului. Punctul de start pe cerc, definit de unghiul de parcurgere a acestuia, este arbitrar. Viteza unghiulară de deplasare și sensul de rotație se modelează de asemenea aleatoriu. | **Dinamică**: Fiecare bărcuță se va deplasa pe un cerc de rază aleatorie, centrat în poziția farului. Punctul de start pe cerc, definit de unghiul de parcurgere a acestuia, este arbitrar. Viteza unghiulară de deplasare și sensul de rotație se modelează de asemenea aleatoriu. | ||
| - | + | <note tip>Valoarea pozitivă sau negativă a vitezei dă sensul deplasării. </note> | |
| - | <note tip>Valoarea vitezei poate da sensul de deplasare.</note> | + | <note important>În timpul deplasării, bărcuțele trebuie să fie orientate conform direcției de deplasare pe cerc. </note> |
| ==== Poziționarea camerei ==== | ==== Poziționarea camerei ==== | ||
| Line 60: | Line 64: | ||
| Pe mesh-ul corespunzător apei va trebui aplicată o textură care se repetă. Acest lucru se poate obține prin oricare dintre următoarele 2 moduri: | Pe mesh-ul corespunzător apei va trebui aplicată o textură care se repetă. Acest lucru se poate obține prin oricare dintre următoarele 2 moduri: | ||
| * Folosirea unui mesh (fie importat, fie creat de către voi din cod) ale cărui coordonate de texturare sunt în afara domeniului uzual al spațiului UV (0,0) -> (1,1) | * Folosirea unui mesh (fie importat, fie creat de către voi din cod) ale cărui coordonate de texturare sunt în afara domeniului uzual al spațiului UV (0,0) -> (1,1) | ||
| - | * Prin scalarea coordonatelor de texturare în shader. În cazul în care mesh-ul pentru plan/quad are toate coordonatele de texturare definite în intervalul (0,0) -> (1,1), deoarece acest mesh trebuie scalat în mod semnificativ pentru scena virtuală, simpla aplicare a texturii va conduce la întinderea acesteia pe întreg planul și veți obține un efect de 'zoomed-in'. Așadar, va trebui să scalați coordonatele de texturare în shader pentru a repeta textura pe mesh | + | * Prin scalarea coordonatelor de texturare în shader. În cazul în care mesh-ul pentru plan/quad are toate coordonatele de texturare definite în intervalul (0,0) -> (1,1), deoarece acest mesh trebuie scalat în mod semnificativ pentru scena virtuală, simpla aplicare a texturii va conduce la întinderea acesteia pe întreg planul și veți obține un efect 'zoomed-in'. Așadar, va trebui să scalați coordonatele de texturare în shader pentru a repeta textura pe mesh |
| <note tip> | <note tip> | ||
| Line 99: | Line 103: | ||
| <note important>**Atenție**, această colorare este doar în scop demonstrativ! Voi va trebui să vă folosiți de acest concept **nu** pentru colorarea directă a mesh-ului, ci pentru alterarea coordonatelor de texturare ale apei.</note> | <note important>**Atenție**, această colorare este doar în scop demonstrativ! Voi va trebui să vă folosiți de acest concept **nu** pentru colorarea directă a mesh-ului, ci pentru alterarea coordonatelor de texturare ale apei.</note> | ||
| - | În GIF-ul de mai jos puteți observa în partea stânga textura apei care suferă doar efectul de translație, iar în partea dreaptă un exemplu pentru translație + efectul de valuri. | + | În GIF-ul de mai jos puteți observa în partea stângă textura apei care suferă doar efectul de translație, iar în partea dreaptă un exemplu pentru translație + efectul de valuri. |
| {{ :egc:teme:2023:egc_2023_t3_watertexturemodulation.gif?650 |}} | {{ :egc:teme:2023:egc_2023_t3_watertexturemodulation.gif?650 |}} | ||
| <note>Nu sunt aplicate calcule de iluminare în imaginea de mai sus.</note> | <note>Nu sunt aplicate calcule de iluminare în imaginea de mai sus.</note> | ||
| - | |||
| - | <del>Astfel, pentru a calcula translatarea necesară pentru valuri se poate folosii o formulă de genul ''vec2 wave_translation_coords = vec2(sin(world_position.x * 10) / 300f);''. Pentru a obține coordonatele finale ale fragmentului trebuie adăugate coordonatele de translatare pentru valuri la coordonatele calculate pentru mișcarea apei: ''vec2 final_text = new_coords * scale + wave_translation_coords;''</del> | ||
| ===== Iluminare ===== | ===== Iluminare ===== | ||
| Line 111: | Line 113: | ||
| Iluminarea scenei se va implementa folosind 3 tipuri de surse de lumină: **punctiformă**, **direcțională** și **spotlight**. Fiecare sursă de lumină (indiferent de tipul acesteia) o să aibă o culoare specifică și trebuie să se țină cont de această culoare pentru iluminare. | Iluminarea scenei se va implementa folosind 3 tipuri de surse de lumină: **punctiformă**, **direcțională** și **spotlight**. Fiecare sursă de lumină (indiferent de tipul acesteia) o să aibă o culoare specifică și trebuie să se țină cont de această culoare pentru iluminare. | ||
| - | **Lumină punctiformă:** acest tip de sursă de lumină este cel prezentat la laborator. Este necesar să se folosească acest tip de lumina pentru: | + | **Lumina punctiformă:** acest tip de sursă de lumină este cel prezentat la laborator. Este necesar să se folosească acest tip de lumină pentru: |
| - | * Reflectorul farului (pe lângă lumina spotlight a acestuia) astfel încât să se ilumineze și turnul farului | + | * Reflectorul farului (pe lângă lumina spotlight a acestuia) astfel încât să se ilumineze zonele din proximitatea farului |
| * Fiecare bărcuță, astfel încât să se ilumineze aceasta și apa din jurul ei. Lumina va fi atașată de bărcuță și trebuie să aibă o culoare aleatorie | * Fiecare bărcuță, astfel încât să se ilumineze aceasta și apa din jurul ei. Lumina va fi atașată de bărcuță și trebuie să aibă o culoare aleatorie | ||
| Line 119: | Line 121: | ||
| {{ :egc:teme:2023:egc_2023_t3_pointlightsonly.png?400 |}} | {{ :egc:teme:2023:egc_2023_t3_pointlightsonly.png?400 |}} | ||
| - | **Lumină 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 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 luna 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ă - observați iluminarea pe partea stângă a farului, corespunzătoare direcției cerute. | În următoarea imagine a fost activată numai lumina direcțională - observați iluminarea pe partea stângă a farului, corespunzătoare direcției cerute. | ||
| Line 125: | Line 127: | ||
| {{ :egc:teme:2023:egc_2023_t3_dirlightonly.png?400 |}} | {{ :egc:teme:2023:egc_2023_t3_dirlightonly.png?400 |}} | ||
| - | **Lumina de tip spotlight:** acest tip de sursă de lumină este cel prezentat la laborator. Este necesar să se folosească 2 surse de acest tip de lumină pentru far, poziționate în partea superioară a acestuia, care să se rotească în jurul farului în mod continuu. Între direcțiile celor 2 surse spotlight trebuie să fie un defazaj de 180°. De asemenea, luminile spotlight trebuie să fie colorate (detalii în secțiunea **Interfața cu utilizatorul**) | + | **Lumina de tip spotlight:** acest tip de sursă de lumină este cel prezentat la laborator. Este necesar să se folosească 2 surse de acest tip pentru far, poziționate în partea superioară a acestuia, care să se rotească în jurul farului în mod continuu. Între direcțiile celor 2 surse spotlight trebuie să fie un defazaj de 180°. De asemenea, luminile spotlight trebuie să fie colorate (detalii în secțiunea **Interfața cu utilizatorul**) |
| În următorul GIF puteți observa un exemplu de implementare pentru comportamentul acestor spotlight-uri. | În următorul GIF puteți observa un exemplu de implementare pentru comportamentul acestor spotlight-uri. | ||
| Line 143: | Line 145: | ||
| ==== Mesh-ul lunii ==== | ==== Mesh-ul lunii ==== | ||
| - | Mesh-ul lunii trebuie texturat cu o imagine a lunii. Pentru a oferi o strălucire lunii (efect de glow) este necesar ca randarea acesteia să includă și o componentă emisivă de culoare albă. | + | Mesh-ul lunii trebuie texturat cu o imagine a lunii. Pentru a oferi o strălucire lunii este necesar ca randarea acesteia să includă și o componentă emisivă de culoare albă. |
| ===== Interfața cu utilizatorul ===== | ===== Interfața cu utilizatorul ===== | ||
| Line 149: | Line 151: | ||
| Interfața cu utilizatorul constă în implementarea a 3 slider-e, ce au scopul de a controla culoarea luminilor emise de către far (point și spotlight), precum și culoarea mesh-ului reflector. Fiecare slider va controla contribuția unei componete de culoare (R, G, B), iar culoarea finală va fi calculată corespunzător acestor contribuții. | Interfața cu utilizatorul constă în implementarea a 3 slider-e, ce au scopul de a controla culoarea luminilor emise de către far (point și spotlight), precum și culoarea mesh-ului reflector. Fiecare slider va controla contribuția unei componete de culoare (R, G, B), iar culoarea finală va fi calculată corespunzător acestor contribuții. | ||
| - | Slider-ele pot fi construite din pătrate scalate. Este necesar ca fiecare slider să fie construit din 2 astfel de pătrate - unul pentru componenta statică a slider-ului (background-ul), celălalt pentru componenta interactivă (care se poate scala). Componenta interactivă trebuie colorată corespunzător canalului de culoare pe care o controlează. | + | **Construcție:** Slider-ele pot fi construite din pătrate scalate. Este necesar ca fiecare slider să fie construit din 2 astfel de pătrate - unul pentru componenta statică a slider-ului (background-ul), celălalt pentru componenta interactivă (care se poate scala). Componenta interactivă trebuie colorată corespunzător canalului de culoare pe care o controlează. |
| - | Interacțiunea cu slider-ele se va realiza prin intermediul cursorului. La evenimentului unui click în zona din ecran corespunzătoare slider-ului, componenta scalabilă a slider-ului va urmări în fiecare frame poziția pe ecran a cursorului. | + | **Interacțiune**: Aceasta se va realiza prin intermediul a 6 taste - pentru fiecare slider se vor folosi câte 2 taste, una pentru a crește valoarea contribuției, cealaltă pentru scăderea acesteia. Partea interactivă a slider-elor se va scala corespunzător valorii contribuției. Această interacțiune trebuie să aibă loc **în fiecare frame** în care tastele sunt ținute apăsate. |
| Pentru randarea slider-ului vă recomandăm următoarele (nu sunt cerințe impuse): | Pentru randarea slider-ului vă recomandăm următoarele (nu sunt cerințe impuse): | ||
| * Folosirea unei camera cu proiecție ortografică - puteți folosi doar o singură cameră, randați întâi scena 3D folosind proiecția perspectivă, iar pentru slider-e o configurați folosind o proiecție ortografică | * Folosirea unei camera cu proiecție ortografică - puteți folosi doar o singură cameră, randați întâi scena 3D folosind proiecția perspectivă, iar pentru slider-e o configurați folosind o proiecție ortografică | ||
| * Implementarea unui shader auxiliar doar pentru randarea slider-elor | * Implementarea unui shader auxiliar doar pentru randarea slider-elor | ||
| - | |||
| - | <note> | ||
| - | Interacțiunea cu aceste elemente de UI, precum și efectul acestora se poate observa în videoclip-ul demo. | ||
| - | </note> | ||
| ===== Barem ===== | ===== Barem ===== | ||
| Line 170: | Line 168: | ||
| * Rotație bărcuțe (fiecare cu rază diferită) în jurul insulei (5p) | * Rotație bărcuțe (fiecare cu rază diferită) în jurul insulei (5p) | ||
| * Orientarea corectă a bărcuțelor în funcție de traiectoria lor (5p) | * Orientarea corectă a bărcuțelor în funcție de traiectoria lor (5p) | ||
| + | * **Efecte shader apă** (35p) | ||
| + | * Repetare textură (5p) | ||
| + | * Efect de mișcare al texturii apei (10p) | ||
| + | * Efect de valuri (20p) | ||
| * **Iluminare** (40p) | * **Iluminare** (40p) | ||
| * Lumină direcțională (10p) | * Lumină direcțională (10p) | ||
| Line 178: | Line 180: | ||
| * Implementarea celor 2 lumini, cu originea în far (10p) | * Implementarea celor 2 lumini, cu originea în far (10p) | ||
| * Rotația în mod continuu a acestora (5p) | * Rotația în mod continuu a acestora (5p) | ||
| - | * **Efecte shader apă** (35p) | ||
| - | * Repetare textură (5p) | ||
| - | * Efect de mișcare al texturii apei (10p) | ||
| - | * Efect de valuri (20p) | ||
| * **Interfața cu utilizatorul** (30p) | * **Interfața cu utilizatorul** (30p) | ||
| * Randarea celor 3 slider-e (10p) | * Randarea celor 3 slider-e (10p) | ||
| - | * Interacțiunea cu mouse-ul (10p) | + | * Interacțiunea cu slider-ele folosind tastele (10p) |
| * Setarea culorii luminilor farului pe baza valorii slider-elor (10p) | * Setarea culorii luminilor farului pe baza valorii slider-elor (10p) | ||
| - | ===== [WIP] Exemple de Funcționalități Bonus===== | + | ===== Exemple de Funcționalități Bonus===== |
| + | * Interacțiunea cu slider-ele folosind cursorul (exemplu în demo) | ||
| * Introducerea unor bărcuțe "polițist" cu girofar | * Introducerea unor bărcuțe "polițist" cu girofar | ||
| - | * Modelarea valurilor 3D | + | * Modelarea valurilor 3D (vertex displacement) |
| - | * Utilizarea unei traiectorii complexe de deplasare a bărcuțelor | + | * Utilizarea unei traiectorii complexe pentru deplasarea bărcuțelor |
| * Modelarea unor obstacole plutitoare | * Modelarea unor obstacole plutitoare | ||
| - | * Selector de culoare sub forma circulară pe modelul HSV | + | * Selector de culoare sub formă circulară pe modelul HSV |
| ===== Întrebări și răspunsuri ===== | ===== Întrebări și răspunsuri ===== | ||
| Line 221: | Line 220: | ||
| * Î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> | ||
