Vous êtes sur la page 1sur 82

Institut Supérieur des Etudes Technologiques - Mahdia

Département Technologies de l’Informatique

Programmation
graphique 2D-3D
ENSEIGNANTE: AMEL TILOUCHE
NIVEAU: MDW4

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 1


PLAN
 Introduction à la programmation graphique

 Les bases de graphisme 2D

 Les bases de graphisme 3D

 Transformations 2D et 3D

 Techniques d’animation

 Simulation d’éclairage 3D

 Visualisation 3D
PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 2
INTRODUCTION
Programmation Graphique

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 3


 Programmation graphique ?

 Applications de la PG

 Principe général

 WebGL

 Processus de PG

 Pipeline Graphique

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 4


Introduction
• Pourquoi l’image ?
◦ L’homme a besoin de représenter ce qu’il voit pour:
◦ Présenter une information importante,
◦ Communiquer,
◦ Se souvenir,
◦ Se divertir, …

• Types d’images
◦ Dessins/Peintures
◦ Photographies
◦ Images de synthèse

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 5


Introduction
Synthèse d’images
◦ Produire des images réalistes 2D ou 3D afin de simuler une réalité.

◦ Donner la possibilité de:


◦ modéliser un environnement 2D/3D et naviguer dans cet environnement.

◦ modéliser un phénomène et visualiser son animation (Exemple: volcan).

◦ Système de synthèse d’images:


◦ Entrée: description géométrique d’une suite d’objets (modèle de scène).

◦ Sortie: image de la scène la plus réaliste possible.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 6


Introduction
Image de synthèse peut être obtenue par:
◦ Un outil de dessin (Paint, CorelPainter, …)

◦ Un logiciel d’infographie (CorelDraw, Photoshop, Adobe Illustrator, …)

◦ Un modeleur 3D (3DsMax, Maya, Blender, …)

◦ Programmation en utilisant une bibliothèque graphique (OpenGL,


WebGL, DirectX, Java 2D/3D, Vulkan, …)

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 7


Programmation graphique ?

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 8


Programmation graphique?
Utilisation d’un ordinateur pour générer des images.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 9


Applications de la PG
Conception Assistée par Ordinateur (CAO)
◦ Design

◦ Automobile

◦ Architecture

Visualisation d’informations
◦ Cartographie

◦ Données statistiques

◦ Imagerie médicale

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 10


Applications de la PG
Simulation et animation
o Simulateurs de conduite/ de vol

o Dessins animés, films

o Jeux vidéo

Interfaces Homme-Machine
o Modèles de fenêtrage
o Menus, icônes, boutons, barres de défilements, …

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 11


Applications de la PG
Réalité augmentée

Réalité virtuelle

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 12


Principe général

?
Modèle
Algorithmes Image
de Synthèse affichée
2D/3D
d’images à l’écran

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 13


Principe général
Modèle 2D/3D
Ensemble d’objets 2D/3D organisés pour représenter une scène devant
être affichée.

Chaque modèle est un ensemble de points 2D ou 3D.

Constitué par :
◦ Des primitives : points, lignes, polygones 2D, courbes, primitives 3D, …

◦ Des attributs : styles, couleurs, textures

◦ Des relations de connexités entre les différents composants du modèle

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 14


Principe général

Algorithmes
?
Image
Modèle de Synthèse affichée
2D/3D
d’images à l’écran

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 15


Principe général
Une image
◦ Un ensemble de pixels ou fragments organisés dans un plan, stockés
dans les tampons de la mémoire de GPU.

◦ Un pixel: composant élémentaire d’une image

◦ Un fragment: groupe de pixels

◦ Un tampon (Frame Buffer): espace mémoire utilisé pour stocker l’état


de chaque pixel ou fragment au niveau de la carte graphique.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 16


Principe général
?
Algorithmes Image
Modèle de Synthèse affichée
2D/3D
d’images à l’écran

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 17


Principe général
Bibliothèque graphique
Une API (Application Programming Interface): interface de
programmation faisant le lien entre le programme utilisateur et la carte
graphique (GPU: Graphics Processing Unit).

Contenant un ensemble des algorithmes de synthèse d’images.

API
Graphique
Application 2D/3D GPU

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 18


Principe général
Bibliothèque graphique
Permet:
◦ Description du modèle 2D/3D et manipulation de données pixels

◦ Animation d’un modèle

◦ Traduction d’un modèle en une image

