BabylonJS et 3DsMax Part 1

Depuis quelques temps, je vous fais part de la vision  de l’artiste et de la vie en production d’une démo Babylon.JS. Il était plus que temps d’enchaîner sur une suite d’articles un peu plus techniques afin de vous dévoiler mon workflow et mes astuces pour créer une scène 3D avec ce formidable framework qu’est Babylon.JS. Nous commencerons donc cette série par l’origine d’un projet, la récupération de la modélisation, et l’optimisation des meshes en vue d’un usage pour le web.

Do you BabylonJS?

Tout d’abord, il va falloir télécharger tout ce qu’il faut pour pouvoir travailler sereinement. Commençons par télécharger la version d’essai de 3dsMax d’Autodesk à cette adresse : http://www.autodesk.fr/products/3ds-max/overview

Installez la version d’essai, puis rendez-vous sur le site de Babylon.JS, afin de télécharger le plugin pour Max, juste ici et pas plus loin :

https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/3ds%20Max/Max2Babylon-0.4.2.zip

Choisissez l’option Raw, laissez l’archive se télécharger, puis faites un clic droit dessus, allez dans propriétés, sélectionnez l’option “Débloquez”, validez, puis, finalement extrayez le répertoire correspondant à votre version de 3dsMax dans votre sous-répertoire Assemblies du dossier courant du logiciel d’Autodesk (généralement, si vous n’êtes pas un pervers, c’est C:\Program Files\Autodesk\3ds Max2016\bin\assemblies). Vous voilà fin prêt.

Note : J’utilise 3dsMax 2013 en version anglaise.

C’est quoi, cette scène que tu me fais ?

Je me place dans une optique de production malgré tout, dans cet article. Donc, je ne vais pas vous parler des méthodes de modélisation, mais plutôt partir d’un modèle 3D récupéré, parce qu’on y trouve des contraintes assez fortes. J’ai décidé de créer une démo autours d’un objet de luxe très célèbre, la fameuse montre Tag Heur Monaco (un de mes fantasmes de designer). Je me suis donc adressé à mon fournisseur officiel de meshes, à savoir TurboSquid et j’ai acheté ce modèle : http://www.turbosquid.com/3d-models/watch-monaco-max/538904

TH

La Monaco rendue avec Vray

J’ai donc facilement gagné une dizaine d’heures de modélisation. Mais nous allons voir qu’un modèle 3D, c’est une vue d’artiste, avec des parti-pris de production qui sont souvent assez éloignés du contexte d’utilisation. Analysons rapidement le modèle sorti du site:

D’abord, l’unité est en pouces. Personnellement, je travaille généralement en mètre pour la compatibilité avec les moteurs physiques et d’éclairages actuels, même si ce n’est parfois pas pratique avec 3ds Max (problèmes de clipping de caméra et de précision notamment). Une conversion est potentiellement à prévoir, même si ce n’est pas indispensable dans une démo orientée objet. La mise à l’échelle sous-entend pas mal de risques, au demeurant, avec des objets liés entre eux qui vont hériter du scaling de l’objet ancêtre. Pour ma part, j’ai fait quelques tests en ce sens et comme il y avait pas mal de casse, j’ai décidé de rester en pouces.

Le moteur de base utilisé lors de la création de la scène est VRay. C’est un très bon moteur comme nous le verrons plus loin, mais ce n’est pas un plugin par défaut avec 3ds (et assez couteux de surcroit). Cela produit pas mal de messages d’erreurs en tous genre, en plus de rendre la vue des matériaux complètement caduque si vous utilisez le moteur de rendu built-in Mental Ray. Par dessus le marché, VRay n’est pas compatible avec Babylon.JS. Il va donc falloir intervenir un peu à ce sujet.

Le Material Editor caduque

Le Material Editor caduque

Le nombre de polygones : Alors, oui, cet objet a été modélisé dans l’optique de faire de l’image fixe. Cela implique que le nombre de faces n’était pas le critère le plus important au moment de modéliser. L’artiste à donc fait un maillage polygonal assez simple, sur lequel il a appliqué une multiplication de faces via le modificateur MeshSmooth. Ca marche, même si ce n’est pas super correct (pas comme un NURBS, par exemple) et le résultat visuel est acceptable au mépris du nombre de faces. On est donc à 500 000 faces pour 3000 objets, avec des pics sur certains objets comme sur la couronne de réglages qui compte pratiquement 90 000 faces!!! Pas vraiment cohérent, ni pertinent pour ce que nous allons faire du modèle.

Géométrie imposante

Géométrie imposante

L’optimisation.

Commençons par rendre le visuel utilisable et repassons sur le moteur de rendu par défaut. Il suffit d’aller dans l’onglet Rendering->Render Setup, puis dans l’onglet Common, scroller tout en bas et choisir dans le panneau Assign Renderer l’entrée Default Scanline Renderer. Pas d’amélioration immédiate, nous allons donc également réinitialiser les matériaux.

Note: j’utilise de préférence le mode compact, plutôt que le mode Slate dans l’éditeur de matériaux de 3dsMax, mais les entrées sont similaires dans les deux modes.

