Show page

Differences

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

--- egc:teme:2025:03 [2025/12/13 20:19]
mihnea.mitrache Constructie copaci
+++ egc:teme:2025:03 [2025/12/14 13:55] (current)
andrei.lapusteanu
@@ Line 4: / Line 4: @@
   * **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ă!**
-În cadrul acestei teme veți implementa o scenă virtuală ce reprezintă o pădure nocturnă, populată de licurici ce orbitează în jurul camerei. Se vor studia astfel conceptele de iluminare și texturare. Elementele vizuale principale ce compun scena vor fi un teren texturat, copaci stilizați cu efect de vânt, licurici emitenți de lumină, un turn de observație cu spotlight și efect de ceață.
+<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.
+Elementele vizuale principale ce compun scena vor fi un teren texturat, copaci animați cu un efect de vânt, licurici care emit lumină punctiformă și un turn de observație echipat cu lumini tip spotlight care proiectează un pattern de textură (light cookie). Pentru accentuarea atmosferei veți adăuga și un efect de ceață.
 Puteți studia în următorul videoclip o posibilă implementare a cerințelor.
@@ Line 16: / Line 24: @@
 <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 30: / Line 38: @@
 ==== Poziționarea camerei ====
-Camera va fi de tip perspectivă și trebuie plasată astfel încât să includă în cadru toate elementele de interes din scenă. Este recomandat să permiteți controlul poziției și rotației camerei în timpul execuției aplicației.
+Camera va fi de tip perspectivă și trebuie poziționată astfel încât să fie surprinse în același timp toate elementele de interes din scenă (terenul, copacii, turnul, licuricii). Nu este obligatoriu să controlați poziția/rotația camerei în timpul rulării aplicației, aceasta poate să rămână statică.
 ===== Construcția turnului de observație =====
-Turnul de observație este construite folosind o serie de primitive. Varianta recomandată, care este utilizată și în demo, are următoarele componente:
+Turnul de observație este construit folosind o serie de primitive. Varianta recomandată, care este utilizată și în demo, are următoarele componente:
-  - Bază formată din piloni (4 paralelipipede)
+  - Stâlpi de susținere (4 paralelipede care trec prin platformă și ajung la acoperiș)
-  - Platformă (paraleliped)
+  - Platformă (paralelipiped)
-  - Conectoare pentru acoperiș (4 paralelipipede)
   - Acoperiș (con turtit pe înălțime)
   - Proiectoare pentru lumini (2 conuri)
@@ Line 44: / Line 51: @@
 {{ :egc:teme:2025:watchtowergeom.gif?400 |}}
-<note important>Puteți propune alte variante de geometrie însă simplificări ale acesteia nu vor aduce punctajul total.</note>
+<note important>Puteți propune alte variante de geometrie. Spre exemplu să realizați elemente diferite pentru susținerea bazei
+și a acoperișului. Simplificări ale variantei propuse nu vor aduce punctajul total.</note>
+<note>
+Primitiva de tip con nu se regăsește în framework. Dacă doriți s-o utilizați, aceasta se poate descărca de aici {{:egc:teme:2022:cone.zip|}}
+</note>
 ===== Construcția copacilor =====
-Copacii se aseamănă unor pini cu frunzișul dispun pe mai multe niveluri orizontale. Varianta recomandată, care este utilizată și în demo, are următoarele componente:
+Copacii se aseamănă unor pini. Varianta recomandată, care este utilizată și în demo, are următoarele componente:
   - Trunchi (cilindru)
   - Frunziș (minim 6 paralelipipede)
@@ Line 55: / Line 67: @@
 {{ :egc:teme:2025:treegeom.png?400 |}}