◦ Interaction avec les périphériques d’entrée (clavier, souris, …)

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 19


Exemple: WebGL
Bibliothèque de Graphismes Web: API JavaScript pour l'affichage
de graphismes 2D et 3D dans n'importe quel navigateur web
compatible sans utilisation de modules complémentaires.

Implémentation JavaScript de l’API OpenGL ES 2.0, utilisée dans les


éléments <canvas > d'HTML5.
o Supporté par les navigateurs: Firefox 4+, Google
Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ;

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 20


Processus de PG
Paramètres
géométriques et
photométriques Modélisation
du Modèle
2D/3D
Paramètres de vue et
Animation de projection
Modèle 2D/3D représenté
Contrôles
clavier, souris
Rendu
Modèle 2D/3D animé

Interaction
Image/vidéo synthétisée
PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 21
Processus de PG
Représentation d’une scène 2D/3D par des
Modélisation structures de données en utilisant ses
propriétés géométriques et photométriques

Animation Simulation de mouvement du modèle au


cours du temps

Rendu Construction d’image 2D/vidéo à partir du


modèle

Interaction Gestion des interactions avec l’utilisateur


(souris, clavier, …)

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 22


Pipeline graphique
La séquence des étapes à faire pour créer une image de synthèse au
niveau de la carte graphique GPU.

Le pipeline GPU possède plusieurs étapes dans lesquelles on utilise des


shaders programmables.

Un shader est un programme exécuté sur GPU.

Un shader est compilé, chargé et activé pour chaque étape de la


programmation graphique.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 23


(x, y) ou (x, y, z)
Entrée Geometry Shader
Vertex
(Description des Assemblage des
Shader
Pipeline graphique
primitives 2D/3D en primitives
sommets)

Fragment Projection
Shader Rastérisation & Clipping
(Frame Buffer)

Fenêtre de vue

Opérations sur 24

les fragments Sortie


(Frame Buffer) Image sur écran Les Lefragments
Vertex Shader applique
peuvent subir les
des
Les
Le Les données
faces
L’image
Fragmentsont géométriques
projetées
résultat
Shader sera et
applique de
clippées
envoyée les
Le Geometry
transformations
Lesdans Shader assemble
nécessaires les
aux
lafaces
opérations
opérationsscène sont
par
sur
rastérisées
exemple
sont envoyés
lenécessaires
volume de par
écran. vue enGPU.
au pixels.
l’application
défini.
fragment.
sommets en faces.
sommets.
d’une texture.
PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 24
LES BASES DE GRAPHISME 2D

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 25


 Systèmes de coordonnées 2D

 Formes basiques 2D

 Primitives WebGL

 Exemples des tracés en WebGL

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 26


Systèmes de coordonnées 2D

 Système de coordonnées cartésiennes

 Système de coordonnées polaires

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 27


Système cartésien 2D
Un système de coordonnées cartésiens 2D est caractérisé
par deux axes perpendiculaires X et Y.

Un point P ou un vecteur P(x, y) peut être exprimé comme


une combinaison linéaire de 2 vecteurs de base:

1 0
= x⃗ + y⃗; ⃗ = et ⃗ = P(x, y)
0 1

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 28


Système polaire 2D
Un système de coordonnées cartésiens 2D est caractérisé
aussi par deux axes perpendiculaires X et Y.

Mais chaque point P(x,y) est exprimé en fonction de deux


paramètres une distance r et un angle .

cos P(x, y)
=
sin

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 29


Formes basiques 2D
Points
Lignes
Triangles
Quadrilatérales
Cercles/Ellipses/Arcs
Courbes (Bézier et Catmull-Rom)
Formes libres

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 30


Primitives WebGL

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 31


Exemples des tracés WebGL

Dessin d’un triangle:


triangle.html
Dessin d’un carré:
carre.html

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 32


Retour sur le pipeline de WebGL

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 33


Les bases d’un programme WebGL
 Initialisation de WebGL: définition du canevas HTML5 et du contexte WebGL.

 Création des tableaux: pour le stockage des données géométriques, photométriques


ou des index.
 Création des Buffer Objects (sommets, indices et couleurs): association des Buffer
Objects aux tableaux correspondants.
 Shaders: conception (création, code source), compilation et connexion au Shader
Program.
Attributes : création, activation et association entre les buffer objects et le Shader
Program.
 Uniforms : définition et liaison aux shaders.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 34


Application
Ecrire un programme WebGL permettant de dessiner le
wagon 2D suivant:

