Show page

Differences

This shows you the differences between two versions of the page.

--- egc:teme:2025:03 [2025/12/14 12:13]
andrei.lapusteanu Added hint on steps required to compute light cookie effect
+++ egc:teme:2025:03 [2025/12/14 22:47] (current)
andrei.lapusteanu Public version!
@@ Line 1: / Line 1: @@
-<hidden>
 ======= Tema 3 - Firefly Forest =======
   * **Responsabili:** Andrei Lăpușteanu, Vlad-Matei Drăghici, Mihnea-Petruţ-Ilie Mitrache
-  * **Lansare:** [Data lansării]
+  * **Lansare:** 14 decembrie 2025
-  * **Termen de predare:** [Data predării], ora 23:59
+  * **Termen de predare:** 18 ianuarie 2026, ora 23:59
   * **Regulament:** [[egc:teme:regulament|]]
   * **Notă:** Această temă este considerată **temă suplimentară**
   * **Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!**
+<note tip>
+În cadrul acestei teme puteți opta pentru a **lucra în echipe de maxim 2 studenți**!
+  * Cerințele sunt aceleași atât pentru o implementare în mod individual cât și în echipă
+  * În cazul lucrului în echipă, în timpul prezentării temei va trebui să prezentați în mod diferențiat contribuția fiecăruia (să știe și să prezinte fiecare student ce a implementat)
+</note>
 În cadrul acestei teme veți implementa o scenă virtuală ce prezintă o pădure nocturnă, populată de licurici, care include și un turn de observație. Tema urmărește studierea conceptelor de iluminare și texturare.
@@ Line 18: / Line 22: @@
 <html>
 <p style="text-align:center;margin:auto;">
-<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" 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/tdg4r_rSIZY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </p>
 </html>
@@ Line 61: / Line 65: @@
 {{ :egc:teme:2025:treegeom.png?400 |}}
-Trunchiului i se va aplica un efect simplu de subțiere pe înălțime. Frunzele vor avea o animație ciclică, simulând bătaia vântului. Aceste efecte se realizează în shader și sunt descrise mai jos
+<note>
+Primitiva de tip cilindru nu se regăsește în framework. Dacă doriți s-o utilizați, aceasta se poate descărca de aici {{:egc:teme:2025:cylinder.zip|}}
+</note>
+Trunchiului i se va aplica un efect simplu de subțiere pe înălțime. Frunzele vor avea o animație ciclică, simulând bătaia vântului. Aceste efecte se realizează în shader și sunt descrise mai jos.
 ==== Deformare în Vertex Shader (Copaci) ====
@@ Line 125: / Line 133: @@
 De asemenea, vă recomandăm utilizarea unei texturi de tip "seamless" pentru acest task.
 </note>
+===== Licuricii =====
+==== Construcție și randare ====
+Licuricii sunt reprezentați de sfere mici cu shader emisiv. Aceștia emit propria lor culoare fără a fi iluminați de alte surse de lumină, creând efectul de strălucire caracteristic. Culoarea emisivă este considerată valoare finală, fără calcule de iluminare Phong, și este apoi atenuată prin ceață pentru consistență cu restul scenei.
+<note>
+Lumina punctiformă produsă de licurici este tratată în secțiunea de //Iluminare -> Lumini punctiforme (Licurici)//. În această secțiune se prezintă doar cum ar trebui să fie creată culoarea corespunzătoare (componenta emisivă) modelului de licurici (sfera).
+</note>
+==== Comportament și mișcare ====
+Licuricii se vor deplasa pe traiectorii orbitale fie în jurul camerei, fie în jurul turnului (alegeți voi varianta care vă place). Fiecare licurici va avea:
+  * **Rază orbitală** – distanța față de centrul orbitei (camera sau turnul)
+  * **Viteză unghiulară** – viteza de rotație pe orbită
+  * **Fază inițială** – poziția de start pe cerc
+  * **Oscilație verticală** – mișcare sinusoidală pe axa Y pentru un efect mai natural
+Traiectoria rezultată va fi o combinație între mișcarea circulară orizontală și oscilația verticală:
+\[
+x = C_x + R \cdot \cos(\omega t + \phi) \\
+z = C_z + R \cdot \sin(\omega t + \phi) \\
+y = C_y + h_0 + A \cdot \sin(\omega_v t + \phi_v)
+\]
+unde \((C_x, C_y, C_z)\) reprezintă poziția în jurul căreia licuricii orbitează, \(R\) este raza orbitală, și \(A\) este amplitudinea oscilației verticale.
+În GIF-ul următor este ilustrat un exemplu pentru randarea și comportamentul licuricilor.
+{{ :egc:teme:2025:egc_2025_t3_fireflies_no_light.gif?400 |}}
 ===== Efectul de ceață (Fog) =====
-Pentru a adăuga atmosferă scenei și pentru a simula adâncimea, se va implementa un efect de ceață în Fragment Shader.
+Pentru a adăuga un plus atmosferei și pentru a simula adâncimea, se va implementa un efect de ceață în Fragment Shader.
 Se va folosi un model de ceață cu atenuare liniară, în care densitatea ceții crește proporțional cu distanța dintre fragment și cameră. Fragmentele apropiate de cameră vor fi vizibile clar, în timp ce cele îndepărtate vor fi estompate progresiv spre culoarea ceții.
