42
Réalité Virtuelle et Interaction Introduction au Rendu 3D Année 2017 - 2018 / APP5 Info à Polytech Paris-Sud Cédric Fleury ([email protected]) https://www.lri.fr/~cfleury/teaching/app5-info/RVI-2018/

Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Réalité Virtuelle et Interaction Introduction au Rendu 3D

Année 2017 - 2018 / APP5 Info à Polytech Paris-Sud Cédric Fleury ([email protected])

https://www.lri.fr/~cfleury/teaching/app5-info/RVI-2018/

Page 2: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Réalité Virtuelle

• Restitution visuelle des objets de l’environnement virtuel

2

Page 3: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Visualisation d’objets virtuels

• Image = { pixels }

• Rendu = associer à chaque pixel : – Une couleur – Une intensité lumineuse

• L’intensité lumineuse dépend : – Des sources lumineuses – De la position de l’observateur – De la position des objets de la scène

3

Page 4: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Principales étapes du rendu

• Placer les objets dans le repère caméra : – Simplifier les calculs – Axe Z = axe des profondeurs

• Déterminer les objets se trouvant dans le champ de vision de la caméra (pyramide de vue)

• Utiliser des algorithmes pour déterminer les facettes visibles de chaque objet

4

Page 5: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairage – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

5

Page 6: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairage – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

6

Page 7: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Projections

• Afficher des modèles 3D sur une surface 2D • Transformer les coordonnées 3D du modèle

vers les coordonnées 2D des pixels7

Page 8: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Projections

• Rendu de la scène 3D pour un observateur virtuel particulier (camera) – Point de vue (isAt) – Direction de visée (lookAt)

• Projection sur un plan particulier8

Page 9: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Différents types de projections

• Projections parallèles – Pas de rétrécissement des objets éloignés – Plusieurs types de projections parallèles

• Isométrique, cavalière,…

• Projections perspectives – Les objects éloignés sont plus petits – Plusieurs types

• Un, deux ou trois points de fuite

9

Page 10: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Projection parallèle

10

Page 11: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Projection perspective

11

Page 12: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Projection perspective

Différents types de projections

Projection parallèle

12

Page 13: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairage – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

13

Page 14: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Pyramide de vue

14

• Modélise le champs de vision de l’utilisateur • Est constituée de 6 plans

Yc

Oc

Xc

Zc

plan arrière (back plane) (far plane)

plan avant (front plane) (near plane)

plan de projection

Page 15: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Distance focale

15

plan de projection

Distance focale

Page 16: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Distance focale et ouverture

• Distance focale – Défini la pyramide de vue pour un écran donné – Paramètre peu intuitif : nécessite de connaitre la

taille de l’écran

• Ouverture de vue – Paramètre plus simple lorsqu’il n’y a pas de head

tracking (indépendant de la taille de l’écran) – Défini la largueur du champ visuel (field of view) – Différent pour l’horizontal et la verticale

16

Page 17: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Ouverture

17

plan de projection

Angle d’ouverture

vertical FOV

Page 18: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

• Pour le head tracking : déformation de la pyramide de vue – En fonction de la position de l’utilisateur – On définit généralement :

• 4 coins de l’écran et position de l’utilisateur

Pyramide de vue

18

Page 19: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Pyramide de vue et clipping

• Les objets visibles sont ceux qui se trouvent dans la pyramide de vue

• Les objets en partie dans la pyramide de vue sont coupés par un ou plusieurs des 6 plans

• Clipping = trouver les facettes situées dans la pyramide de vue – Exemple : algorithme de Sutherland-Hogman

• Visibilité de chaque facette par un plan infini • Appliquer 6 fois le traitement pour les 6 plans

19

Page 20: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairage – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

20

Page 21: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

• < 0 : on garde la facette • > 0 : on l’élimine

Back Face Culling• Eliminer tous les facettes qui ne sont pas

tournés vers la camera

21

Produit scalaire : direction de visée (lookAt) * normale sortante de la facette

Page 22: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Back Face Culling

• Economise 50% du temps de calcul du rendu – En moyenne

• Faible coût de calcul pour chaque facette – Algorithme rapide

• Etape préliminaire pour les autres algorithmes

22

Page 23: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Elimination des parties cachées• Eliminer les facettes qui se trouvent cachées

derrière d’autres facettes

23

Page 24: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Elimination des parties cachées

• Deux types d’algorithme : – Basé image (chaque pixel de l’image) – Basé objets (chaque objet dans la scène)

• Quelques algorithmes particuliers : – Z-Buffer – Balayage en lignes – Priorités sur les objets – Subdivision du plan de projection de l’image

24

Page 25: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Z-Buffer• Basé image • Mémoire de profondeur

– Utilise un tableau pour stocker les profondeurs de chaque pixel