Marron (136, 64, 28)


Bleu ciel (38, 196, 236)
Vert pistache (194, 247, 50)

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 35


LES BASES DE GRAPHISME 3D

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 36


 Pipeline graphique 3D
 Modèles 3D
 Modèle filaire
 Modèles surfaciques
 Modèles volumiques

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 37


Pipeline graphique 3D
● Passage de système de coordonnées local (3D)
de chaque objet vers un repère global
(coordonnées du monde ou de scène) (3D).

Transformations: rotation, translation, mise à


l’échelle (homothétie).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 38


Pipeline graphique 3D
Comment la lumière éclaire les objets
(3D)?

Les primitives sont éclairés selon leur


matériau, le type de surface et les
sources de lumière.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 39


Pipeline graphique 3D
● Passage de système de coordonnées du monde (3D)
vers système de coordonnées de point de vue (système
caméra)(3D).
● Projection : perspective, orthographique ou parallèle.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 40


Pipeline graphique 3D
● Passage aux coordonnées normalisées (NDC:

Normalized Device Coordinates).

● Les portions en dehors de volume de vue


(Frustum) sont coupées.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 41


Pipeline graphique 3D
● Passage de système de coordonnées de caméra 3D
NDC vers le système de coordonnées de caméra 2D.

● Les primitives 3D sont projetées sur l’image 2D.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 42


Pipeline graphique 3D
● Découpe la primitive 2D en pixels.

● Interpole les valeurs connues aux sommets :

couleur, profondeur, etc.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 43


Pipeline graphique 3D
● Affichage à l’écran :
Calcul des primitives visibles.
Remplissage du frame buffer avec le bon
format de couleur.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 44


Modèles 3D
Modèle 3D:
◦ Une représentation abstraite ou ensemble d’objets organisés pour
représenter une scène à afficher.

◦ Un objet du modèle est une approximation de l’élément modélisé.

◦ Graphiquement, un objet est soit :

◦ Un ensemble de polygones (polyèdres).

◦ Polygone: série de points généralement sur un seul plan (appelée


facette).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 45


Modèles 3D
◦ Des surfaces ou des courbes calculées par une méthode particulière
(Exemples : Beziers, splines, fractales).

◦ Un assemblage hiérarchique d’objets canoniques (Exemples : sphère,


cube, cône, etc.).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 46


Modèles 3D
◦ Outre les objets (aspect, organisation, comportement), un
modèle est généralement complété par :
◦ La position de la caméra, son orientation, le cadrage, les champs de vision.

◦ La description de différents phénomènes complémentaires tels que


l’éclairage, l’ombrage, le brouillard, la transparence, le lissage.

◦ Les textures (procédés de remplissage de polygones).

◦ Les données "pixel", les polices.

◦ Etc.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 47


Modèles 3D

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 48


Modèle filaire
Appelé aussi: linéique, de treillis ou fil de fer.

Utilise les mêmes entités géométriques que le 2D, en y ajoutant la


troisième dimension: points et lignes.

L'objet est décrit par ses sommets (points) et ses arêtes (lignes reliant
les sommets).

Les objets en fil de fer sont constitués d’éléments filiformes, tels que
des segments de droite ou des courbes.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 49


Modèle filaire
Limite

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 50


Modèle filaire en WebGL
Primitives à utiliser pour dessiner en utilisant le modèle
filaire:

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 51


Modèles surfaciques
L’objet est constitué d’un ensemble de morceaux de surface (ou
carreaux) définis par le type de surface support (son enveloppe) et la
description de ses bords (contours: surfaces frontières).

Gère les intersections de surfaces et applique des règles de contrôle


topologique (ouvert/fermé, intérieur/extérieur) pour « créer » des
objets.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 52


Modèles surfaciques
Types de représentation:
◦ Paramétrique:
◦ Par surfaces planes: utilisées au début de l’apparition de SI.

◦ Convertir même les objets non plans en un ensemble des carreaux plans.

◦ Risque d’avoir des surfaces non lisses.

◦ Par surfaces gauches ou paramétrées: utilisées depuis les années 70.

◦ Modéliser des objets complexes tels que les carrosseries de voiture, les ailes d’avion, etc.

◦ Exemples: surfaces de Bézier, de Coons, B-splines, Beta-splines, NURBS (B-spline rationnelle non uniforme).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 53