@@ Line 168: / Line 208: @@
 Pentru un efect realistic, setați culoarea de ștergere a ecranului să fie acceași cu cea a ceții.
 </note>
-===== Licuricii =====
-==== Construcție și randare ====
-Licuricii sunt reprezentați de sfere mici cu o componentă puternic emisivă. Aceștia nu vor fi iluminați de alte surse de lumină, ci vor emite propria lor culoare, creând efectul de strălucire caracteristic licuricilor.
-Pentru a obține un efect realist, shader-ul licuricilor va include:
-  * O componentă emisivă care pulsează în timp (intensitate variabilă sinusoidal)
-  * Opțional: efect Fresnel pentru strălucire accentuată la margini
-  * Atenuare prin ceață pentru consistență cu restul scenei
-==== Comportament și mișcare ====
-Licuricii se vor deplasa pe traiectorii orbitale în jurul camerei. Fiecare licurici va avea:
-  * **Rază orbitală** – distanța față de centrul orbitei (camera)
-  * **Viteză unghiulară** – viteza de rotație pe orbită
-  * **Fază inițială** – poziția de start pe cerc
-  * **Oscilație verticală** – mișcare sinusoidală pe axa Y pentru un efect mai natural
-Traiectoria rezultată va fi o combinație între mișcarea circulară orizontală și oscilația verticală:
-\[
-x = C_x + R \cdot \cos(\omega t + \phi) \\
-z = C_z + R \cdot \sin(\omega t + \phi) \\
-y = C_y + h_0 + A \cdot \sin(\omega_v t + \phi_v)
-\]
-unde \((C_x, C_y, C_z)\) reprezintă poziția camerei, \(R\) este raza orbitală, și \(A\) este amplitudinea oscilației verticale.
 ===== Iluminare =====
@@ Line 211: / Line 222: @@
   * Va avea intensitate variată pentru fiecare licurici
-{{ :egc:teme:2025:egc_2025_t3_point_lights.png?400 |}}
+În GIF-ul următor este ilustrat un exemplu pentru iluminarea punctiformă produsă de lucurici:
+{{ :egc:teme:2025:egc_2025_t3_fireflies.gif?400 |}}
 <note important>
@@ Line 219: / Line 232: @@
 ==== Lumini Spotlight ====
-Spotlight-urile emit lumină într-un con limitat, definit prin poziție, direcție și unghi de cutoff (α). Un fragment este iluminat doar dacă se află în interiorul conului, iar intensitatea luminii scade gradual către margini. Implementarea luminii de tip spotlight se bazează pe cea pe care ați realizat-o în [[egc:laboratoare:08|Laboratorul 08]].
+Spotlight-urile emit lumină într-un con limitat, definit prin poziție, direcție și unghi de cutoff (\(\alpha\)). Un fragment este iluminat doar dacă se află în interiorul conului, iar intensitatea luminii scade gradual către margini. Implementarea luminii de tip spotlight se bazează pe cea pe care ați realizat-o în [[egc:laboratoare:08|Laboratorul 08]].
 ==== Light Cookies (Gobo Lights) ====
@@ Line 241: / Line 254: @@
 În figura următoare puteți observa o diagramă ce prezintă notațiile necesare pentru a calcula proiecția texturii de tip light cookie. Reveniți la diagramă când este necesar pentru a face corespondența cu derivarea matematică prezentată în subsecțiunile ce urmează.
