Differences
This shows you the differences between two versions of the page.
|
pgapi:teme:2025:02 [2025/12/11 09:12] maria_anca.balutoiu [Bonusuri posibile] |
pgapi:teme:2025:02 [2025/12/13 22:17] (current) mihnea.mitrache [Arhitectura generală] |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| * **Responsabili:** Mihnea-Petruț-Ilie Mitrache, Andrei-Daniel Voicu, Maria Anca Baluțoiu | * **Responsabili:** Mihnea-Petruț-Ilie Mitrache, Andrei-Daniel Voicu, Maria Anca Baluțoiu | ||
| - | * **Lansare:** 12.12.2025 | + | * **Lansare:** 14.12.2025 |
| * **Termen de predare:** 18.01.2026 | * **Termen de predare:** 18.01.2026 | ||
| * **Regulament:** https://ocw.cs.pub.ro/courses/pgapi/regulament_general | * **Regulament:** https://ocw.cs.pub.ro/courses/pgapi/regulament_general | ||
| Line 9: | Line 9: | ||
| ===== Descriere generală ===== | ===== Descriere generală ===== | ||
| - | Scopul acestei teme va fi implementarea unui efect de blur de profunzime (''Depth of Field / Bokeh Blur'') aplicat unei imagini 2D, în care zona de focus va fi controlabilă interactiv de către utilizator. | + | Scopul acestei teme va fi implementarea unui efect de blur de profunzime (''Depth of Field / Bokeh Blur'') aplicat unei imagini 2D ([[https://www.ea.com/frostbite/news/circular-separable-convolution-depth-of-field|similar cu cel propus de cei de la Electronic Arts]]), în care zona de focus va fi controlabilă interactiv de către utilizator. |
| 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. | ||
| Line 40: | Line 40: | ||
| Pașii principali ai algoritmului sunt următorii: | Pașii principali ai algoritmului sunt următorii: | ||
| - | - Se încărcă imaginea inițială ca textură. | + | - Se încărcă imaginea inițială (ca textură în cazul implementării pe GPU). |
| - | - Primul pass: | + | - Prima etapă de procesare (primul pass în cazul implementării pe GPU): |
| * Se calculează, pentru fiecare pixel, distanța până la punctul de focus; | * Se calculează, pentru fiecare pixel, distanța până la punctul de focus; | ||
| * Se determină „cantitatea de blur” (''blurAmount'') pe baza acestei distanțe; | * Se determină „cantitatea de blur” (''blurAmount'') pe baza acestei distanțe; | ||
| * Se aplică un blur gaussian orizontal, cu o rază care depinde de ''blurAmount''; | * Se aplică un blur gaussian orizontal, cu o rază care depinde de ''blurAmount''; | ||
| - | * Se scrie în două texturi: | + | * Se procesează 2 imagini (în cazul implementării pe GPU, se scrie în două texturi): |
| * **textura 0**: rezultatul blurului orizontal; | * **textura 0**: rezultatul blurului orizontal; | ||
| * **textura 1**: culoarea originală + ''blurAmount'' stocat în canalul alfa (normalizat). | * **textura 1**: culoarea originală + ''blurAmount'' stocat în canalul alfa (normalizat). | ||
| - | - Al doilea pass: | + | - A doua etapă de procesare (al doilea pass în cazul implementării pe GPU): |
| - | * Se citește ''blurAmount'' din canalul alfa al texturii cu culoarea originală; | + | * Se citește ''blurAmount'' din canalul alfa al imaginii (texturii) cu culoarea originală; |
| - | * Se utilizează''blurAmount'' pentru a recalcula dimensiunea măștii de filtrare pentru fragment; | + | * Se utilizează''blurAmount'' pentru a recalcula dimensiunea măștii de filtrare; |
| * Se aplică un blur gaussian vertical peste rezultatul orizontal; | * Se aplică un blur gaussian vertical peste rezultatul orizontal; | ||
| - | * Se scrie rezultatul final într-o textură de output. | + | * Se scrie rezultatul final într-o imagine (textură) de output. |
| - Afișare: | - Afișare: | ||
| * Se afișează fie imaginea originală, fie un rezultat intermediar, fie imaginea procesată; | * Se afișează fie imaginea originală, fie un rezultat intermediar, fie imaginea procesată; | ||
| Line 60: | Line 60: | ||
| {{ :pgapi:teme:2025:pas_i.png?500 |}} | {{ :pgapi:teme:2025:pas_i.png?500 |}} | ||
| + | În cadrul pasului II veți obține imaginea finală. | ||
| - | {{ :pgapi:teme:2025:pas_ii_.png?500 |}} | + | <note tip>Aveți deja toate elementele necesare calculate la pasul I.</note> |
| + | |||
| + | Trebuie să aplicați filtrul de blur pereche față de cel folosit la pasul I. Spre exemplu se aplică blur vertical în situația în care s-a început cu cel orizontal. | ||
| + | |||
| + | Sursa este imaginea de la pasul anterior, iar intensitatea de blur a fost deja calculată și trebuie doar accesată. | ||
| + | |||
| + | {{ :pgapi:teme:2025:pas_ii.png?500 |}} | ||
| <note tip>Puteți începe cu oricare dintre cele două tipuri de blur. Varianta de mai sus pornește cu filtrul de blur orizontal.</note> | <note tip>Puteți începe cu oricare dintre cele două tipuri de blur. Varianta de mai sus pornește cu filtrul de blur orizontal.</note> | ||
| Line 97: | Line 104: | ||
| ===== Filtru de netezire separabil (blur gaussian) ===== | ===== Filtru de netezire separabil (blur gaussian) ===== | ||
| - | Pentru blur se folosește un filtru gaussian **separabil**: | + | Pentru blur se folosește un filtru gaussian **separabil** ([[https://en.m.wikipedia.org/wiki/Separable_filter|ca aici]]): |
| * mai întâi (în cazul implementării pe GPU, în primul pass), se aplică doar pe orizontală (axa X); | * mai întâi (în cazul implementării pe GPU, în primul pass), se aplică doar pe orizontală (axa X); | ||
| * apoi (în pass-ul al doilea în cazul implementării pe GPU) se aplică doar pe verticală (axa Y). | * apoi (în pass-ul al doilea în cazul implementării pe GPU) se aplică doar pe verticală (axa Y). | ||
| Line 114: | Line 121: | ||
| În implementare se poate folosi un singur kernel gaussian sau o combinație de mai multe gaussiene cu $\sigma$ diferite și ponderi diferite, pentru un efect de bokeh mai interesant (de exemplu: 3 gaussiene cu $\sigma$ mic, mediu și mare). | În implementare se poate folosi un singur kernel gaussian sau o combinație de mai multe gaussiene cu $\sigma$ diferite și ponderi diferite, pentru un efect de bokeh mai interesant (de exemplu: 3 gaussiene cu $\sigma$ mic, mediu și mare). | ||
| + | |||
| + | |||
| + | Începem cu imaginea originală: | ||
| + | {{ :pgapi:teme:2024:earth.png?600 |}} | ||
| + | |||
| + | Primul pas este efectuarea unei neteziri pe orizontală. Fiecare pixel va fi egal cu media aritmetică a pixelului și a vecinilor pe aceeași linie cu pixelul. | ||
| + | |||
| + | Rezultatul este acesta: | ||
| + | {{ :pgapi:teme:2024:earth_blur_horz.png?600 |}} | ||
| + | |||
| + | Al doilea pas este efectuarea a unei neteziri pe verticală. Fiecare pixel va fi egal cu media aritmetică a pixelului și a vecinilor pe aceeași coloană cu pixelul. | ||
| + | |||
| + | Rezultatul este acesta: | ||
| + | {{ :pgapi:teme:2024:earth_blur_vert.png?600 |}} | ||
| ===== Model de bokeh / blur radial ===== | ===== Model de bokeh / blur radial ===== | ||
| Line 153: | Line 174: | ||
| <note important> | <note important> | ||
| - | * Tema trebuie implementată în **C/C++** pentru partea de aplicație și **GLSL** pentru shadere. | + | * Tema trebuie implementată în limbajul de programare **C/C++**, în situația în care se realizează o rezolvare ce se execută pe unitatea centrală de procesare, CPU, sau într-un limbaj specializat pentru implementarea pe procesorul grafic, precum **GLSL**. |
| * **NU** este permisă utilizarea de biblioteci de procesare de imagine pentru implementarea efectului de blur. Efectul trebuie implementat în shaderele voastre (GLSL). | * **NU** este permisă utilizarea de biblioteci de procesare de imagine pentru implementarea efectului de blur. Efectul trebuie implementat în shaderele voastre (GLSL). | ||
| * Se pot folosi biblioteci pentru: | * Se pot folosi biblioteci pentru: | ||
