Differences
This shows you the differences between two versions of the page.
|
egc:teme:2023:03 [2023/12/16 16:42] mihnea.mitrache barcute |
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. |
| ==== Comportamentul bărcuțelor ==== | ==== Comportamentul bărcuțelor ==== | ||
| 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 |}} | ||
| Line 109: | 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 117: | 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 123: | 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 141: | 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 147: | 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 168: | 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 176: | 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) | ||
| ===== 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 (vertex displacement) | * 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 219: | 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> | ||
