Cours2d3d 1 1 65

Institut Supérieur des Etudes Technologiques - Mahdia
Département Technologies de l’Informatique
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
 Animation 2D et 3D
 Simulation d’éclairage 3D
INTRODUCTION
Programmation Graphique

 Programmation graphique ?
 Applications de la PG
 Principe général
 OpenGL et WebGL
 Processus de PG
 Pipeline Graphique

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

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.

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 ?

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

Applications de la PG
Conception Assistée par Ordinateur (CAO)
◦ Design
◦ Automobile
◦ Architecture
Visualisation d’informations
◦ Cartographie
◦ Données statistiques
◦ Imagerie médicale

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, …

Réalité augmentée
Réalité virtuelle

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

Principe général
Algorithmes Image
2D/3D

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

Principe général
Algorithmes
Image
2D/3D

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.

Principe général
Algorithmes Image
2D/3D

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

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, …)

OpenGL
Open Graphics Library
Bibliothèque graphique 2D/3D multiplateforme (Windows, Linux,

Mac, …)
Développée en 1989 (GL) par Silicon Graphics, portée sur d'autres

architectures en 1993 (OpenGL).
Exploitant la carte graphique d'un ordinateur permettant ainsi

aux développeurs de programmer des applications 2D et 3D (jeux
vidéo).
WebGL
WebGL 2.0: Implémentation JavaScript de l’API OpenGL ES 3.0, utilisée
dans les éléments <canvas > d'HTML5.
o OpenGL ES 3.0: basé sur OpenGL 4.3, conçu pour les systèmes embarqués et
les appareils portables (Raspberry, Android) et basé sur les shaders.
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.
o Supporté par les navigateurs: Firefox 4+, Google
Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ;

Processus de PG
Paramètres
géométriques et
photométriques Modélisation
du Modèle
2D/3D
Paramètres d’éclairage,
Animation de vue et 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
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

Processus de PG
Animation Simulation de mouvement du modèle au

cours du temps

Processus de PG

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

modèle

Processus de PG

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

modèle
Interaction Gestion des interactions avec l’utilisateur

(souris, clavier, …)

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.

Pipeline graphique

(x, y) ou (x, y, z)
Entrée
(Description des
Pipeline graphique
primitives 2D/3D en
sommets)
Les données géométriques de

la scène sont envoyés au GPU.

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

transformations nécessaires aux
sommets.

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

sommets en faces.

(x, y) ou (x, y, z)
Vertex
Shader
Pipeline graphique
sommets)
Projection
& Clipping
Fenêtre de vue
33
Les faces sont projetées et clippées

dans le volume de vue défini.

(x, y) ou (x, y, z)
Vertex
Shader
Pipeline graphique
sommets)
Projection
Rastérisation & Clipping
Fenêtre de vue
34
Les faces sont rastérisées en pixels.

(x, y) ou (x, y, z)
Vertex
Shader
Pipeline graphique
sommets)
Fragment Projection
Shader Rastérisation & Clipping
(Frame Buffer)
Fenêtre de vue
35
Le Fragment Shader applique les

opérations nécessaires par fragment.

(x, y) ou (x, y, z)
Vertex
Shader
Pipeline graphique
sommets)
Fragment Projection
(Frame Buffer)
Fenêtre de vue
Opérations sur 36
les fragments
(Frame Buffer) Les fragments peuvent subir des
opérations par exemple l’application
d’une texture.
(x, y) ou (x, y, z)
Vertex
Shader
Pipeline graphique
sommets)
Fragment Projection
(Frame Buffer)
Fenêtre de vue
Opérations sur 37
les fragments Sortie

(Frame Buffer) Image sur écran
L’image résultat sera envoyée
sur écran.

LES BASES DE GRAPHISME 2D

 Systèmes de coordonnées 2D
 Formes basiques 2D
 Primitives WebGL
 Exemple 1: tracé d’un triangle en WebGL
 Retour sur le pipeline de WebGL
 Les bases d’un programme WebGL
 Exemple 2: tracé d’un carré en WebGL

Systèmes de coordonnées 2D
 Système de coordonnées cartésiennes
 Système de coordonnées polaires

Système cartésien 2D
Un système de coordonnées cartésiennes 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:
P(x, y)

Système polaire 2D
Un système de coordonnées polaires 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 .
P(x, y)

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

Primitives WebGL

Exemple 1: tracé d’un triangle en WebGL
triangle.html

Memory Vertex Shader
Pointe vers
Vertex Buffers Objects Attributes
Output
Input
Varyings
Retour Uniforms Primitive Assembly

