CHAPITRE 5 MODÉLISATION 3D Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 14 octobre 2015 INF5071 - Infographie
MODÈLE, VUE ET PROJECTION Pour visualiser une scène en 3D sur un écran 2D, il existe une façon très pratique de diviser les transformations à appliquer aux objets; Disons qu'on décrit un objet complexe en coordonnées cartésiennes (avec l'origine comme repère); Alors on applique les trois transformations suivantes : Modèle : on applique d'abord différentes transformations à des objets simples (homothéties, rotations, translations, etc.), pour le localiser dans l'espace; Vue : on décrit l'angle avec lequel on souhaite observer, et la position depuis laquelle on observe (caméra); Projection : on décrit la façon d'observer la scène, généralement à l'aide d'une projection perspective ou orthographique.
OBJET Dans un premier temps, on doit décrire la géométrie de l'objet qu'on souhaite afficher à l'écran; Celle-ci est décrite par un ensemble de triangles ou quadrilatères, auxquels on applique une texture. (source: http://www.opengl-tutorial.org/ )
MODÈLE On peut appliquer différentes transformations à l'objet (translations, réflexions, rotations, homothéties, transvections, etc.). La nouvelle géométrie de l'objet ainsi obtenue est appelée modèle. (source: http://www.opengl-tutorial.org/ )
VUE Ensuite, on positionne la caméra, c'est-à-dire la vue qu'on souhaite avoir de la scène; Les transformations inverses sont importantes, car en réalité, la vue est obtenue en déplaçant le modèle, en inversant les opérations (translations et rotations, principalement) : (source: http://www.opengl-tutorial.org/ )
PROJECTION Finalement, on transforme la scène en lui appliquant une projection; Très souvent, il s'agit d'une projection perspective, mais on peut en imaginer autant que l'on souhaite : (source: http://www.opengl-tutorial.org/ )
RÉSULTAT Puis on affiche le résultat de la projection sur une face du cube : (source: http://www.opengl-tutorial.org/ )
LE LOGICIEL BLENDER Il s'agit d'un logiciel open-source permettant entre autres de modéliser des objets en 3D; Il permet aussi de créer des animations; Quelques liens utiles : Le site officiel : http://www.blender.org/ Dépôt Git : http://git.blender.org/gitweb/ Référence des raccourcis : http://download.blender.org/documentation/blenderhotkeyreference.pdf
TUTORIELS Neal Hirsig, de Tufts University, a produit un cours complet sur l'utilisation de Blender; Les ressources se trouvent sur http://gryllus.net/blender/3d.html et sont aussi téléchargeables sur iphone/ipad via itunes; Il explique en détails toutes les opérations effectuées, de façon très pédagogique. Exemple (array modifier) : https://vimeo.com/46061877.
INTERFACE DE BASE
MAILLAGES DE BASE Un maillage est un ensemble de sommets, d'arêtes et de faces organisées; Généralement, on peut facilement modeler n'importe quel objet à partir de ces maillages de base.
OPÉRATIONS DE BASE Il est très simple de modifier un maillage à l'aide d'opérations élémentaires : Translation (touche G pour grab); Changement d'échelle (touche S pour scale); Rotation (touche R pour rotate);
MANIPULATION DE MAILLAGES Il est possible d'appliquer ces mêmes opérations aux sommets, aux arêtes et aux faces :
MODÉLISATION D'UNE TABLE En utilisant seulement quelques opérations, on peut rapidement obtenir une scène simple comme celle ci-bas :
OPÉRATIONS UTILISÉES Zoom (touches + et -); Rotations de la vue (trackpad); Vues de côté et de haut (touches 1, 3 et 7 du Numpad); Suppression d'objets (touche X); Ajout d'objet (touche SHIFT-A); Mouvement d'objets (touche G pour grab); Redimensionnement (touche S pour scaling); Extrusion de sommets (touche E); Sélection en boîte (touche B); Duplication d'objets (touche SHIFT-D).
MODÉLISATION D'UN PION En utilisant seulement quelques opérations, on peut rapidement modéliser un pion (pièce d'échecs) :
OPÉRATIONS UTILISÉES Ajout d'une image en arrière-plan; Ajout d'une courbe NURBS; Extrusion de sommets (touche E), suivie d'un déplacement contraint en direction de l'axe Z (touche Z); d'un redimensionnement (touche S); ou d'une combinaison des deux.
MODÉLISATION D'UN CHEMIN On peut également modéliser un chemin bordé de briques :
CHARGEMENT D'UN MODÈLE Les projets Blender et three.js étant tous les deux open-source, les développeurs ont rapidement proposé un greffon (plugin) permettant de convertir une scène Blender en format JSON; Il y a certaines limites dans l'exportation d'une scène, mais cela fonctionne généralement très bien. Dans un premier temps, il faut installer le greffon qui se trouve dans le dépôt de three.js et copier les fichiers pertinents dans le répertoire addon de Blender; Les instructions se trouvent à https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender
EXPORTATION D'UN CHÂTEAU
FICHIER JSON { "metadata": { "generator": "io_three", "version": 4.3, "type": "Object", "sourcefile": "Castle_Modeling_Complete.blend" }, "images": [], "object": { "uuid": "6870F400-16EF-4EF5-88B4-DB981146181E", "type": "Scene", "children": [{ "type": "Mesh", "name": "Castle Walls", "uuid": "0E1AE968-2778-30C2-AE7D-601454D93C1E", "matrix": [0,0,0.5,0,-3e-06,4.75,0,0,-1,-1e-06,1e-06,0,0,5.14355,0,1], "visible": true, "castshadow": false, "receiveshadow": false, "geometry": "31F9DD3C-2200-3149-8360-C87C703AA631" },{ "type": "Mesh", "name": "Catwalk", "uuid": "C65B17F3-5D17-383D-BB0D-6E1E2B03CAB3", "matrix": [0,0,0.5,0,-3e-06,4.75,0,0,-1,-1e-06,1e-06,0,-6e-06,10.1436,0.84286,1], "visible": true, "castshadow": false, "receiveshadow": false, "geometry": "04FD17AD-EA86-3F58-AB8A-9F17F83D4831" },{ "type": "Mesh", "name": "Cornice Blocks", "uuid": "E2CBA763-6C6A-3C0C-A846-9BCABB30AAF7",
CHARGEMENT DE LA SCÈNE // Variables globales var scene; var camera; var distance = 80; // Initialisation de la scène initializescene(); // Animation de la scène animatescene(); function initializescene(){ // Initialisation du canvas renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setclearcolor(0x000000, 1); canvaswidth = 800; canvasheight = 600; renderer.setsize(canvaswidth, canvasheight); document.getelementbyid("canvas").appendchild(renderer.domelement); // Initialisation de la scène et de la caméra scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, canvaswidth / canvasheight, 1, 1000); camera.position.set(0, distance Voir / 2, le distance); résultat camera.lookat(scene.position); scene.add(camera); // De la lumière var directionallight = new THREE.DirectionalLight(0xffffff, 0.5); directionallight.position.set(0, 100, 0); scene.add(directionallight); var ambientlight = new THREE.AmbientLight(0xF0F0F0); scene.add(ambientlight);
AJOUT DE MATÉRIAUX On constate que dans la scène précédente, les matériaux apparaissent avec une couleur aléatoire; Il est possible d'ajouter un matériau en parcourant l'objet chargé : // Chargement du château var loader = new THREE.ObjectLoader(); loader.load('/assets/castle.json', function(object) { scene.add(object); object.traverse(function(child) { if (child instanceof THREE.Mesh) { var color; if (child.name === "Plane") { color = 0x004000; } else { color = 0x606060; } child.material = new THREE.MeshLambertMaterial({color: color}); } }); });
CHARGEMENT DE LA SCÈNE AVEC MATÉRIAUX // Variables globales var scene; var camera; var distance = 80; // Initialisation de la scène initializescene(); // Animation de la scène animatescene(); function initializescene(){ // Initialisation du canvas renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setclearcolor(0x000000, 1); canvaswidth = 800; canvasheight = 600; renderer.setsize(canvaswidth, canvasheight); document.getelementbyid("canvas").appendchild(renderer.domelement); // Initialisation de la scène et de la caméra scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, canvaswidth / canvasheight, 1, 1000); camera.position.set(0, distance Voir / 2, le distance); résultat camera.lookat(scene.position); scene.add(camera); // De la lumière var directionallight = new THREE.DirectionalLight(0xffffff, 0.5); directionallight.position.set(0, 100, 0);