Informatique graphique

UFAR Master INFO

Informatique Graphique

David Vanderhaeghe

# Introduction générale 
  - Outils fondamentaux pour la synthèse d'images. 
  - Représentation informatique d'une image, Espaces de couleur.
  - Espaces vectoriels, coordonnées homogènes, matrices de transformation et projection

---

# Rendu 
  - Spécification et problématique du rendu. 
    - Équation du rendu. 
    - Représentation d'une scène 3D.
    - Algorithme de rendu dans l'espace image : discrétisation.
    - Discrétisation et interpolation linéaire. 
    - Algorithme du z-buffer. 
  - Pipeline graphique et programmation de shaders. 
  - Modélisation de la réflectance par microfacette. 
  - Fonction de texture discrète et procédurale.  
  - Éclairage et ombrage dans l'espace image. 
    - Textures d'ombre. 
    - Textures d'environnement. 
    - Réflexion planes
    
---

# Géométrie
  - Propriétés des objet 3D.  
    - Géométrie et forme.
    - Topologie et genre. 
    - Continuité et variation
  - De la surface théorique au pixel. 
    - Représentations discrètes (points/maillages). 
    - Représentations continues (explicite/implicite). 
    - Mailler une représentation continue
  - Surfaces paramétriques. 
    - Courbes B-Spline. 
    - Produit tensoriel. 
    - Interpolation/approximation (Lagrange, B-spline, moindres carrés)

Introduction

L'Informatique Graphique

... mathématiques - physique - informatique - biologie - chimie ...

... réseau – informatique graphique – logique ...

... simulation – synthèse d'images – modélisation géométrique - animation ...

Concepts fondamentaux

Image et animation

Concepts fondamentaux

Espace de couleur, perception de la couleur

# Perception de la couleur

- Interaction entre lumière, objet et l'oeil
    - Prends en compte l'environnement
        - La couleur (perçue) d'un objet dépend de la lumière qui l'éclaire
- __La lumière__ est un spectre d'onde electro-magnétique
    - __Le spectre électromagnétique__ est la description de l'ensemble des rayonnements électromagnétiques classés par fréquence ou longueur d'onde.
- __La longueur d'onde__ modifie la perception humaine d'une onde électromagnétique.

![](/CG/assets/img/spectre-couleurs-visible-humain.jpg)
![](/CG/assets/img/spectre-lumiere-prisme.jpg)

---

# Lumière visible

- Spectre visible : entre 400 et 700 nanomètres ($1nm = 10^{-9}m$). 
   - Rouge : 620-700 nm
   - Orange :	592-620 nm
   - Jaune : 578-592 nm
   - Vert : 500-578 nm
   - Bleu : 446-500 nm
   - Violet : 400-446 nm
-  La notion de couleur dépend du spectre réfléchi par les objets.
  -  Deux spectres différents peuvent être perçus comme la même couleur (métamère ou homochromes)

---
<div class="box-container">
<div class="box">
<div class="row header">

# Anatomie de l'œil pour la vision

</div>
<div class="row content">
<div class="col-container">

> informations lumineuses → récepteurs → signaux électriques → nerf optique

</div>
</div>
<div class="row content">
<div class="col-container">

- Rétine
- Fovéa
- Papille (nerf optique)
- Les récepteurs
  - trois types de cônes servant à décomposer la lumière en couleurs
  - bâtonnets limités à la lumière, plus rapides et plus sensibles que les cônes.
    > 7 millions de cônes, 120 millions de bâtonnets, 300 000 couleurs plus sensible aux verts et rouges

</div>
<div class="col-1">
<img class="fit" src="/CG/assets/img/eye.jpg">
</div>
</div>
</div>
</div>
</div>
</div>

https://fr.wikipedia.org/wiki/C%C3%B4ne_(photor%C3%A9cepteur)
https://fr.wikipedia.org/wiki/Vision_des_couleurs

---

# Éléments de compréhension de la vision.