-<note>Trunchiul este scalat pentru a se subția spre vârf, iar straturile de frunziș sunt din ce în ce mai mici pe măsură ce urcăm.</note>
+<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) ====
+=== Trunchi ===
+Trunchiului i se va aplica un efect de subțiere. În funcție de înălțimea vertex-ului, îl veți apropia de axa principală a cilindrului.
+$$
+t = \frac{y}{TREE\_HEIGHT}\\
+scale = 1 - t\\
+x_{final} = x_{original} \cdot scale\\
+z_{final} = z_{original} \cdot scale
+$$
-==== Deformare în Vertex Shader (Efect de vânt) ====
+=== Frunziș ===
-Pentru a simula efectul vântului asupra copacilor, se va aplica o deformare în Vertex Shader. Aceasta presupune deplasarea orizontală a vârfurilor în funcție de înălțimea lor în coordonate obiect.
+Frunzișul se deplasează în bătaia vântului. Aceasta presupune deplasarea orizontală a vârfurilor în funcție de înălțimea lor în coordonate obiect.
-Ideea principală este că vertex-urile de la baza copacului rămân fixe, iar cele de la vârf se deplasează cel mai mult. Deplasarea va fi modulată sinusoidal în funcție de timp pentru a crea o animație continuă de balansare.
+Ideea principală este că vertecșii de la baza copacului se mișcă mai puțin, iar cei de la vârf sunt afectați mai puternic. Deplasarea va fi modulată sinusoidal în funcție de timp pentru a crea o animație continuă de balansare.
 Parametri de luat în considerare:
-  * Poziția verticală normalizată a vertex-ului (0 la bază, 1 la vârf)
+  * Înălțimea normalizată a vârfului (0 la bază, 1 la vârf)
   * Frecvența și faza oscilației (diferite pentru fiecare copac pentru variație vizuală)
   * Amplitudinea maximă a deplasării
-<note>Doar componentele de frunziș vor fi afectate de această deformare, trunchiul rămânând static. </note>
+$$
+t = \frac{y}{TREE\_HEIGHT}\\
+wave = \sin(Time \cdot BendFrequency + t \cdot 0.5 + BendPhase)\\
+offset = wave \cdot BendStrength \cdot t\\
+x_{new} = x_{original} + offset
+$$
+**Amplitudine:**
+Fiecare parte a copacului are asociată propria amplitudine de oscilatie:
+$$
+Trunchi: offset = wave \cdot A_{trunchi} \cdot t = wave \cdot 0.0 \cdot t = 0 \\
+Frunze\_Jos: offset = wave \cdot A_{mic} \cdot t\\
+Frunze\_Mijloc: offset = wave \cdot A_{mediu} \cdot t\\
+Frunze\_Varf: offset = wave \cdot A_{mare} \cdot t
+$$
+Rezultatul final pe care trebuie să îl obțineți este:
+{{ :egc:teme:2025:treeshader.gif?400 |}}
 ==== Texturare ====
@@ Line 76: / Line 125: @@
   * Frunzișul – textură de frunze/vegetație
-===== Texturarea terenului =====
+===== Terenul =====
+Terenul va fi format dintr-un plan. Acesta trebuie scalat suficient astfel încât marginile acestuia să nu fie evidente din perspectiva camerei.
-Pe mesh-ul corespunzător terenului va trebui aplicată o textură care se repetă. Deoarece terenul este scalat semnificativ pentru a acoperi o suprafață mare, simpla aplicare a texturii ar conduce la întinderea acesteia pe întreg planul. Pentru a evita acest efect, coordonatele de texturare pot fi scalate în shader sau mesh-ul poate avea coordonate UV în afara domeniului uzual (0,0) -> (1,1).
+Pe acest plan va trebui aplicată o textură care se repetă. Deoarece terenul va trebui scalat în mod semnificativ, simpla aplicare a texturii ar conduce la întinderea acesteia pe întreg planul. Pentru a evita acest efect, coordonatele de texturare pot fi scalate în shader sau mesh-ul poate avea coordonate UV în afara domeniului uzual (0,0) → (1,1).
 <note tip>
@@ Line 87: / Line 138: @@
 ===== 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ță 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.
+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.
-Pentru implementare, va trebui să:
+=== Calcul densitate ceață ===
-  * Calculați distanța dintre fragment și poziția camerei
-  * Determinați un factor de interpolare bazat pe această distanță și o distanță maximă de vizibilitate
+Fie:
-  * Amestecați culoarea obiectului cu culoarea ceții folosind acest factor
+  * \(\vec{P}\) – poziția fragmentului în spațiul lumii
+  * \(\vec{C}\) – poziția camerei
+  * \(d_{\text{max}}\) – distanța maximă de vizibilitate
+Distanța fragmentului față de cameră se calculează ca:
+\[
+d = \|\vec{P} - \vec{C}\|
+\]
+Factorul de densitate a ceții variază liniar între 0 (fără ceață) și 1 (ceață completă), limitat la intervalul \([0, 1]\):
+\[
+f_{\text{fog}} = \text{clamp}\left(\frac{d}{d_{\text{max}}}, 0, 1\right)
+\]
+=== Combinarea culorilor ===
+Culoarea finală a fragmentului se obține prin interpolarea liniară între culoarea obiectului și culoarea ceții, folosind funcția ''mix'':
+\[
+\vec{C}_{\text{final}} = \text{mix}(\vec{C}_{\text{obiect}}, \vec{C}_{\text{fog}}, f_{\text{fog}})
+\]
+unde \(\vec{C}_{\text{obiect}}\) este culoarea fragmentului calculată **după iluminare și texturare**, iar \(\vec{C}_{\text{fog}}\) este culoarea ceții (de exemplu, gri).
+Puteți observa în GIF-ul de mai jos scena cu și fără efectul de ceată.
+{{ :egc:teme:2025:egc_2025_t3_fog_on_off.gif?400 |}}
+<note tip>
+Pentru un efect realistic, setați culoarea de ștergere a ecranului să fie acceași cu cea a ceții.
+</note>
 ===== Licuricii =====