Allez dans l’éditeur de matériaux (onglet Rendering->Material Editor), puis dans l’onglet Utilities et sélectionnez l’entrée Reset Material Editor slots. Cela remet à zéro les matériaux disponibles dans l’éditeur sans toutefois supprimer les matériaux affectés aux objets de la scène. Peu importe. Sélectionnez tout les objets de la scène (dans un viewport, onglet Edit-> Select all), puis dans l’éditeur de matériaux, sélectionnez le premier slot disponible et affectez le (par glisser/déposer), aux objets sélectionnés. Voilà, les matériaux sont propres.

Matériaux propres

Matériaux propres

 

Ensuite, vient l’analyse des objets, un par un. La stratégie est ici d’obtenir de beaux objets, assez définis, mais aussi très optimisés. Comme le maillage ne va pas être déformé par des bones  (pas de skinning), on peut optimiser assez fort, en essayant de conserver les arrondis assez flatteurs des formes.

On sait donc que c’est de la modélisation polygonale, avec un modificateur MeshSmooth par dessus. Le moyen le plus rapide serait donc de supprimer le MeshSmooth pour ne conserver que la forme initiale. Cela fonctionne assez bien sur certains objets, mais sur d’autres, on perdra des arrondis et des angles qui prennent bien la lumière. Dans ce cas, on veillera à choisir un bon ratio nombre de faces/Aspect des arrondis, et on passera par dessus un modificateur ProOptimizer. L’avantage de ce dernier est d’être adaptatif et d’autoriser la conservation de certain paramètres, comme les coordonnées de textures. Attention toutefois à ne pas vouloir trop en faire. Une optimisation trop forte et certaines faces vont commencer à perdre leur lissage, certains sommets vont être écrasés ensemble, etc… Je préconise de ne pas aller en dessous de 50% (rapport du nombre de faces restantes comparées à l’original), mais c’est très dépendant de la forme de la géométrie.

Maillage basique

Maillage basique

Maillage adouci

Maillage adouci

Maillage optimisé

Maillage optimisé

Il existe aussi des cas ou on utilisera le modificateur historique Optimize, qui à comme gros avantages de pouvoir facilement optimiser les sommets alignées entre eux. Mais attention, vous perdrez vos coordonnées de textures au passage et vous devrez les recréer.

Maillage optimal

Maillage optimal

Certains des objets de la scène sont également mal modélisés. C’est le cas du verre de la montre qui présente des sommets mal soudés entre eux, ce qui génère des aberrations aux quatre coins. On en profite donc pour reprendre le mesh de base (avant Meshsmooth) et on le nettoie un peu. On veillera également ici à grouper les objets qui disposerons du même matériaux en un même objet (par exemple, les deux parties en cuir du bracelet). Pour faire ceci, on sélectionne un objet, on lui ajoute en haut de la pile le modificateur Edit Poly, dans celui-ci, on clique sur le bouton Attach, et on sélectionne l’objet à attacher. Plus qu’un simple groupe, on se retrouve ici avec un objet unique, regroupant un matériaux unique, tout en conservant les coordonnées de textures et les angles de lissage.

Parfois, ce sera l’inverse. Il faudra sélectionner des ensemble de faces et volontairement les séparer de l’objet pour en faire un objet distinct.

Finalement, on réduira l’empreinte mémoire de ces objets en réinitialisant leurs transformations (Dans le Command Panel->onglet Utilities->Reset Xform) et en les compactant (Dans le Command Panel->onglet Utilities->Collapse). Il ne nous reste plus que les meshes de bas niveau et optimisés (on conserve ici les coordonnées de textures).

En reproduisant ces phases sur les objets, j’ai ramené la scène à 55 000 faces (9 fois moins) et à 30 objets distincts (100 fois moins), ce qui fait une belle optimisation et permet d’envisager la suite avec confiance. Je n’ai ici aucun objet de plus de 65 000 points ou faces, ce qui représente toujours un risque au moment de l’affichage (dépendance matérielle au index 32 bits, pas toujours gérés).

Modèle corrigé

Modèle corrigé

Pour en finir avec ces considérations, il faut noter que certaines parties de la montre ne sont pas conformes à l’original et nécessite un re-travail complet. C’est le cas de la partie arrière du châssis qui devrait comporter une fenêtre permettant de visualiser le mécanisme en mouvement. Cette défonce est tout simplement absente du modèle d’origine et devra être re-modélisée.

Le décor

Une montre toute seule, c’est un peu triste. Ajoutons un peu d’environnement. Pour créer un univers digne de cette belle mécanique, j’ai opté pour la simplicité et les références. L’univers de cette montre est fortement marquée par l’acteur Steve Mc Queen, qui en fut le représentant lors du tournage du film “Le Mans”, en 1971. Je vais donc me servir de ces références, toujours d’actualité aujourd’hui, pour construire mon décor.

Un simple bloc va donc servir de présentoir. Dessus sera disposé la montre, qu’il faudra faire reposer sur un socle. Sous ce socle, je mettrai une image de la voiture conduite par Steve dans le film et par une carte routière de …Monaco, bien sûr. Enfin, en arrière plan, je vais utiliser des images de promotion de l’acteur avec la montre. En en fond, je réaliserai une skymap floutée. Un simple travail de deux heures me permet de positionner tout ces éléments.

Le modèle dans son contexte

Le modèle dans son contexte

La scène est maintenant optimisée et prête pour la suite…

Et c’est quoi la suite ?

Dans le prochain épisode, nous verrons comment on compose un éclairage de base et comment on compose avec notre moteur de rendu pour obtenir des textures d’éclairage spécifiques, comme de l’occlusion d’ambiant. Stay Tuned !

Publicités