- La vision diurne humaine est trichromatique.
- La vision nocturne ne distingue pas les couleurs.
- Les trois types de cônes ne correspondent pas à des couleurs particulières.
  - Désignés selon la longueur d'onde du maximum de leur sensibilité spectrale : court (S, pour short), moyen (M), et long (L).
  
![](/CG/assets/img/Cone-fundamentals-with-srgb-spectrum.svg)

---

# Éléments de compréhension de la vision.

- La présence de récepteurs dont la sensibilité spectrale recouvre les mêmes régions du spectre, mais dont les maxima ne coïncident pas, ne suffit pas à constituer la vision des couleurs. 
- Il faut un réseau neuronal capable de comparer les influx nerveux qu'ils produisent.
- La concordance entre les réponses des cônes M et L produit la sensation de clarté ; leur différence établit un axe rouge-vert, tandis que la différence entre l'ensemble M et L avec les cônes S établit un axe jaune-bleu.

Ces deux axes différentiels constituent la différence entre une vision achromatique et la vision des couleurs. Les oppositions qu'ils créent n'appartiennent pas au domaine physique ; dans le cadre de la physique, il n'y a aucune raison d'opposer les rayonnements où dominent une longueur d'onde de 470 nm à ceux où dominent une longueur d'onde de 573 nm. 
La notion humaine de couleur inclut ces oppositions.

</div>

---

# Éléments de compréhension de la vision.

![](/CG/assets/img/Diagram_of_the_opponent_process.png)
![](/CG/assets/img/Modern_Color_Vision_Model.svg)

---

# Espace de couleur

- Les couleurs sont perçues à partir de l'exitation des trois types de cones.
- On peut donc percevoir une couleur à partir de trois exitations.
- Trois longueurs d'onde sont suffisante pour capturer une couleur.

- Différents espaces de couleurs
    - RGB : _Red Blue Green_ / Rouge Vert Bleu
    - sRGB : version standardisée de rgb pour le stockage et la manipulation des couleurs. Transformation vers rgb en fonction de l'écran utilisé 
    - CIELAB : Respect la perception humaine
    - HSV : _Hue Saturation Value_ 
    - CMYK : _Cian Magenta Yellow blacK_

__Le gamut__ est le sous-ensemble de couleurs qu'un certain matériel peut représenter.

---

# Grandeurs photométriques

- 4 grandeurs fondamentales :
    - l'intensité lumineuse (candela), qui est une des 7 unités du système international mais qui est peu utilisée seule dans l'éclairage à part pour des luminaires très directifs (voir plutôt la luminance ci-dessous qui reprend cette grandeur)
    - le flux lumineux (lumen), qui est notamment utilisé pour exprimer le flux total émis par une source lumineuse
    - l'éclairement (lux), qui est notamment utilisé pour exprimer la quantité de lumière souhaitée sur une surface dans une pièce
    - la luminance (candela/m²), qui porte la notion d'éblouissement et qui est la seule de ces quatre notions directement appréciable par l'être humain

Concepts fondamentaux

Transformation affine et changement de base

# Points, vecteurs, repères
On considère un espace à $n$ dimensions scalaires : $\mathbb{R}^n$

- Repère (ou base) : une origine et $n$ axes
- Point : un tuple $(x, y, z) \in \mathbb{R}^3$, distance par rapport à l'origine, suivant les axes
- Vecteur : une direction, un sens, une longueur, défini un déplacement dans l'espace, représenté aussi par un tuple $(x, y, z) \in \mathbb{R}^3$

---

# Opérations

- Produit scalaire (_dot product_)
- Produit vectoriel (_cross product_)
- Combinaison linéaire sur les points : $r = \sum_i w_i p_i$
  - Si $\sum_i w_i = 1$, $r$ est un point
  - Si $\sum_i w_i = 0$, $r$ est un vecteur
  - non défini sinon
- Sur les vecteurs $v = \sum_i w_i v_i$
  - $v$ est un vecteur

---

# Transformations linéaires

