# POGL: Second class
# Frame buffer object


Quand on veut faire un rendu de l'offscreen rendering:

Calcul final au dernier moment
- Avantage: ce calcul n'est pas faut pour les points qui ne sont pas visibles

On va faire un rendu par buffer qui n'est pas visible
- un pour la couleur
- un pour la profondeur
- etc
En tout les points du quadrilateres du rendu on a les couleurs, normales, etc. et on peut en deduire les combinaisons pour le calcul effectif de l'illumination
:::warning
Les combinaisons sont calculees une seule fois pour les points visibles sur un quadrilatere
:::
> C'est utilise dans les jeux videos pour economiser du temps
## Off-screen rendering
On a besoin de pouvoir ecrire pour notre premier rendu similutanement la profondeur, couleur, etc. Pour cela on defini plusieurs variables out dans notre shader (Multi-Render target)

# Depth shadow maps
1. Avant de faire le rendu final, pour savoir quels sont les objets visibles, on fait le rendu depuis la source lumineuse 
2. Faire le rendu en tenant compte de parties visibles ou pas depuis la source lumineuse
## Initialise *FBO*

## Rendu depuis la source lumineuse

## Rendu depuis la camera

## Vertex shader

## Fragment shader

## Resultats

On a le z-buffer depuis la source lumineuse

> On s'attendait a un super resultat mais la partie pas a l'ombre a mal rendue
*Pourquoi ?*
Quand on fait le rendu, on discretise la scene: peut-etre que quand on verifie un pixel on est trop a droite ou trop a gauche, donc des pixels sont consideres a l'ombre alors qui ne le sont pas.
### Solution: ajout d'un biais

:::warning
Ce biais n'est pas facile a fixer car depend de notre scene, sa taille, la taille des objets, etc.
:::

> Le lapin profite du soleil avant d'avoir trop chaud
# Second depth shadow map
:::info
Faire le rendu de la scene depuis la lumiere en regardant les faces arrieres des objets

:::
> On inverse le backface culling
:::success
On n'a plus besoin du biais
:::
> Le biais est toutefois plus facile a mettre
## Resultats

> Il n'y a ni anti-aliasing, ni ombres douces
On n'a plus d'artefacts et on a un rendu temps reel qui fonctionne tres bien.
Pour aller plus loin:
- `sampler2DShadow`/`textureProj()`
- soft shadow map
- etc.
# Rendu final
## Frame buffer objects
On a plusieurs images, a t-1, t et t+1 (par exemple)
- Rendu d'une position dans une texture/un render buffer
- Accumulation dans une texutre (Type `float` sinon les valeurs sont *clampees*) 
- Copies dans l'image finale
Nous en train de courir vers le lapin, ca donne : 
> Au lieu de faire un rendu, on en fait 3
## Post processing
On a un quadrilatere affiche dont on peut modifier la texture comme on souhaite.
### Rendu dans une texture
On deforme l'image

> Notre lapin a trouve des champignons, les a mange mais c'etait des champignons hallucinogenes
# OpenGL
## *Object Picking*
:::info
L'idee: on va faire un rendu intermediaire off-screen, on associe a chaque objet un **identificateurs** dans les FBOs
:::
## Le brouillard

:::info
**Objectif**
Modifier la couleur en fonction de la distance
- choisir la fonction
:::


> On retrouve notre lapin perdu dans le brouillard
## Moteur de particules
Systemes a base de particules
- Permet de modeliser des elements difficiles a modeliser avec des solides classiques ou des surfaces
- feu
- fumee
- etc
Fonctionnement
- Caracteristiques
- position
- couleur
- taille
- forme
- ...
- Lois
- creation
- destruction
- Regles (Evolution)
- Modifications des caracteristiques
### Le feu
Utilisation de particules
- Creation
- Plusieurs centaines
- Apparaissent dans une zone precise
- Avec une couleur proche du blanc
- Forme
- Point
- Sphere
- Evolution
- Changement de couleur
- Deplacement vers le haut avec perturbations
- Destruction
- Atteint la couleur noir
Evolution: changement de couleur

Resultat:

Si on est flemmards:
- utilisation d'un billboard
- Affichage d'un feu en 2D
### Etinceles/feu d'artifice/explosion
Resultat:

C'est les memes regles que pour le feu


On fait des bulles qui grossissent de plus en plus

## Billboard
Utilisation d'un Billboard
## Conclusion
Les effets intermediares qu'on peut faire pour le rendu final.