Modéliser et afficher un modèle 3D sur un navigateur web

2

Bonjour chers addixwarriors et visiteurs !
Je vais à travers cet article vous partager une de mes passions dans le domaine de l’informatique : la 3D.
L’objectif de cet article sera de modéliser et d’afficher un modèle 3D sur un navigateur web.

Un avant goût !

 

Commençons !

Depuis quelques années, avec la création du WebGL, il est possible d’afficher des éléments graphiques dans un navigateur web. Pour être précis, depuis seulement Septembre 2009. La 3D en informatique a toujours été l’apanage des logiciels lourds et c’est dans l’optique de diversifier son utilisation sur d’autres plateformes (dont le web, et plus tard le mobile) que WebGL a été créé. Citant l’article Wikipédia officiel de la technologie WebGL, «WebGL permet d’afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d’un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d’où le fait que cette technologie reste assez méconnue du grand public » (https://fr.wikipedia.org/wiki/WebGL).

Côté hardware et rendu, lorsqu’un élément graphique de type WebGL est inséré dans une page HTML, le navigateur web exécute un programme Javascript utilisant l’interface WebGL, celle-ci appelant le pilote OpenGL ES du système d’exploitation de l’ordinateur, qui se chargera de faire les calculs nécessaires pour le rendu de la scène.

Juste une précision ! Un modèle 3d, c’est des données ! La position de chaque point du modèle, que l’on appelle également ‘maillage 3D’ ou ‘mesh’ en anglais, son orientation, sa taille, les ‘materials’ du modèle (couleurs, textures…) et plein d’autres caractéristiques composent un modèle 3D. Et il y a énormément de points pour constituer un modèle 3D plus ou moins réaliste et affiné. Pour l’afficher sur notre navigateur web et permettre au processeur de calculer aisément, il va lui falloir un fichier Json avec toutes ces données.

Nos outils : Three.js, Blender, MakeHuman et… nous-mêmes !

La technologie que nous utiliserons pour afficher notre modèle sur le navigateur s’appelle Three.js. C’est une bibliothèque JavaScript, surcouche de WebGL, permettant d’écrire du code de génération 3D en JavaScript.

Pour interagir avec le modèle (une piste pour aller plus loin dans ce tutoriel), nous utiliserons des moyens conventionnels tels que des boutons, des drag-n-drop, mais aussi du SVG, permettant de dessiner ou de faire bouger des objets en 2D, ce qui se répercutera sur nos objets en 3D.

Avant l’import de l’objet dans le navigateur, il faudra bien évidemment créer cet objet 3D. C’est l’objet des deux tutoriels vidéo suivants, à visualiser dans l’ordre. Pour le concevoir, nous utiliserons deux logiciels, l’un très connu et l’autre un peu moins : Blender et MakeHuman.
Voici leurs liens de téléchargement :
https://www.blender.org/download/
http://www.makehuman.org/download.php

On peut démarrer ! Dans un premier temps, je vous invite à suivre ces mini tutoriels vidéo dans le but de générer un modèle 3D en format… Json.

Tutoriel vidéo 1 : créer un modèle humain avec MakeHuman

A la fin de ce tutoriel donc, nous avons en notre possession un fichier mhx2, permettant d’importer le modèle humain dans Blender.
Voici les liens à lire au cas où vous auriez besoin d’informations sur la prise en charge du format mhx2 (visibles dans la vidéo) :
https://thomasmakehuman.wordpress.com/mhx2-documentation/preparation/
https://thomasmakehuman.wordpress.com/mhx2-documentation/

Tutoriel vidéo 2 : affiner le modèle humain dans Blender et en extraire une partie (la tête dans ce tutoriel)

A la fin de ce tutoriel vidéo, vous VOILA 🙂 devenus un(e) génie de la modélisation 3D… j’exagère !
Vous êtes en possession de votre fichier json de données d’affichage du modèle !
Voici le lien de l’exporter de Blender vers Three.js (format json) au cas où vous en auriez besoin également :
https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

N.B : Avant d’importer le modèle en format json dans Blender, il faut veiller à fusionner (merge) le modèle, pour n’en avoir qu’un. Pour cela, il faut cliquer sur le modèle dans l’arborescence à droite, puis sur la vue, faire une combinaison des touches Ctrl+J.

Modélisation et affichage du modèle 3D dans un navigateur web

Voici un morceau d’exemple de fichier json obtenu de l’export Blender vers Three.js (le fichier peut comme vous vous en doutez être très volumineux) :

"metadata":{
        "materials":7,
        "normals":11571,
        "vertices":11571,
        "uvs":1,
        "type":"Geometry",
        "generator":"io_three",
        "version":3,
        "faces":11018
    },
    "animations":[{
        "hierarchy":[{
            "parent":-1,
            "keys":[{
                "scl":[1,1,1],
                "time":0,
                "pos":[0,16.7209,0.11917],
                "rot":[0.751868,0,-0,0.659314]
            },{
                "scl":[1,1,1],
                "time":0.041667,
                "rot":[0.751868,0,-0,0.659314],
                "pos":[0,16.7209,0.11917]
            },{

 

Nous allons pouvoir l’afficher sur le navigateur. Attention par contre, il faut que WebGL soit supporté par celui-ci. C’est le cas de la plupart des navigateurs récents.

Vous pouvez soit écrire le code dans une simple page Html avec votre bloc-notes ou Notepad, ou au contraire créer un projet ASP.NET avec Visual Studio ou… créer le type de projet que vous préférez (l’essentiel étant d’avoir le code dans une page HTML). Par contre, le navigateur web ne pouvant pas accéder aux ressources (fichier json, images, modèles 3D) sur l’ordinateur de chaque client, il nous faut un serveur pour les héberger et c’est pour cette raison que je créerai un projet ASP.NET MVC sous Visual Studio. Vous pouvez par exemple très bien le faire sur un web server sous Linux avec le package http-server de Node.js.

Si vous ne l’aviez pas déjà fait avant (en téléchargeant le projet source de l’exporteur de Blender vers Three.js), téléchargez three.js sur le site officiel (https://threejs.org/), lien « Download » à gauche. Vous devriez avoir un fichier zip de 150 Mo, duquel vous allez extraire le fichier JavaScript Three.js (dans le sous dossier build), qui contient tout le code pour l’affichage des objets 3D sur le navigateur web.

Ajoutez-le au dossier Script de votre projet web, puis comme décrit sur la page de Three.js ;
Ajoutez également le fichier Json généré précédemment dans un dossier de votre choix, par exemple « Home », comme dans la capture d’écran suivante :

Ecrivez ensuite le code suivant pour afficher l’objet 3D dans la scène dans une page HTML (tous ces fichiers sont en pièces jointes en fin d’article) :

<script src="~/Scripts/three.js"></script>
<script type="text/javascript">

// Nous définissons nos objets (scène 3D, caméra, gestionnaire de rendu,
maillage 3D, chargeur de maillage, lumières...)
var scene, camera, renderer, mesh, loader, light, light2;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.01;

function init() {
 scene = new THREE.Scene();

initMesh();
 initLights();
 initCamera();
 initRenderer();

document.body.appendChild(renderer.domElement);
 }

function initMesh() {
 loader = new THREE.JSONLoader();
 var textureLoader = new THREE.TextureLoader();
 
 loader.load('./mymesh.json', function (geometry, materials) {
 mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
 mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 mesh.translation = THREE.GeometryUtils.center(geometry);
 scene.add(mesh);
 camera.lookAt(mesh.position);
 light2.lookAt(mesh.position);
 });
 }

function initLights() {
 light = new THREE.AmbientLight(0x000000);
 scene.add(light);
 light2 = new THREE.DirectionalLight(0x000000, 1);
 scene.add(light2);
 }
 
 function initCamera() {
 camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
 camera.position.set(0, 1, 5);
 }

function initRenderer() {
 renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(WIDTH, HEIGHT);
 }

function rotateMesh() {
 if (!mesh) {
 return;
 }
mesh.rotation.y -= SPEED;
 }

function render() {
 requestAnimationFrame(render);
 rotateMesh();
 renderer.render(scene, camera);
 }

init();
 render();

</script>

 

Brève explication

Comme je vous expliquais dans les vidéos, une scène 3D est constituée de plusieurs éléments, qu’on instancie et qu’on manipule dans le code Javascript :

  • Le mesh (maillage 3D), que l’on charge à partir du fichier json importé de Blender dans la fonction initMesh()
  • L’éclairage, ici constitué d’une lumière ambiante et d’un éclairage directionnel dans la fonction initLights()
  • La caméra, pour visualiser la scène, dans la fonction initCamera(). On l’oriente vers le modèle avec la fonction lookAt().
  • Le gestionnaire de rendu, instancié dans la fonction initRenderer() qui nous calcule notre scène.
    Grâce à la fonction rotateMesh(), nous faisons tourner notre modèle sur l’axe y.
  • Enfin, dans la fonction render(), il y a le code minimal pour rafraichir la fenêtre à chaque frame de rendu.

La démo !

 

Suite du tutoriel… par vous !

Deux pistes sont possibles auxquelles je pense pour améliorer ce tutoriel :

  • Avec la documentation disponible sur Three.Js et Blender, il serait possible d’utiliser les vraies textures de Blender, plutôt que le MeshNormalMaterial utilisé ici. En effet, pour ce tutoriel, j’utilise une texture orangée au lieu d’une vraie texture humaine. Essayez, le modèle n’en sera que plus beau !
  • Dans les vidéos de modélisation sur Blender, je vous montrais également comment ajouter des animations à votre modèle. Vous avez la possibilité des les appeler dans le code Javascript, et d’animer votre modèle avec son squelette et des interactions utilisateurs !

Enfin, nous sommes arrivés au bout !

Vous trouverez-ci dessous un fichier zip des ressources utilisées pour ce tutoriel :
http://blog.addixware.fr/wp-content/uploads/2017/01/RessourcesTuto.zip

Laissez un message dans les commentaires si vous avez besoin de plus d’infos !

Merci d’avoir suivi ce tutoriel et à bientôt !

Share.

About Author

Développeur Microsoft .NET et Web, Modéleur et concepteur 3D, Passionné de nouvelles technologies, toujours en quête de nouveaux défis.

2 commentaires

  1. Hi,
    I am a new user of 3D programming , I have used ressource folder and renamed it Script. when I compile your script I didn’t obtain any thing except the page title
    Can you help me please?

    • Hi Meriem,
      Welcome to the 3D programming world 🙂 What kind of web projects do you use for this tutorial ? ASP.NET, Node.js or another one ?

      You need one server to store resources like 3D textures. Cna you also send me a screen capture of your web pag result ?

      Thank you.

      Chérif

Leave A Reply