Cours Modélisation Et Animation 3D

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.

2D3D
Donnnés 2D (RasterData) Visualisation en 3D
MOTEUR
GRAPHIQUE

Systèmes de simulation 3D
Domaines d’application de la technologie 3D:
Militaire
Loisirs
Santé
Agriculture

Militaire
Loisirs
Santé
Agriculture

Militaire
Loisirs
Santé
Agriculture

Militaire
Loisirs
Santé
Agriculture

Introduction à WebGl et Three.js
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.

Introduction à WebGl et Three.js
la 3D, c'est maintenant dans votre
navigateur !

Introduction à WebGl
WebGl
Three.js
Three.js Exemples

Three.js Exemples

Three.js Exemples

Three.js Exemples

Three.js Exemples

Qu’est-ce que Three.js?
Three.js 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.

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)

 Three.js 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 three.js, dont une que vous devez inclure dans
votre projet:
 three.js
 three.min.js
 three.module.js

Fonctionnalités:
Three.js 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 …

Prérequis:
Connaître et savoir utiliser le HTML et le CSS

Maîtriser les grands principes du JavaScript

Caractéristiques de three.js
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.

Exemple:

Exemple:

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.

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.

Three.js 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.

Préparation du document html

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.

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.
Créer la scène
Graphe de scène:
scene
camera cube

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().

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(…)!

Animer la scène

Hiérarchie des prototypes de three.js

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.

Prototypes principaux:

Le prototype Object3D
Description:
Prototype de base pour tous les nœuds des graphes de scène Three.js 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!

Le prototype Object3D
Ordre d’application:
1. Translation;
2. Rotation;
3. Mise à l’échelle.
 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.

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.

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

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.

Le prototype Camera
Camera perspective: la zone visualisée est une pyramide

tronquée

Le prototype Camera
Camera perspective

Le prototype Camera(5/8)

Le prototype Camera(6/8)

Le prototype Light
Comme dans la réalité, pour voir la

scène il faut de la lumière...

Le prototype Light
Description:
Si il fait noir je met de la lumière !

// player.scene.add(Player.light)
player.scene.add(Player.light)
 Three.js 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 THREE.AmbientLight (0xffffff) ;
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 THREE.PointLight (0xffffff, 1, 100) ;
Pour placer votre point lumineux dans votre scène, il faudra utiliser la méthode set
(exemple : "lightPoi.position.set (30,40,50) ;")

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 THREE.SpotLight (0xffffff, 1, 100, Math.PI/4) ;"
Ensuite, vous devez placer votre spot à l'aide de la méthode set
("lightSpo.position.set (30,40,50) ;") .

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 "lightSpot.target=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 "lightSpot.target=sph".

Le prototype Light

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 !

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

Le prototype Geometry
Description:
Prototype de base contenant toutes les données nécessaires à décrire un modèle

3D.
 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.

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.






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).

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

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 THREE.MeshLambertMaterial({}) ;").
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).

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).

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
THREE.MeshPhongMaterial({}) ;"). 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).

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).




Récap

Récap

Récap

Récap

Récap

Récap

Récap
(geometry : la structure) (material : le look)

//…//

Cours Modélisation Et Animation 3D

Transféré par

Informations du document

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

Cours Modélisation Et Animation 3D

Transféré par

Droits d'auteur :

Formats disponibles

DIRECTION DE L’ENSEIGNEMENT UNIVERSITAIRE

Les représentations 3D sont aujourd'hui au cœur de l'univers

2 Modélisation et Animation 3D Avril 2020

Les moteurs 3D sont la base de toutes ces utilisations. Il existe

3 Modélisation et Animation 3D Avril 2020

Donnnés 2D (RasterData) Visualisation en 3D

4 Modélisation et Animation 3D Avril 2020

Domaines d’application de la technologie 3D:

5 Modélisation et Animation 3D Avril 2020

Domaines d’application de la technologie 3D:

6 Modélisation et Animation 3D Avril 2020

Domaines d’application de la technologie 3D:

7 Modélisation et Animation 3D Avril 2020

Domaines d’application de la technologie 3D:

8 Modélisation et Animation 3D Avril 2020

WebGL est une spécification d’interface de programmation de 3D

données au format JSON, de l’accélération matérielle pour les calculs et le

9 Modélisation et Animation 3D Avril 2020

10 Modélisation et Animation 3D Avril 2020

14 Modélisation et Animation 3D Avril 2020

15 Modélisation et Animation 3D Avril 2020

16 Modélisation et Animation 3D Avril 2020

17 Modélisation et Animation 3D Avril 2020

18 Modélisation et Animation 3D Avril 2020

Three.js est une bibliothèque JavaScript basée sur le moteur

19 Modélisation et Animation 3D Avril 2020

Cette bibliothèque peut-être utilisée avec la balise canvas du HTML5, elle

 Animation avec squelette

20 Modélisation et Animation 3D Avril 2020

 Three.js simplifie l'utilisation de WebGL.

22 Modélisation et Animation 3D Avril 2020

Three.js accélère le développement de rendu en 3 dimensions grâce à ses

 Un ensemble de fonctions mathématiques pour la manipulation des

23 Modélisation et Animation 3D Avril 2020

Connaître et savoir utiliser le HTML et le CSS

24 Modélisation et Animation 3D Avril 2020

 Bibliothèque javascript de graphes de scène crée en 2010;

 Prototypes (classes) dans l’espace de nommage THREE;

25 Modélisation et Animation 3D Avril 2020

26 Modélisation et Animation 3D Avril 2020

27 Modélisation et Animation 3D Avril 2020

 Graphe de scène: Organisation hiérarchique des différents éléments

Une structure arborescente:

 Représentée par un arbre

28 Modélisation et Animation 3D Avril 2020

Propriétés des nœuds et champs:

 Un nœud possède des propriétés;

29 Modélisation et Animation 3D Avril 2020

Etapes de la création d’une scène:

1. Préparer le document html à afficher dans le navigateur;

30 Modélisation et Animation 3D Avril 2020

31 Modélisation et Animation 3D Avril 2020

 Eléments nécessaires : scène, caméra, zone de rendu;

32 Modélisation et Animation 3D Avril 2020

 Création d’un cube avec une géométrie et un matériau;

34 Modélisation et Animation 3D Avril 2020

 Création de la fonction render():

35 Modélisation et Animation 3D Avril 2020

36 Modélisation et Animation 3D Avril 2020

37 Modélisation et Animation 3D Avril 2020

38 Modélisation et Animation 3D Avril 2020

On notera que la lumière ainsi que les meshs (objets) et la

39 Modélisation et Animation 3D Avril 2020

40 Modélisation et Animation 3D Avril 2020