Modèles surfaciques
◦ Fonctionnelle :
◦ L’application à une forme ou une courbe 2D un modificateur 3D

◦ Exemples: révolution, torsion, balayage, extrusion, …

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 54


Modèles surfaciques
Représentation paramétrique
Représentation d’objets et de formes par la représentation de leurs
surfaces frontières.

Les grandes catégories de modèles de cette représentation:


◦ Modèles polyédriques

◦ Modèles implicites

◦ Modèles paramétriques

◦ Modèles de subdivision

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 55


Modèles surfaciques
Représentation paramétrique
Modèle polyédrique
◦ Appelé aussi maillage.

◦ Une représentation discrète de la surface d’un objet ou d’une forme.

◦ Cette architecture se décompose en éléments finis appelés sommets, arêtes


et faces.
◦ Face: polygonale et construite à partir de plusieurs arêtes.

◦ Peut être quadrangulaire.

◦ Généralement choisie comme étant un triangle.

◦ Arête: l’association de deux sommets.

◦ Ensemble connecté de polygones (triangles/rectangles).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 56


Modèles surfaciques
Représentation paramétrique
Modèle implicite
◦ Définie par une fonction potentiel qui change de signe lorsque l’on
traverse la surface (on passe de l’intérieur à l’extérieur).

◦ La surface est définie comme étant l’ensemble des points qui


annulent la fonction potentiel (notion d’iso-surface).
◦ C-à-d, chaque point de cette surface possède une équation de la forme suivante :
F(x, y, z)=0

◦ Exemples: Plan, sphère, cylindre, tore, blobs.


◦ Pour une sphère de rayon R et de centre C(x0, y0, z0):

F (x, y, z) = (x - x0)2 + (y - y0)2 + (z - z0)2 - R2=0


PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 57
Modèles surfaciques
Représentation paramétrique
Modèle paramétrique
◦ Utilise des fonctions pour décrire des courbes et des surfaces.

◦ Les propriétés de continuité sont identifiées grâce à une analyse


différentielle des fonctions mises en œuvre.

◦ Les fonctions les plus utilisées: les polynômes pour leur caractère lisse.

◦ Pour cette surface, chaque coordonnée d’un point est paramétrée par une
fonction explicite.

◦ Exemples: Plan, sphère, cylindre, tore, surface de balayage.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 58


Modèles surfaciques
Représentation paramétrique
Pour une sphère de rayon de centre C(0, 0, 0):

Inversement:

est l’angle par rapport à X: ,


est l’angle par rapport au plan XY : ,

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 59


Modèles surfaciques
Représentation paramétrique
Modèle de subdivision
◦ Il s’agit de l’application des opérations de raffinement du maillage par l’ajout
ou la modification de sommets.

◦ Chaque opération est conditionnée par des règles de subdivision appelées


schémas de subdivision.

◦ Les propriétés de schémas de subdivision:


◦ Localité : la position d’un nouveau sommet à insérer dans un maillage, se calcule à
partir d’un nombre fini de sommets identifiés par le schéma de subdivision.

◦ Valence d’un sommet: le nombre de sommets auxquels il est connecté.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 60


Modèles surfaciques
Représentation paramétrique
◦ Exemple de maillage raffiné:

◦ Exemples de schémas de subdivision

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 61


Modèles surfaciques
Représentation paramétrique en WebGL
Modes de dessin WebGL pour ces modèles:

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 62


Modèles surfaciques
Représentation fonctionnelle
Révolution
Extrusion généralisée

Extrusion simple

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 63


Modèles surfaciques
Représentation fonctionnelle
Balayage

Torsion

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 64


Modèles volumiques
Appelés aussi modèles solides.

Modélisation volumique:
◦ La modélisation la plus complète car elle englobe les deux précédentes.

◦ Permet la représentation dans l'espace, avec la notion de matière.

Plusieurs types:
◦ B-Rep

◦ CSG

◦ Octree

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 65


Modèles volumiques
Représentation B-Rep

Représentation par frontières


◦ B-Rep: Boundary Representation.

◦ Représentation d’un objet par un découpage de sa frontière en un nombre


fini de faces (une portion de surface) selon deux méthodes:

◦ Représentation par les frontières approchée par facettes


planes.

◦ Représentation par les frontières « précises ».

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 66


Modèles volumiques
Représentation B-Rep
◦ Exemple 1: cylindre

◦ Exemple 2: objet composé

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 67


Modèles volumiques
Représentation B-Rep