25

Page 26: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Balayage en lignes• Basé Image • Traitement ligne par ligne dans l’image

– Extension du Z-Buffer – Stocke une table des arrêtes actives

26

Page 27: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Priorités sur les objets• Basé objets • Trier les objets en fonction de leur profondeur

par rapport à la camera • Afficher les objets en fonction de la profondeur

(de l’arrière vers l’avant de la scène) – Exemple : algorithme du peintre

27

Page 28: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Subdivision de l’image

• Basé image

• Subdivision du plan de projection de l’image – Si on ne sait pas afficher simplement une zone

• on subdivise de façon récursive cette zone

– La diminution de la taille des zones entraîne une diminution des recouvrements

• Exemple : algorithme de Warnock

28

Page 29: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Warnock• 4 cas d’arrêt de la

subdivision – Tous les objets sont

disjoints de la zone (d) • Couleur du fond

– Un seul objet sécant ou inscrit dans la zone (b ou c)

• Couleur du fond, puis couleur de l’objet

– Un seul objet circonscrit (a) • Couleur de l’objet

– Un objet circonscrit placé devant les autres (a)

• Couleur de l’objet29

Page 30: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Stéréovision• Consiste à calculer 2 images

– 2 caméras situées à gauche et à droite du point de vue de l’utilisateur

– 2 calculs de clipping – 2 calculs de rendu – Association de chaque image à chaque œil

• 2 fois plus coûteux ? – Partager des calculs entre les 2 images ? – Dépend de l’algorithme de rendu...

30

Page 31: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairage – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

31

Page 32: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Modèle d’éclairage• Exprime l’intensité lumineuse d’un point

– Lumière ambiante que produit dans toutes les directions un éclairage uniforme

– Sources lumineuses qui sont à l’origine : • Réflexions diffuses et spéculaires • Ombres portées

• Ir = Ia + Id + Is – Ia : intensité ambiante – Id : intensité diffuse – Is : intensité spéculaire

32

Page 33: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Eclairage ambiant

• Chaque objet est montré avec une intensité intrinsèque : – Pas de source extérieure – Univers irréel d’objets lumineux non

réfléchissants

33

Page 34: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Réflexion diffuse• Une partie de la lumière incidente pénètre

dans l’objet et ressort avec la même intensité dans toutes les directions

34

Page 35: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Réflexion spéculaire• Réflexion par la surface de l’objet de la

lumière incidente qui n’a pas pénétré dans l’objet, dépend de la direction d’observation

35

Page 36: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Lissage des facettes• Il n’est pas réaliste, pour une facette :

– De calculer l’intensité lumineuse en chaque point (trop coûteux)

– D’attribuer la même intensité à tous les points (effet de « facettisation)

• Il est plus judicieux : – De calculer les intensités aux sommets de la

facette – De déduire l’intensité de chaque point par une

interpolation bilinéaire

36

Page 37: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Lissage des facettes• 2 types de lissage :

– lissage de Gouraud : interpolation linéaire des couleurs des sommets (remplissage par balayage ligne par ligne)

– lissage de Phong : interpolation des normales des sommets (remplissage point par point)

37

Page 38: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Definition de la couleur• Définition de la couleur d’un objet dans les

librairies graphiques 3D – Couleur ambient (RGB) – Couleur diffuse (RGB) – Couleur spéculaire (RGB) – Couleur emissive (RGB) – Transparence (alpha) – Brillance (value) – etc.

• Généralement regroupé dans un « Material »38

Page 39: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Synthèse d’image avancée• Ombres

• Illumination globale et lancer de rayon

• Rendu sous-surfacique

39

Page 40: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Plan du cours

• Introduction au rendu 3D – Projections – Pyramide de vue et clipping – Algorithmes de rendu – Modèles d’éclairages – Placage de texture

Remerciement à Thierry Duval (Université de Rennes 1)

40

Page 41: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

Placage de textures• Texture : tableau 2D de triplets RVB • Associer à chaque sommet d’une facette des

coordonnées dans l’espace texture : – espace de texture normalisé :

• (u, v), u et v variant de 0 à 1

41

v

ux

y

(0,0) (1,0)

(1,1)(0,1)A

BC

D

espace 3D espace texture

Page 42: Réalité Virtuelle et Interaction Introduction au Rendu 3D · intensité dans toutes les directions 34. Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud

Mise en situation : RVI / Cédric Fleury - APP5 Info à Polytech Paris-Sud - Introduction au Rendu 3D

v

ux

y

(0,0) (1,0)

(1,1)(0,1)A

BC

D

P

espace 3D espace texture

Placage de textures

• Pour un pixel donné P : – Les coordonnées texture de P sont obtenues

par interpolation bilinéaires des coordonnées de texture des sommets ABCD

42