Informatique graphique

LFlex INF

Image et Signal (KINXPA51)

David Vanderhaeghe, Loïc Barthe

# Plan du cours

- Modélisation et simulation : source des images numériques
- Concepts fondamentaux
  - Image / représentation discrète d'un signal, animation / séquence d'images 
  - espace de couleur, perception de la couleur 
  - introduction au formats de données standard, avec ou sans pertes 
  - transformation affine et changement de base (translation, mise à l'échelle, rotation, 2D/3D).
- Synthèse d'images simples
  - Base du rendu temps réel (GPU/OpenGL/WebGL).

---

# Compétences

- Expliquer comment les images sont représentées par des pixels.
- Décrire les différences entre les techniques de compression avec pertes et sans perte.
- Décrire les bases d'un pipeline de rendu, en particulier le rendu temps réel (la rasterisation), et la gestion de la visibilité.
- Obtenir des points 2D et 3D en appliquant des transformations affines.
- Implémenter un moteur de rendu temps réel.

---

# Ouvrage de référence

[Computer Graphics: Principles and Practice.](https://cgpp.net/about.xml)

Hughes et al. Addison-Wesley, 2013.

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$

# Base du rendu temps réel

Dire ce que doit dessiner votre GPU sur l'écran.

---

# API de rendu

- OpenGL (GL: Graphic Library)
- DirectX
- Vulkan
- WebGL

---

# Pourquoi WebGL pour ce cours ?

- facilité de prise en main
- portabilité
- potentielle utilisation en stage de L3

---

# Quels langages ?

- Un minimum de web (html/js)
- L'utilisation d'une lib (dans un second temps) THREE.js
- Programmation de shaders GPU glsl (gl shading langage)

---

# Comment dessiner en WebGL

## Les étapes de l'exemple minimal

- obtenir un canvas depuis votre navigateur
- créer le context WebGL
- définir une géométrie
- définir une façon de déssiner
- déclancher le dessin de la géométrie en utilisant la façon de dessiner

## Pipeline webgl

![](/CG/assets/img/webgl-pipeline.webp)

*https://medium.com/trabe/a-brief-introduction-to-webgl-5b584db3d6d6*

---

# Example minimal html

```{.html}
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title> WebGL boiler plate</title>
</head>
<style>
#c { width: 200px; height: 200px; }
</style>
<body>

</body>
</html>

```

L'id du canvas sera utilisé en javascript pour insérer l'espace de dessin web gl

# Spécification de la géométrie

Représenter la surface des objets

- Primitive de base : le triangle
  - Un triangle en 3D est plan
  - Se projette en 2D sur un triangle (éventuellement dégénéré)
- Une surface : un ensemble de triangles
  - Un triangle relie 3 vertices
    - Pas seulement une position
    - Mais aussi d'autres attributs : normale, couleurs ...
  - Un vertex : ensemble unique des attributs

---
<div class="box-container">
<div class="box">
<div class="row header" style="padding-bottom:1em;">

# Exemple : un cube

- 8 positions
- 6 faces carrées
  - 12 faces triangulaires
- Combien de vertices ?

</div>
<div class="row content">
<div class="webgl-container">
<canvas class="webgl" data-scene="cube"></canvas>
</div>
</div>
</div>
</div>

---

# Tableau de vertices et index

- Stock un tableau pour les vertex
- Un second tableau d'indices sert pour former les triangles

Evite de dupliquer les données des vertices qui seraient commun à plusieurs triangles

C'est la manière la plus utilisée pour représenter les surfaces

---

# Les vertices

Description des données sur la surface.

C'est une représentation discrète de la surface, un échantillonage de la surface réel.

Les données de chaque vertex sont interpolés lors de la rasterisation.

Par ex. Une cube peut être l'échantillonage d'une sphère, en fonction des normales utilisées.

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)

# 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

Synthèse d'images simples

Base physique de la synthèse d'images

# Textures

- Cas d'usage typique
  - Décoréler la variation d'attribut de la variation de geometrie
- Permet de coller une fonction sur la geometrie tel un papier peint

---

# Mapping

- Convertie des valeurs d'entrée en valeurs de sorties
- Deux approches classiques :
  - Procédurale : une fonction calcule les valeurs de sorties en fonctions des entrées
  - _Lookup table_ : les valeurs de sortie sont lues à partir d'une liste de valeurs
  
La sortie est souvent un motif, d'où le nom de texture

</div>
<div class="row content">
<div class="webgl-container">
<canvas class="webgl" data-scene="texture1"></canvas>
</div>
</div>
</div>
</div>

---

# Texture image

- En rendu temps réel, representée par une image
  - attachée à un _sampler_
- mapping entre point sur la surface et pixel sur l'image
  - via les coordonnées de texture
    - vec2 sur les vertices
    - on parle de coordonnees uv, uv mapping 
  - nomalisées entre 0 et 1 pour etre indépendant de la resolution de l'image
- que faire quand on sort de [0,1]
  - couleur fixe
  - couleur du bord
  - repetition simple ou mirroir

https://threejs.org/docs/#api/en/textures/Texture

---

# Filtrage

- le _sampler_ lit une valeur, avec antialiasing
- c'est a dire un filtrage
- ce filtrage est réglagle
    - nearest
    - linear

---

# Filtrage

- Interpolation lineaire
- uv vers coordonnees pixel entiere
- la partie apres la virgule defini les poinds d'interpolation
- entre les 4 pixels voisins

ok pour la magnificaton, grossissement (zoom in), 
mais pas pour la minification, rapetissement (zoom out)

---

# mipmap

- quand plusieurs pixels de la texture arrive sur un pixel écran
    - la solution utilisée mip map
- Calculer des versions à differentes résolutions, en avance
  - choisir la bonne resolution en fonction de l'empreinte d'un pixel dans l'espace texture
- Pour cela prendre en compte l'empreinte d'un pixel en espace texture
  - En pratique, le shader calcul un dfdx et dfdy "gratuitement" car c'est utilisé pour la rasteriration
    - Nearest mipmap nearest
    - nearest mipmap linear
    - linear mipmap linear
    
[https://threejs.org/examples/?q=texture#webgl_raycaster_texture](https://threejs.org/examples/?q=texture#webgl_raycaster_texture)
  
---

# Utilisation

- utilisation d'une texture pour moduler la couleur
- mais aussi les autres parametres de matériau
- mais aussi la meso structure
  - normal map 
  - displacement map

https://threejs.org/docs/#api/en/materials/MeshStandardMaterial

```{.js}
const colorTexture = textureLoader.load(
    '/path/to/file/serverside/diffuse.png',
  );
const metalnessTexture = textureLoader.load(
    '/path/to/file/serverside/metalness.png',
  );

const material = new MeshStandardMaterial({
    map: colorTexture,
    metalnessMap: metalnessTexture,
  });
```

---

# Coordonnées de texture

- Calcul uv automatique 
  - par exemple sur une surface parametrique
  - ou par projection sur cube etc ...

- Souvent fait par les graphistes a l'aide d'outil de modelisation 3d
- en definissant de coutures et en depliant

[https://threejs.org/examples/#webgl_tonemapping](https://threejs.org/examples/#webgl_tonemapping)

https://discoverthreejs.com/book/first-steps/textures-intro/

---

# Edition des coordonnées UV

---

# PAS FINI

empreinte pixel en espace image.

Determiner la position du pixel sur le triangle
dessine le quadrilatere en espace image

montrer les differents niveau de mipmap

et schematiser l'interpolation tri lineaire

Informatique graphique

LFlex INF

Image et Signal (KINXPA51)

L'Informatique Graphique

Étapes de la création d'un film d'animation

Sources des images numériques

Concepts fondamentaux

Image et animation

Concepts fondamentaux

Espace de couleur, perception de la couleur

Concepts fondamentaux

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

Concepts fondamentaux

Transformation affine et changement de base

Description d'une scène 3D

Description d'une scène 3D

Synthèse d'images simples

Base physique de la synthèse d'images

L'équation du rendu