◦ Cette représentation comprend deux types d’informations:

◦ Géométrie (ou information métrique): dimensions actuelles des


entités composant le modèle de l’objet.

◦ Topologie (ou structure combinatoire): connectivité et


associativité entre les entités, renvoi à la notion de «voisinage»
des entités.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 68


Modèles volumiques
Représentation B-Rep
◦ Exemple: différence entre géométrie et topologie

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 69


Modèles volumiques
Représentation B-Rep
◦ Exemple: informations topologiques

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 70


Modèles volumiques
Représentation CSG
Géométrie constructive:
◦ CSG: Constructive Solid Geometry.

◦ Un objet CSG est le résultat d’opérations ensemblistes sur des


primitives solides de base.

◦ La représentation interne (structure de données) d’un solide CSG est


un arbre binaire où chaque nœud non terminal est une opération
ensembliste et les feuilles sont des primitives solides.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 71


Modèles volumiques
Représentation CSG

◦ Dans un arbre de construction binaire:


◦ Les feuilles représentent des primitives solides.
◦ Les nœuds représentent le résultat:
◦ d’opérations booléennes régularisées (union, intersection, etc.)

◦ de transformations géométriques (rotation, symétrie, etc.)

◦ Un nœud ne peut avoir plus de deux enfants et plus d’un parent.


◦ La racine correspond au seul nœud n’ayant pas de parents:
Objet final.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 72


Modèles volumiques
Représentation CSG

◦ Exemples:

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 73


Modèles volumiques
Représentation Octree
Arbre octal:
◦ Octree: Octal Tree.

◦ La scène à représenter est supposée contenue dans un volume cubique


(univers) dont la dimension est une puissance de 2.

◦ Voxel: cube élémentaire de côté unité.


◦ Les voxels composants un objet sont caractérisés par leurs dimensions et leurs
positions à l’intérieur de l’univers (par exemple les coordonnées d’un coin).

◦ Décrire une scène revient à fournir une liste des voxels pleins, c-à-d contenant
de la matière (par opposition aux voxels vides).

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 74


Modèles volumiques
Représentation Octree
◦ La construction d’un arbre octal répond aux règles suivantes :
◦ le processus commence en prenant l’univers comme point de départ: racine de l’arbre est
l’univers.

◦ Si l’univers est entièrement plein ou entièrement vide, l’arbre octal est réduit à l’univers.

◦ Si l’univers n’est ni entièrement plein, ni entièrement vide, on le divise en huit sous-espaces


identiques, de côté moitié de celui de l’univers d’origine.

◦ On étudie les huit voxels obtenus, de manière à déterminer s’ils sont entièrement vides ou
entièrement pleins ; pour chaque voxel se trouvant dans la situation recherchée, l’analyse est
finie; les autres sont de nouveau divisés en huit.

◦ Le processus s’arrête lorsque tous les voxels étudiés se sont révélés entièrement pleins ou vides
ou lorsque, à force de diviser, on atteint des voxels de côté unité.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 75


Modèles volumiques Modifier
l’arbre
Représentation Octree
◦ L’information portée par un nœud est : vide, plein ou divisé.

◦ Exemple:

◦ Remarque:

◦ Un nœud vide est représenté par

◦ Un nœud plein est représenté par

◦ Un nœud divisé est représenté par

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 76


Application 1
1. Comment peut-t-on obtenir ces objets?

2. Un cube est décrit en 3 niveaux par un arbre octal comporte


combien de voxels au maximum ?

3. Le modèle solide ci-dessous a-t-il été construit à l’aide d’un


modeleur CSG ou d’un modeleur B-Rep ?

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 77


Application 2 - BRep
1. Représenter ces deux objets en utilisant les facettes planes et les
facettes précises.

2. Déterminer leurs graphes d’adjacence.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 78


Application 3 - CSG
Représenter les arbres CSG des objets suivants :

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 79


Application 4 - Octree
Donner les arbres octaux des objets suivants:

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 80


Application5
Ecrire un progamme WebGL permettant de dessiner un
cube dont les faces sont avec des couleurs différentes.

Face avant: rouge


Face arrière: vert
Face dessous: bleu
Face dessus: jaune
Face droite: magenta
Face gauche: cyan

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 81


Application 6
Ecrire un programme WebGL permettant de dessiner une
sphère orange.

PROGRAMMATION GRAPHIQUE 2D-3D - AMEL TILOUCHE - MDW4 82