Tema 2 - Bokeh Blur

• Responsabili: Mihnea-Petruț-Ilie Mitrache, Andrei-Daniel Voicu, Maria Anca Baluțoiu
• Lansare: 14.12.2025
• Termen de predare: 18.01.2026
• Regulament: https://ocw.cs.pub.ro/courses/pgapi/regulament_general
• Notă: Orice informație ce nu a fost acoperită în acest document este la latitudinea voastră!

Scopul acestei teme va fi implementarea unui efect de blur de profunzime (Depth of Field / Bokeh Blur) aplicat unei imagini 2D (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.

Efectul urmărit este inspirat din tehnicile folosite în motoare grafice moderne (de exemplu, Frostbite), unde zonele din afara planului de focus sunt estompate folosind kernel-uri de blur gaussian (sau combinații de mai multe gaussiene), pentru a simula comportamentul unei lentile reale.

În cadrul temei trebuie:

• Să implementați un blur gaussian separabil (orizontal + vertical);
• Să controlați dinamic raza de blur în funcție de distanța față de un punct de focus;
• Să realizați o interfață grafică interactivă în care utilizatorul poate muta punctul de focus cu mouse-ul și poate modifica raza de focus de la tastatură;
• Să evidențiați vizual zona de focus (de exemplu prin desenarea unor cercuri concentrice în jurul cursorului).

Efectul final trebuie să arate ca un blur radial: zona din jurul cursorului este clară, iar blurul crește progresiv odată cu distanța față de aceasta.

În cadrul temei, puteți alege dacă doriți să implementați pe CPU sau pe GPU (considerat bonus). În cazul implementării pe GPU, pentru a obține efectul dorit se vor folosi două treceri (2 pass-uri) de procesare pe GPU, pe un quad randat pe tot ecranul, astfel:

1. Primul pass: blur gaussian orizontal și salvarea valorii de blur;
2. Al doilea pass: blur gaussian vertical și compunerea rezultatului final.

În plus, se va folosi un shader simplu pentru afișarea texturii procesate și pentru desenarea zonelor de focus (cercurile concentrice).

Pașii principali ai algoritmului sunt următorii:

1. Se încărcă imaginea inițială (ca textură în cazul implementării pe GPU).
2. 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 determină „cantitatea de blur” (blurAmount) pe baza acestei distanțe;
   • Se aplică un blur gaussian orizontal, cu o rază care depinde de blurAmount;
   • Se procesează 2 imagini (în cazul implementării pe GPU, se scrie în două texturi):
     • textura 0: rezultatul blurului orizontal;
     • textura 1: culoarea originală + blurAmount stocat în canalul alfa (normalizat).
3. A doua etapă de procesare (al doilea pass în cazul implementării pe GPU):
   • Se citește blurAmount din canalul alfa al imaginii (texturii) cu culoarea originală;
   • Se utilizeazăblurAmount pentru a recalcula dimensiunea măștii de filtrare;
   • Se aplică un blur gaussian vertical peste rezultatul orizontal;
   • Se scrie rezultatul final într-o imagine (textură) de output.
4. Afișare:
   • Se afișează fie imaginea originală, fie un rezultat intermediar, fie imaginea procesată;
   • Se desenează cercuri concentrice în jurul punctului de focus, pentru a marca vizual zona clară a imaginii.

În cadrul pasului II veți obține imaginea finală.

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ă.

Punctul de focus este dat de poziția cursorului (mousePos) în coordonate ecran. Pentru un pixel cu poziția $(x, y)$, convertită în coordonate ecran, se calculează distanța:

$$ dist = \left\| (x, y) - mousePos \right\| $$

Se definește un parametru focusRadius:

• Pentru $dist < focusRadius$: pixelul este considerat în focus $\Rightarrow blurAmount = 0$.
• Pentru $dist \ge focusRadius$: blurAmount crește odată cu distanța.

Un model simplu pentru calculul blurAmount ar putea fi:

$$ normalizedDist = \frac{dist - focusRadius}{focusRadius \cdot 2.0} $$

$$ blurAmount = clamp(normalizedDist, 0.0, 1.0) $$

Raza efectivă a blurului este:

$$ dynamicBlurRadius = int(MAX\_BLUR\_RADIUS \cdot blurAmount) $$

unde MAX_BLUR_RADIUS este o constantă (de exemplu, 40).

Pentru blur se folosește un filtru gaussian separabil (ca aici):

• 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).