- Représentée par une matrice
- Rotation
- Mise à l'échelle
- Cisallement

---

# Transformations affines

- Ajout de la translation

Utilisation des coordonnées homogènes pour représenter les translation (et les projections) par des matrices.

</div>

---

# Changement de repère

- Soit deux repères $B_1 = {O_1, (x_1, y_1, z_1)}$ et $B_2 = {O_2, (x_2, y_2, z_2)}$
- Soit $p_1 = (px_1, py_1, pz_1)$ un point exprimé dans $B_1$

Spécification et problématique du rendu.

Équation du rendu

Description d'une scène 3D

Pour calculer une image représentant un monde 3D, il faut les données qui décrivent ce monde. Il s'agit des données permettant de représenter l'apparence des surfaces du monde. Généralement donc :

Les modèles 3D sont représentés par des maillages polygonaux
Ces polygones sont souvent des triangles ou des quadrilatères
En stockant les coordonnées (x,y,z) des sommets des polygones, ils permettent de représenter la forme des objets 3D composant le monde virtuel dans l'environnement numérique

Description d'une scène 3D

Représenter la forme ne suffit pas pour définir un monde virtuel numérique satisfaisant

Il faut aussi représenter et stocker tous les matériaux
Il faut aussi représenter tous les éclairages
Il faut aussi représenter tout les milieux participant, fluides, etc (feu, brouillard, nuages, rivière, etc)

Pipeline de rendu temps réel

# GPU Buffer objects

- permet d'envoyer des buffers au gpu
- de spécifier l'agencement
- et de dire au gpu comment utiliser le buffer

```{.cpp}
float vertices[] = {
    -0.5f, -0.5f, 0.0f,
     0.5f, -0.5f, 0.0f,
     0.0f,  0.5f, 0.0f
};

unsigned int VBO;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
```
ou avec globjects
```{.cpp}
globjects::Buffer* VBO = globjects::Buffer::create();
VBO->setData( sizeof(vertices), vertices, GL_DYNAMIC_DRAW );
```

---
# Premier shader

- vertex shader

```{.glsl}
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}
```

- fragment shader

```{.glsl}

out vec4 FragColor;

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
} 
```
---

# Compilation de shader
```{.cpp}
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);
```

---
# Shader program

```{.cpp}
unsigned int shaderProgram;
shaderProgram = glCreateProgram();

glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

glUseProgram(shaderProgram);
```

Une fois l'utilisation terminée
```{.cpp}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
glDeleteProgram(shaderProgram);
``` 
---

# Premier dessin
On définit les données d'entrées du vertex shader.
```{.cpp}
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
```

Ici 0 correspond à la donnée d'entrée du vertex shader aPos
```{.glsl}
layout (location = 0) in vec3 aPos;
```

---

# Recap

```{.cpp}
// 0. copy our vertices array in a buffer for OpenGL to use
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 1. then set the vertex attributes pointers
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);  
// 2. use our shader program when we want to render an object
glUseProgram(shaderProgram);
// 3. now draw the object 
someOpenGLFunctionThatDrawsOurTriangle();
```

---
# VAO

```{.cpp}
unsigned int VAO;
glGenVertexArrays(1, &VAO);

// ..:: Initialization code (done once (unless your object frequently changes)) :: ..
// 1. bind Vertex Array Object
glBindVertexArray(VAO);
// 2. copy our vertices array in a buffer for OpenGL to use
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. then set our vertex attributes pointers
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

// [...]

// ..:: Drawing code (in render loop) :: ..
// 4. draw the object
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
someOpenGLFunctionThatDrawsOurTriangle(); 
```

---

# Draw call
```{.cpp}
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);
```

---

# Buffer d'indices

```{.cpp}
unsigned int VAO;
glGenVertexArrays(1, &VAO);
```

---

# Recap

</div>
<div class="row content">
<img src="/CG/assets/img/vao-binding.svg">
</div>
</div>
</div>

Informatique graphique

UFAR Master INFO