Show page

Differences

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

--- egc:teme:2025:03 [2025/12/13 21:37]
andrei.lapusteanu Updated camera text
+++ 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ă!**
+<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. Pentru accentuarea atmosferei veți adăuga și un efect de ceață.
+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 18: / 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 36: / Line 42: @@
 ===== 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ă (paralelipiped)
-  - Conectoare pentru acoperiș (4 paralelipipede)
   - Acoperiș (con turtit pe înălțime)
   - Proiectoare pentru lumini (2 conuri)
@@ Line 46: / 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>
@@ Line 61: / Line 67: @@
 {{ :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 67: / Line 77: @@
 === Trunchi ===
-Trunchiului i se va aplica un efect de subțiere. În funcție de înălțimea fragmentului îl veți apropia de axa principală a cilindrului.
+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}\\
@@ Line 79: / Line 90: @@
 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 se mișcă mai puțin, iar cele de la vârf sunt mai puternic afectate. 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:
@@ Line 95: / Line 106: @@
 **Amplitudine:**
-Fiecare parte a copacului are asociata propria amplitudine de oscilatie:
+Fiecare parte a copacului are asociată propria amplitudine de oscilatie:
 $$
@@ Line 114: / Line 125: @@
   * Frunzișul – textură de frunze/vegetație
-===== Texturarea terenului =====
+===== Terenul =====
-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).
+Terenul va fi format dintr-un plan. Acesta trebuie scalat suficient astfel încât marginile acestuia să nu fie evidente din perspectiva camerei.
+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 125: / 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 138: / 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 161: / 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 182: / 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 190: / 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 289: / 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 302: / Line 370: @@
 \[
-\vec{c} = (c_r, c_g, c_b)
+\vec{c} = (c_R, c_G, c_B)
 \]
@@ Line 320: / 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.1765654644.txt.gz · Last modified: 2025/12/13 21:37 by andrei.lapusteanu

Show page Old revisions

Media Manager Back to top