-<note important>
+{{ :egc:teme:2025:egc_2025_t3_light_cookie_spot_2.png?400 |}}
+<note important>
 Calculele prezentate în continuare trebuie realizate toate în Fragment Shader! Ordinea de implementare pentru luminile spotlight este:
   * Implementare iluminare spotlight "clasică" (calcul bazat pe ''cut_off'', ''spot_light'', ''spot_light_limit'', ''light_att_factor'' pentru a obține contribuția difuză și speculară a luminii - //contribuția de bază//)
   * Implementare efect light cookie
   * Modularea //contribuției de bază// cu rezultatul efectului de light cookie
 </note>
-{{ :egc:teme:2025:egc_2025_t3_light_cookie_spot_2.png?400 |}}
 Considerăm:
@@ Line 350: / Line 361: @@
 === Maparea către coordonate de textură ===
-Coordonatele normalizate \(\vec{n}\) sunt în domeniul \([-1, 1]\). Texturile sunt adresate în domeniul \([0, 1]\), deci facem o mapare liniară:
+Coordonatele normalizate \(\vec{n}\) sunt în domeniul \([-1, 1]\). Texturile sunt adresate în domeniul \([0, 1]\), așadar facem o mapare liniară:
 \[
@@ Line 363: / Line 374: @@
 \[
-\vec{c} = (c_r, c_g, c_b)
+\vec{c} = (c_R, c_G, c_B)
 \]
@@ Line 372: / Line 383: @@
 </code>
+==== Integrare în scenă ====
-==== Controlul spotlight-ului ====
+În scenă ar trebui să existe două lumini de tip spotlight, orientate înspre sol, atașate turnului de observație - pentru fiecare lumină "sursa" va fi înfățișată sub forma unui model de con (vedeți conurile colorate cu negru în imaginea de mai jos, precum și un exemplu de rezultat pentru lumina de tip spot + light cookies):
-Spotlight-ul va putea fi controlat prin taste pentru a-i modifica poziția. Astfel, utilizatorul va putea:
+{{ :egc:teme:2025:egc_2025_t3_spotlight_example.png?400 |}}
-  * Muta spotlight-ul pe axele X, Y, Z folosind taste dedicate
-  * Schimba textura light cookie folosind o tastă
 ===== Barem [150p] =====
-  * **Construcția copacilor [25p]**
+  * **Construcția scenei virtuale [65p]**
-    * Asamblarea componentelor (trunchi + straturi frunziș) [10p]
+    * **Copacii [25p]**
-    * Deformarea frunzișului în Vertex Shader (efect vânt) [10p]
+      * Asamblarea componentelor (trunchi + straturi frunziș) [7.5p]
-    * Texturarea copacilor [5p]
+      * Deformarea frunzișului în Vertex Shader (efect vânt) [10p]
-  * **Construcția terenului [15p]**
+      * Texturarea copacilor [5p]
-    * Desenarea terenului (plan) [5p]
+      * Plasarea a minim 5 copaci în scenă [2.5p]
-    * Texturarea cu repetare [10p]
+    * **Terenul [10p]**
+      * Desenarea terenului (plan) [2.5p]
+      * Textuarea cu repetare [7.5p]
+    * **Turnul de observație [15p]**
+      * Asamblarea componentelor [10p]
+      * Texturarea componentelor [5p]
+    * **Licuricii [15p]**
+      * Desenarea licuricilor cu un shader emisiv [5p]
+      * Logica de mișcare a licuricilor (orbitare cu oscilație) [10p]
   * **Efectul de ceață [15p]**
-    * Implementarea fog-ului liniar în Fragment Shader [15p]
+    * Implementarea efectului de ceață pentru toate obiectele scenei în Fragment Shader [15p]
-  * **Licuricii [35p]**
+  * **Iluminarea [70p]**
-    * Randarea licuricilor cu shader emisiv [10p]
+    * **Lumini punctiforme (pentru licurici) [30p]**
-    * Mișcarea orbitală în jurul camerei [15p]
+      * Câte o lumină de culoare aleatorie pentru fiecare licurici [20p]
-    * Oscilația verticală sinusoidală [10p]
-  * **Iluminarea [60p]**
-    * Lumini punctiforme pentru licurici [20p]
-      * Câte o lumină de culoare aleatorie pentru fiecare licurici [10p]
       * Deplasarea luminii odată cu licuriciul [10p]
-    * Spotlight cu light cookie [40p]
+    * **Lumini spotlight [40p]**
-      * Implementarea spotlight-ului [15p]
+      * Implementarea a minim 2 lumini tip spotlight [10p]
-      * Proiecția texturii light cookie (GOBO) [25p]
+      * Proiecția a cel puțin unei texturi folosind light cookies [30p]
 ===== Exemple de Funcționalități Bonus =====
-  * Rotația continuă a spotlight-ului (similar unui far)
+  * Rotația continuă a spotlight-ului în jurul turnului (similar unui far)
-  * Mai multe spotlight-uri cu light cookie-uri diferite
+  * Mai multe spotlight-uri cu light cookie-uri diferite pentru fiecare
-  * Efectul de pulsație vizibilă și pe intensitatea luminii punctiforme asociate licuriciului
+  * Efect de pulsație a intensității emisive și a luminii punctiforme pentru fiecare licurici
-  * Generarea procedurală a poziției copacilor
+  * Efect Fresnel pentru licurici (strălucire accentuată la margini)
-  * Efect de parallax pentru texturile de teren
+  * Generarea aleatoare a poziției și dimensiunii copacilor la fiecare rulare
-  * Implementarea mai multor tipuri de ceață (exponențială, exponențială pătrată)
+  * Animație pentru light cookie (rotire, scalare sau tranziție între texturi)
-  * Animație pentru light cookie (schimbare continuă a texturii proiectate)
+  * Implementarea a unui model de ceață mai avansat (cu atenuare exponențială)
+  * Variere aleatoare a culorii licuricilor (nuanțe diferite de galben-verde)
 ===== Întrebări și răspunsuri =====
@@ Line 438: / Line 453: @@
   * Î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>
-</hidden>

Info curs

Elemente de Grafică pe Calculator

Cataloage EGC

Notele vor fi vizibile pe Moodle individual

Laboratoare

Setup framework

Teme

Resurse

egc/teme/2025/03.1765707189.txt.gz · Last modified: 2025/12/14 12:13 by andrei.lapusteanu

Show page Old revisions

Media Manager Back to top