Aceasta reduce complexitatea de la $O(N^2)$ la $O(2N)$ pentru un kernel de dimensiune $N$.

Exemplu de kernel gaussian 1D:

$$ G(x) = \frac{exp\left(-0.5 \cdot \frac{x^2}{\sigma^2}\right)}{\sqrt{2\pi} \cdot \sigma} $$

Raza blurului și $\sigma$ se pot raporta la blurAmount:

• $\sigma = k \cdot MAX\_BLUR\_RADIUS \cdot blurAmount$
• $dynamicBlurRadius \approx MAX\_BLUR\_RADIUS \cdot blurAmount$

Î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ă:

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:

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:

Pentru a obține un efect de bokeh / blur radial:

• cantitatea de blur depinde strict de distanța față de punctul de focus;
• zonele apropiate de focus rămân clare;
• zonele îndepărtate sunt estompate din ce în ce mai mult.

Poziția mouse-ului definește centrul zonei de focus, iar raza zonei de focus poate fi modificată de la tastatură. La apăsarea unui buton al mouse-ului se calculează imaginea blurată în funcție de poziția mouse-ului.

Pentru a vizualiza mai ușor zona de focus, se desenează cercuri concentrice în jurul mouse-ului, în shaderul de afișare:

• Se consideră pixelul curent în coordonate ecran;
• Se testează dacă pixelul se află la o distanță „aproape egală” cu o rază dată (ex: $r$, $r/2$, $r/4$);
• Dacă testul este adevărat, acel pixel este colorat alb (sau altă culoare), obținându-se cercuri de ghidaj.

Aplicația trebuie să permită vizualizarea rezultatelor în mai multe moduri, folosind tastatura:

• Tasta 0 – Vizualizare imagine originală;
• Tasta 1 – Vizualizare rezultat după primul pass (blur gaussian orizontal + stocarea blurAmount);
• Tasta 2 – Vizualizare rezultat final după al doilea pass (blur gaussian vertical);
• Tasta 3 – Vizualizare rezultat final;
• Tasta 4 – Vizualizare rezultat final + desenarea zonelor de focus (cercuri concentrice).

În plus:

• Tasta + – creșterea razei de focus (focusRadius);
• Tasta - – scăderea razei de focus (focusRadius);
• Click stânga – declanșarea procesării blurului.

• Implementare blur gaussian separabil (50p)
  • Orizontal (25p)
  • Vertical (25p)
• Calcul dinamic al cantității de blur în funcție de distanța față de punctul de focus (40p)
• Integrare completă a celor două pass-uri și afișarea corectă a rezultatului final (40p)
• Interfață grafică interactivă (30p)
  • Mutarea punctului de focus cu mouse-ul (10p)
  • Modificarea razei de focus din tastatură (10p)
  • Comutare între imagine originală / imagine blurată / rezultate intermediare (10p)
• Vizualizarea zonei de focus prin cercuri concentrice (sau alt overlay clar) (40p)

• Implementare pe GPU (25p)
• Utilizarea unei combinații de mai multe gaussiene pentru kernel pentru un efect de bokeh mai realist (10-20p)
• Optimizări suplimentare inspirate din tehnici de tip Circular Separable Convolution Depth of Field (10-20p)
  • Kernel-uri circulare;
  • Optimizări de sampling;
  • Păstrarea unor detalii speciale în zonele foarte blurate.
• Interfață îmbunătățită (de exemplu: afișarea numerică a focusRadius, moduri de vizualizare suplimentare) (10p)

Este indicat să folosiți framework-ul laboratorului și Visual Studio.

Pentru implementarea temei, în folderul src/lab_m2 puteți crea un nou folder, de exemplu Tema2Bokeh, cu fișierele Tema2Bokeh.cpp și Tema2Bokeh.h (pentru implementare POO, este indicat să aveți și alte fișiere).

Pentru a vedea fișierele nou create în Visual Studio în Solution Explorer:

• click dreapta pe filtrul lab_m2 și selectați Add → New Filter;
• creați un nou filtru, de exemplu Tema2Bokeh;
• click dreapta pe noul filtru și selectați Add → Existing Item;
• adăugați toate fișierele din folderul nou creat.

În fișierul lab_list.h trebuie adăugată și calea către header-ul temei, de exemplu:

• #include “lab_m2/Tema2Bokeh/Tema2Bokeh.h”