DIRECTION DE L’ENSEIGNEMENT UNIVERSITAIRE
Département : Informatique
Modélisation
Et Animation
3D
ACADEMIE MILITAIRE FONDOUK JEDID
Lt Selmen Rayen
Avril 2021 Modélisation et Animation 3D 2020/2021
Introduction générale
Les représentations 3D sont aujourd'hui au cœur de l'univers
du graphisme. Le réalisme et la beauté des images sont de plus
en plus éblouissants. L‘éventail des utilisations de la 3D
comprend des domaines aussi divers que le cinéma (effets
spéciaux et films d'animations), le jeu vidéo, l'enseignement
ou la pub.
2 Modélisation et Animation 3D Avril 2020
Introduction générale
Les moteurs 3D sont la base de toutes ces utilisations. Il existe
différents outils logiciels accessibles aux développeurs de
moteurs 3D. L'apparition de ces outils combinés à l'évolution
matérielle des cartes vidéo ont permis à la 3D de se
démocratiser, en simplifiant grandement la création de moteurs
3D tout en augmentant leur puissance.
3 Modélisation et Animation 3D Avril 2020
2D3D
Donnnés 2D (RasterData) Visualisation en 3D
MOTEUR
GRAPHIQUE
4 Modélisation et Animation 3D Avril 2020
Systèmes de simulation 3D
Domaines d’application de la technologie 3D:
Militaire
Loisirs
Santé
Agriculture
5 Modélisation et Animation 3D Avril 2020
Systèmes de simulation 3D
Domaines d’application de la technologie 3D:
Militaire
Loisirs
Santé
Agriculture
6 Modélisation et Animation 3D Avril 2020
Systèmes de simulation 3D
Domaines d’application de la technologie 3D:
Militaire
Loisirs
Santé
Agriculture
7 Modélisation et Animation 3D Avril 2020
Systèmes de simulation 3D
Domaines d’application de la technologie 3D:
Militaire
Loisirs
Santé
Agriculture
8 Modélisation et Animation 3D Avril 2020
Introduction à WebGl et [Link]
WebGL est une spécification d’interface de programmation de 3D
dynamique pour les pages et applications HTML5.
Elle permet d’utiliser le standard OpenGL ES(OpenGL for Embedded
Systems) au sein d’un projet web, en s’aidant du langage JavaScript, de
données au format JSON, de l’accélération matérielle pour les calculs et le
rendu 3D à l’aide des pilotes OpenGL ES ou des processeurs graphiques du
terminal informatique. OpenGL ES a été choisi pour son large support au
sein des architectures embarquées et mobiles.
9 Modélisation et Animation 3D Avril 2020
Introduction à WebGl et [Link]
la 3D, c'est maintenant dans votre
navigateur !
10 Modélisation et Animation 3D Avril 2020
Introduction à WebGl
WebGl
[Link]
11 Modélisation et Animation 3D Avril 2020
12 Modélisation et Animation 3D Avril 2020
13 Modélisation et Animation 3D Avril 2020
[Link] Exemples
14 Modélisation et Animation 3D Avril 2020
[Link] Exemples
15 Modélisation et Animation 3D Avril 2020
[Link] Exemples
16 Modélisation et Animation 3D Avril 2020
[Link] Exemples
17 Modélisation et Animation 3D Avril 2020
[Link] Exemples
18 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
[Link] est une bibliothèque JavaScript basée sur le moteur
WebGl qui permet de créer et réaliser des scènes 3D dans un
navigateur web. Le créateur de cette librairie est mrDoob. Le
code source est hébergé sur github.
19 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
Cette bibliothèque peut-être utilisée avec la balise canvas du HTML5, elle
permet également de réaliser des rendus en webGL, CSS3D et SVG. Elle
offre un tas d’outils très confortable pour les développeurs:
Animation avec squelette
LOD (Level Of Detail)
Loader (Chargement de fichier) : .OBJ, .JSON, .FBX
Particules (neige, feu)
20 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
[Link] simplifie l'utilisation de WebGL.
C’est une bibliothèque de haut niveau, l’API est la plus utilisée pour développer
et maintenir plus aisément un projet WebGL.
Vous allez pouvoir créer: caméras, objets, lumières, matériaux, et faire des
importations depuis d'autres logiciels (Blender, Maya, 3ds Max) etc... Pour faire
ça, il y a plusieurs types de moteur de rendu (renderer) comme Canvas du
HTML5, WebGL, SVG et CSS3D.
Voici les trois versions du noyau [Link], dont une que vous devez inclure dans
votre projet:
[Link]
[Link]
[Link]
21 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
22 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
Fonctionnalités:
[Link] accélère le développement de rendu en 3 dimensions grâce à ses
fonctionnalités avancées. Pour en citer quelques-unes :
Support des Canvas, SVG et WebGL
Ajout/suppression d’objets à la volée
Les cameras
Gestion des animations
Gestion des lumières
Chargement des données en entrée sous plusieurs formats :
binaire, image, JSON et scène
mettre en place une application VR( réalité virtuelle)
Un ensemble de fonctions mathématiques pour la manipulation des
données
• Et plein d’autres …
23 Modélisation et Animation 3D Avril 2020
Qu’est-ce que [Link]?
Prérequis:
Connaître et savoir utiliser le HTML et le CSS
Maîtriser les grands principes du JavaScript
24 Modélisation et Animation 3D Avril 2020
Caractéristiques de [Link]
Caractéristiques:
Bibliothèque javascript de graphes de scène crée en 2010;
S’appuie sur l’API WebGL (graphisme 3D –associée au standard HTML5);
Création et animation de scènes 3D dans le navigateur.
Conventions:
Prototypes (classes) dans l’espace de nommage THREE;
Notations de type CamelCase;
Repère main droite;
Angles en radions.
25 Modélisation et Animation 3D Avril 2020
Caractéristiques de [Link]
Exemple:
26 Modélisation et Animation 3D Avril 2020
Caractéristiques de [Link]
Exemple:
27 Modélisation et Animation 3D Avril 2020
Graphe de scènes
Définition:
Graphe de scène: Organisation hiérarchique des différents éléments
composant une scène 3D.
Une structure arborescente:
Représentée par un arbre
(graphe orienté acyclique);
Les propriétés appliquées aux ancêtres
s’appliquent aussi aux descendants.
28 Modélisation et Animation 3D Avril 2020
Graphe de scènes
Propriétés des nœuds et champs:
Un nœud possède des propriétés;
Dans la pratique , elles sont modifiables;
Ces propriétés sont appelées des champs.
Exemples
Sphère : Rayon;
Boite: Largeur, Longueur, Hauteur;
Transformation: Matrice de transformation.
29 Modélisation et Animation 3D Avril 2020
[Link] par l’exemple
Etapes de la création d’une scène:
1. Préparer le document html à afficher dans le navigateur;
2. Créer la scène;
3. Effectuer le rendu de la scène;
4. Mettre en place les animations.
30 Modélisation et Animation 3D Avril 2020
Préparation du document html
31 Modélisation et Animation 3D Avril 2020
Créer la scène
Commentaires:
Eléments nécessaires : scène, caméra, zone de rendu;
La taille de la zone de rendu est indépendante de la taille du canvas dans
lequel est effectué le rendu;
La zone de rendu est un canvas ajouté au document HTML.
32 Modélisation et Animation 3D Avril 2020
Créer la scène
Commentaires:
Création d’un cube avec une géométrie et un matériau;
Ajout du cube à la scène;
Positionnement de la caméra par rapport à la scène.
33 Modélisation et Animation 3D Avril 2020
Créer la scène
Graphe de scène:
scene
camera cube
34 Modélisation et Animation 3D Avril 2020
Effectuer le rendu
Commentaires:
Création de la fonction render():
Demande à ce que render() soit appelée pour la prochaine image;
Effectue le rendu de la scène avec la caméra donnée dans la zone de
rendu;
Appelle une première fois la fonction render().
35 Modélisation et Animation 3D Avril 2020
Animer la scène
Fréquence de rafraîchissement:
1. Spécifiée à 60Hz;
2. Mais dépendante de la vitesse à laquelle le navigateur fournit une nouvelle
image via requestAnimationFrame(…)!
36 Modélisation et Animation 3D Avril 2020
Animer la scène
37 Modélisation et Animation 3D Avril 2020
Hiérarchie des prototypes de [Link]
38 Modélisation et Animation 3D Avril 2020
Hiérarchie des prototypes de [Link]
On notera que la lumière ainsi que les meshs (objets) et la
caméra vont être inclus dans la scène et cette dernière sera
incluse dans “le moteur de rendu” avec la caméra.
39 Modélisation et Animation 3D Avril 2020
Hiérarchie des prototypes de [Link]
Prototypes principaux:
40 Modélisation et Animation 3D Avril 2020
Le prototype Object3D
Description:
Prototype de base pour tous les nœuds des graphes de scène [Link] capable de
gérer:
Les transformations;
Les relations père-enfants dans le graphe.
Propriétés importantes:
parent, children: relations dans le graphe de scène;
position, rotation, scale, matrix: transformations locales;
Id, name: nom et identifiant de l’objet.
Les transformations s’appliquent aussi aux descendants!
41 Modélisation et Animation 3D Avril 2020
Le prototype Object3D
Ordre d’application:
1. Translation;
2. Rotation;
3. Mise à l’échelle.
Propriétés importantes:
Add(), remove(): gestion des enfants;
applyMatrix(), translate[X|Y|Z](), lookAt(), translmateOnAxis() ,
rotateOnAxis(): divers méthodes pour appliquer des transformations;
getObjectByName(), getObjectById(): recherche d’objet dans le graphe par son
nom ou son identifiant.
42 Modélisation et Animation 3D Avril 2020
Le prototype Camera
Description:
Prototype décrivant une caméra pouvant être de deux types:
OrthograhicCamera: caméra en perspective cavalière;
PerspectiveCamera: caméra en perspective classique.
Propriété notable: projectionMatrix.
43 Modélisation et Animation 3D Avril 2020
Le prototype Camera
Le prototype OrthograhicCamera:
Constructeur: OrthographicCamera(left, right, top, bottom, near, far)
left, right, top, bottom, near,far: distances des plans de clipping par rapport
au repère local de la caméra.
Propriétés: paramètres du constructeur.
Camera orthographique : la zone visualisée est une boite
44 Modélisation et Animation 3D Avril 2020
Le prototype Camera
Direction du regard de la caméra
Toujours suivant les Z négatifs par rapport à son repère local!
Le prototype PerspectiveCamera:
Constructeur: PerpectiveCamera( fov, aspect, near, far )
fov: angle de vision vertical;
aspect: rapport largeur/hauteur;
near,far: distances des plans de clipping proches et éloignés.
Propriétés: paramètres du constructeur.
45 Modélisation et Animation 3D Avril 2020
Le prototype Camera
Camera perspective: la zone visualisée est une pyramide
tronquée
46 Modélisation et Animation 3D Avril 2020
Le prototype Camera
Camera perspective
47 Modélisation et Animation 3D Avril 2020
Le prototype Camera(5/8)
48 Modélisation et Animation 3D Avril 2020
Le prototype Camera(6/8)
49 Modélisation et Animation 3D Avril 2020
Le prototype Light
Comme dans la réalité, pour voir la
scène il faut de la lumière...
50 Modélisation et Animation 3D Avril 2020
Le prototype Light
Description:
Si il fait noir je met de la lumière !
// [Link]([Link])
[Link]([Link])
[Link] propose plusieurs types d'éclairage ( AmbientLight ,DirectionalLight ,
PointLight , SpotLight ), nous allons en voir 3 :
La "lumière ambiante" qui permet d'éclairer tous les objets d'une scène de façon
uniforme. Pour définir une lumière ambiante, il faut utiliser le constructeur
"AmbientLight". Ce constructeur prend un paramètre, la couleur de la lumière.
Exemple d'utilisation:
var lightAmb = new [Link] (0xffffff) ;
51 Modélisation et Animation 3D Avril 2020
Le prototype Light
Description:
Le "point lumineux" est une source de lumière ponctuelle. Cette source émet de
la lumière à partir d'un point dans toutes les directions de l'espace. Pour créer un
"point lumineux" vous devez utiliser le constructeur "PointLight". Ce
constructeur prend 3 paramètres : la couleur de la lumière, l'intensité de la
lumière, la distance au-delà de laquelle l'intensité de la lumière devient nulle.
Exemple :
var lightPoint = new [Link] (0xffffff, 1, 100) ;
Pour placer votre point lumineux dans votre scène, il faudra utiliser la méthode set
(exemple : "[Link] (30,40,50) ;")
52 Modélisation et Animation 3D Avril 2020
Le prototype Light
Description:
Le "spot" est comme son nom l'indique un spot. Le constructeur ("SpotLight")
peut prendre jusqu'à 5 paramètres, mais nous n'en verrons ici que 4 : la couleur de
la lumière, l'intensité de la lumière, la distance au-delà de laquelle l'intensité de la
lumière devient nulle, l'angle d'ouverture du spot (par défaut cet angle est de π/3 et
il est au maximum de π/2)
Exp: "var lightSpot = new [Link] (0xffffff, 1, 100, [Link]/4) ;"
Ensuite, vous devez placer votre spot à l'aide de la méthode set
("[Link] (30,40,50) ;") .
53 Modélisation et Animation 3D Avril 2020
Le prototype Light
Description:
Les objets de type "SpotLight" possède plusieurs attributs, en voici un :
target => permet de définir la "cible" du spot . Par défaut le spot est dirigé vers le
centre de la scène. Si par exemple vous voulez éclairer un objet que vous avez
nommé "sph", il suffira d'écrire "[Link]=sph".
Les objets de type "SpotLight" possède plusieurs attributs, en voici un :
target => permet de définir la "cible" du spot . Par défaut le spot est dirigé vers le
centre de la scène. Si par exemple vous voulez éclairer un objet que vous avez
nommé "sph", il suffira d'écrire "[Link]=sph".
54 Modélisation et Animation 3D Avril 2020
Le prototype Light
55 Modélisation et Animation 3D Avril 2020
Le prototype Mesh
Définition:
un mesh c’est la représentation informatique d’un objet 3D.
Or un objet est constitué d’un ensemble de points dans
l’espace. En OpenGL, un point 3D est appelé un vertex ! Un
mesh est donc composé d’un ensemble de vertex. On stocke
ces vertex dans un ordre défini afin d’obtenir une connexité.
Généralement on conserve les vertex par 3 afin qu’il forme
un triangle. Vous avez déjà sûrement entendu parler du
nombre de polygones qu’une carte graphique est capable de
dessiner et bien ce sont ces fameux triangles !
56 Modélisation et Animation 3D Avril 2020
Le prototype Mesh
Description:
Prototype pour décrire une géométrie et son aspect;
Constructeur: Mesh(geometry, material):
geometry: instance de Geometry;
material: instance de Material.
Propriétés: geometry, material
57 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
Description:
Prototype de base contenant toutes les données nécessaires à décrire un modèle
3D.
Propriétés importantes:
left : tableau de sommets ;
colors: tableau de couleurs par sommets;
faces: tableau de triangles;
faceVertexUvs: tableau de coordonnées textures;
boundingBox: boîte englobante;
boundingSphere: sphère englobante.
58 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
Méthodes principales:
computeFaceNormals() : calcule les normales par face;
computeVertexNormals() : normales par sommet;
computeBoundingBox() : calcule la boîte englobante;
computeBoundingSphere() : calcule la sphère englobante.
59 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
60 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
61 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
62 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
63 Modélisation et Animation 3D Avril 2020
Le prototype Geometry
64 Modélisation et Animation 3D Avril 2020
Le prototype Material
Description:
Prototype décrivant un matériau (conditionne l’apparence de l’objet) pouvant
être de plusieurs types:
MeshBasicMaterial: aspect <<fil de fer>> ou <<plat>>;
MeshLambertMaterial: illumination par sommet selon le modèle lambertien;
MeshPhongMaterial : illumination par pixel selon le modèle de Phong;
ShaderMaterial: utilisation de son propre shader.
Propriétés notables:
opacity: 0 transparent, 1 opaque;
transparent : true si transparent (aspect contrôlé par opacity).
65 Modélisation et Animation 3D Avril 2020
Le prototype Material
Description:
Le mot-clé material détermine le rendu de la surface d'un objet
ainsi que son interaction avec la lumière (comme en WebGL).
Un mesh permet d'associer une géométrie à un material. Un
MeshBasicMaterial ne nécessite pas de lumière pour le rendu
(autres possibilités : MeshLambertMaterial et
MeshPhongMaterial).
Remarque : Le rendu <<fil-de-fer>> , conseillé pour le debug, est
possible par l'option wireframe: true.
Représentation en fil de
fer de trois volumes
66 Modélisation et Animation 3D Avril 2020
Le prototype Material
MeshLambertMaterial:
Ce matériau est à utiliser que vous désirez un objet d’aspect mat (contraire de
brillant), le constructeur prend en paramètre un objet JavaScript ("var
sphMat=new [Link]({}) ;").
Voici une liste (non exhaustive) des attributs possibles de cet objet JavaScript :
• color : donne la couleur du matériau (exemple : color: 0x00dddd)
• ambient : Cette notion est assez difficile à expliquer, mais pour simplifier, on
pourra dire que cet attribut défini
la couleur d'un objet quand il se trouve à l'ombre, par défaut cette couleur est
blanche (ambient :
0xffffff).
67 Modélisation et Animation 3D Avril 2020
Le prototype Material
MeshLambertMaterial (suite) :
• emissive : défini la couleur émise par un matériau (attention cela ne veut pas dire
que votre objet est "source primaire" de lumière, c'est juste que cette couleur n'est
pas modifiée par les sources de lumière extérieures), par défaut cette couleur est
noire (emissive : 0x000000).
• transparent : défini si un objet est transparent (transparent : true) ou opaque
(transparent : false),
par défaut l'objet est opaque.
• opacity : si l'objet est transparent, opacity définit le degré de transparence. La
valeur est comprise entre 0
(complètement transparent) et 1 (complètement opaque).
68 Modélisation et Animation 3D Avril 2020
Le prototype Material
MeshPhongMaterial:
Ce matériau est à utiliser que vous désirez un objet d’aspect brillant, le
constructeur prend en paramètre un objet JavaScript ("var sphMat=new
[Link]({}) ;"). Voici une liste (non exhaustive) des attributs
possibles de cet objet JavaScript :
• color : même chose que ci-dessus
• ambient : même chose que ci-dessus
• emissive : même chose que ci-dessus
• transparent : même chose que ci-dessus
• opacity : même chose que ci-dessus brillant (la valeur par défaut est de 30).
69 Modélisation et Animation 3D Avril 2020
Le prototype Material
MeshPhongMaterial (suite):
• specular : défini la couleur de la lumière émise par réflexion spéculaire ! Pour
être un peu plus concret et un peu plus pratique, si cette couleur est identique à la
couleur définie pour l'attribut "color", vous aurez alors un aspect plutôt métallique
pour le matériau. Si la couleur définie pour cet attribut "specular" tire plutôt sur le
gris,
votre matériau aura un aspect "plastique".
• shininess : cette attribut défini la "brillance" de votre matériau, plus la valeur
sera grande plus votre matériau paraîtra brillant (la valeur par défaut est de 30).
70 Modélisation et Animation 3D Avril 2020
Le prototype Material
71 Modélisation et Animation 3D Avril 2020
Le prototype Material
72 Modélisation et Animation 3D Avril 2020
Le prototype Material
73 Modélisation et Animation 3D Avril 2020
Récap
74 Modélisation et Animation 3D Avril 2020
Récap
75 Modélisation et Animation 3D Avril 2020
Récap
76 Modélisation et Animation 3D Avril 2020
Récap
77 Modélisation et Animation 3D Avril 2020
Récap
78 Modélisation et Animation 3D Avril 2020
Récap
79 Modélisation et Animation 3D Avril 2020
Récap
(geometry : la structure) (material : le look)
80 Modélisation et Animation 3D Avril 2020
//…//
81 Modélisation et Animation 3D Avril 2020
