Informatique graphique

UFAR Licence INFO

Informatique Graphique

David Vanderhaeghe

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

Sources des images numériques

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

Introduction aux formats de données standard, avec ou sans pertes

# Format d'images

- Représentation d'une fonction $[0,w] \times [0,h] \rightarrow C $
    - w: largeur de l'image 
    - h: hauteur de l'image
    - C: couleur dans un espace

---

## Représentation matricielle

Appelé aussi _bitmap_ ou raster, c'est un tableau 2D de taille fixe.

- Représentation discrète d'un signal
  - Échantillonnage spatial régulier
  - Échantillonnage spectral RGB
  - Représentée comme un tableau 2D de pixels
- Résolution fixe (taille en nombre de pixels)
  - Éventuellement réechantillonnée pour l'affichage
  - Adaptée à la mémoire et aux écrans : tableaux 2D de _pixels_
- Bien pour représenter des variations complexes de couleur

_pixel : picture élément_ une case du tableau qui représente une image.

</span>

![](/CG/assets/img/bitmap.jpg)

---

## Représentation vectoriel

- Forme et remplissage à l'aide de fonctions mathématiques
- Représentée par des formes géométriques 2D
    - Résolution _infinie_
    - Doit être rasterisée pour être affichée
    - Limitée par des fonctions pour le remplissage

![](/CG/assets/img/apple.svg)

---

# Anatomie d'un pixel

- Un pixel : trois canaux (RGB)
- Contrôle l'intensité d'émission sur l'écran
- Intensité entre 0 (pas de lumière) à 1 (émission maximum)
- Codé généralement sur un octet par canal, soit $2^{8*3} = 16777216$ couleurs différentes

### Codage pour le calcul
    
Un octet par canal ok pour le stockage et l'affichage, mais pas pour les calculs

</div>

### Exercice

écrire une structure (en C) pour représenter une image bitmap.

</div>

---

# Introduction au format de donnée standard

- Différent format de fichier pour la sauvegarde d'image.
  - En générale l'espace de couleur utilisé est aussi sauvegardé.
- Les données stockées sont souvent compressées pour occuper moins de place.
  - Cette compression peut être destructive (avec perte de données) comme c'est le cas avec JPEG par exemple.

---

# Format d'image sans perte

- Format d'image stockant l'ensemble de l'information par pixel.
  - non compressé (bmp, ppm)
  - compressé (png, gif, tiff)
- Compression de données classique ou adaptée aux images (travail local, multi-résolution par ex)

---

# Compression avec pertes

- Supprime de l'information pour permettre un gain de place.
- Se base sur la perception pour savoir quoi supprimer.

L'idée est de supprimer les _détails_ pour permettre de coder l'image sur moins d'octets.
La spécification JPEG donne une matrice de quantification avec un paramètre de qualité (0-100%).

</div>

![](/CG/assets/img/compressionJPEG.png)

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$

# Definition d'une scene 3D

- des objets
- des materiaux
- des sources de lumière
- une caméra

---

# Matériau

- bidirectional scattering distribution function (BSDF)
  - représente le ratio de flux lumineux transmis
    - en un point
    - suivant deux directions d'incidences
      - entrée (input) $\omega_i$, sortie (output) $\omega_o$
      - définie dans le repère de la normale $n$
    - par longueur d'onde (e.g en rgb)
- [threejs exemple](https://threejs.org/examples/?q=material#webgl_materials_variations_standard)
</div>

</div>
</div>
</div>
</div>
</div>

---

# Source de lumière

- Directionnelle
  - Une seule direction constante
  - Représente une source “à l’infinie”
- Ponctuelle
  - Un point
  - Une attenuation
- Spot
  - Une direction
  - Une ouverture
- Surfacique
  - Hors programme de ce cours 
- [physical](https://threejs.org/examples/webgl_lights_physical.html)
- [spot](https://threejs.org/examples/webgl_lights_spotlight.html)
- [spots](https://threejs.org/examples/webgl_lights_spotlights.html)

---

# Caméra

- Une position
- Une direction de vue 
- Une direction "haut"
- Une ouvreture
- Un ratio d'aspect
- plan proche (z-near), plan lointain (z-far)

https://threejs.org/examples/#webgl_camera

Informatique graphique

UFAR Licence INFO