sur le pipeline
de WebGL
Rasteriazer
Input Input
Fragment Shader
Frame Buffer
Canvas HTML et Contexte WebGL
Canvas HTML 5 (index.html):
<body>
<canvas width = "570" height = "570" id = "mon_Canvas"></canvas>
</body>
Contexte WebGL en JS:
var canvas = document.getElementById('mon_Canvas');

gl = canvas.getContext('experimental-webgl’);
// gl est l’interface permettant l’utilisation des fonctions OpenGL.

Shaders
une application WebGL est composée de code hôte en JavaScript, exécuté
sur le processeur principal (CPU) ainsi que de code graphique exécuté sur le
processeur graphique (GPU).
Code graphique
Code hôte
= shaders

Shaders
Le code graphique est regroupé en unités d’exécution appelées shaders.
Utilité :
• Alléger la charge du processeur
• Rapidité d’exécution
• Exécution des opérations complexes (rotations, projections, ombres...) avant que la

scène ne soit dessinée
Deux types :
• Vertex Shader
• Fragment Shader
Vertex shader
Génère des coordonnées dans l'espace de
projection (volume de clipping).
Est appelé une fois par vertex. Chaque fois qu’il est
exécuté la variable globale gl_Position doit être
renseignée avec des coordonnées.

Fragment Shader
Colorie le pixel en cours.
Est appelé une fois par pixel. Chaque fois qu’il est
exécuté la variable globale gl_FragColor doit être
renseignée avec une couleur.

Shader Program Object
Le programme qui englobe les deux shaders.

Vertex Buffers Objects (VBO)
Permettent d’envoyer des données par flots du JavaScript au
programme de shaders, gérant l’affichage.
Créés à partir de tableaux unidimensionnels de valeurs numériques.
Deux types:
• ARRAY_BUFFER : utilisé pour stocker les coordonnées ou les couleurs des vertex
d’un objet.
• ELEMENT_ARRAY_BUFFER : utilisé pour stocker les indices des vertex des autres
VBO à utiliser pour dessiner un objet.

Tableaux
des
données
VBO
des
coordonnées
VBO
des
indices

Attribute
Variable globale susceptible de changer par sommet.
Transmise par l'application WebGL au vertex shader.
Ce qualificatif ne peut être utilisé que dans le vertex shader.
Il s'agit d’une variable en lecture seule pour le vertex

shader.

Déclaration
des
attributes
Dans le code
source du
shader
Création de l’emplacement de l’Attribute

et pointage au VBO courant

Varying
Utilisée pour les données interpolées entre un vertex
shader et un fragment shader.
Disponibles en écriture dans le vertex shader et en lecture

seule dans le fragment shader.
Le vertex shader passent des données au fragment shader

en utilisant des variables varying.

Déclaration
de varying
dans le code
source du
vertex shader
Déclaration de varying
dans le code source
du fragment shader

Uniform
Variable globale identique pour tous les sommets d’un objet
rendu.
Transmise par l'application WebGL aux shaders.
Ce qualificatif peut être utilisé dans le vertex shader et le

fragment shader.
Il s'agit d'une variable en lecture seule pour les deux

shaders.
Déclaration
des uniforms
dans le code
source du
vertex shader
Renseignement sur les valeurs des uniforms

Les bases d’un programme WebGL
 Initialisation de WebGL: définition du canvas 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.
 Varying: définition et liaison aux shaders.
 Rendu: stockage de données pixels au niveau du frame buffer et affichage.

Exemple 2: tracé d’un carré en WebGL
carre.html

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)

Cours2d3d 1 1 65

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours2d3d 1 1 65

Transféré par

Droits d'auteur :

Formats disponibles

Institut Supérieur des Etudes Technologiques - Mahdia

Département Technologies de l’Informatique

ENSEIGNANTE: AMEL TILOUCHE

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

 Les bases de graphisme 2D

 Les bases de graphisme 3D

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

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

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

◦ Donner la possibilité de:

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

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

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

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

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

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

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

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

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

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

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

o Dessins animés, films

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

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

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

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

Chaque modèle est un ensemble de points 2D ou 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 15

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

◦ 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

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

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

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

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

◦ 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 20

Bibliothèque graphique 2D/3D multiplateforme (Windows, Linux,

Développée en 1989 (GL) par Silicon Graphics, portée sur d'autres

Exploitant la carte graphique d'un ordinateur permettant ainsi

Bibliothèque de Graphismes Web: API JavaScript pour l'affichage de

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

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

Animation Simulation de mouvement du modèle au

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

Animation Simulation de mouvement du modèle au

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

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

Animation Simulation de mouvement du modèle au

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

Interaction Gestion des interactions avec l’utilisateur

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

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

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

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

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

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

Les données géométriques de