@@ Line 100: / Line 183: @@
 ==== 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.
+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.
-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:
+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)
+  * **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
@@ Line 123: / Line 201: @@
 \]
-unde \((C_x, C_y, C_z)\) reprezintă poziția camerei, \(R\) este raza orbitală, și \(A\) este amplitudinea oscilației verticale.
+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.gif?400 |}}
 ===== Iluminare =====
@@ Line 144: / Line 226: @@
 </note>
+==== Lumini Spotlight ====
+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) ====
+Light cookies sunt texturi proiectate prin conul de lumină al unui spotlight pentru a crea pattern-uri de umbră și lumină.
+În iluminatul fizic (teatru, cinematografie) există două concepte înrudite:
+  * **[[https://en.wikipedia.org/wiki/Gobo_(lighting)|Gobo]]** (termen provenit din "**go**es **b**efore **o**ptics") – șablon metalic plasat în interiorul sau foarte aproape de sursa de lumină (produce margini clare, pattern-uri precise)
+  * **Cookie** (termen provenit din [[https://en.wikipedia.org/wiki/Cucoloris|cucoloris]]) – panou cu decupaje plasat mai departe de sursă (produce margini difuze, efecte mai naturale)
+În grafica pe calculator, cei doi termeni sunt folosiți interschimbabil – ambii se referă la aplicarea unei texturi (textură alpha sau RGB) asupra unei lumini pentru a modula intensitatea și/sau culoarea acesteia.
+Mai jos puteți observa câteva example de light cookies din diverse aplicații grafice.
+{{ :egc:teme:2025:egc_2025_t3_light_cookie_examples.png?600 |}}
 ==== Proiecția unei texturi de tip light cookie folosind o lumină spotlight ====
@@ Line 152: / Line 251: @@
 {{ :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>
 Considerăm:
@@ Line 251: / Line 357: @@
 === 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 264: / Line 370: @@
 \[
-\vec{c} = (c_r, c_g, c_b)
+\vec{c} = (c_R, c_G, c_B)
 \]
@@ Line 282: / Line 388: @@
 ===== 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 [10p]**
+      * Asamblarea componentelor [5p]
+      * Texturarea componenetelor [5p]
+    * **Licuricii [20p]**
+      * Desenarea licuricilor cu un shader emisiv [10p]
+      * 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) [20p]**
-    * Mișcarea orbitală în jurul camerei [15p]
+      * Câte o lumină de culoare aleatorie pentru fiecare licurici [15p]
-    * Oscilația verticală sinusoidală [10p]
+      * Deplasarea luminii odată cu licuriciul [5p]
-  * **Iluminarea [60p]**
+    * **Lumini spotlight [50p]**
-    * Lumini punctiforme pentru licurici [20p]
+      * Implementarea a minim 2 lumini tip spotlight [10p]
-      * Câte o lumină de culoare aleatorie pentru fiecare licurici [10p]
+      * Proiecția unei texturi folosind light cookies [35p]
-      * Deplasarea luminii odată cu licuriciul [10p]
+      * Modificarea texturii de light cookie si a direcției luminilor pe taste [5p]
-    * Spotlight cu light cookie [40p]
-      * Implementarea spotlight-ului [15p]
-      * Proiecția texturii light cookie (GOBO) [25p]
 ===== 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 =====

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.1765649983.txt.gz · Last modified: 2025/12/13 20:19 by mihnea.mitrache

Show page Old revisions

Media Manager Back to top