Studio ramble3dbienvenue.

English

Blender Gltf export for Babylon.js.

Les différentes étapes à réaliser...


L'objectif de ce making of est de présenter le workflow utilisé pour réaliser ce projet.
La modélisation 3d du robot reste relativement basique ,le but n'étant pas d'obtenir un mesh trop complexe pour qu'il reste relativement light et rapide à charger. Le plus gros des details sera réalisé en peinture pour optimiser un maximum le mesh et avoir un bon compromis entre details et performance sur le modèle.
Le projet doit etre exportable pour le web et lisible sur la plupart des devices disponibles.
Le workflow utilisé sera donc Blender 3d pour la modélisation, le depliage des UVs et l'export au format GLTF. La peinture du modele sera réalisée avec Substance Painter et l'export pour le web avec Babylon.js.


Titre01

Modélisation 3d

Les bases du projet.

Modélisation 3d des éléments.

Le but n'étant pas de faire un tutoriel sur la modélisation 3d dans Blender nous soulignerons donc les étapes clefs du projet.
Le modèle se compose donc de deux éléments: le corps et la roue. Ces deux éléments auront chacun leur propre material ce qui aura son importance par la suite.

L'echelle du modèle n'a pas énormement d'importance mais il est conseillé de rester cohérent et ne pas avoir un modèle surdimensionné, ni trop petit.
Chose importante placer bien vos objets au centre de votre univers 3d et surtout ne pas oublier de réinitialiser les transformations pour avoir des coordonées de position à [0,0,0], de rotation [0,0,0] et un scale à [1,1,1]. Pour cela selectionez votre modèle et faites 'Shift+Ctrl+A' dans blender.

Dernière chose importante à souligner pour la modélisation, le modèle étant destiné à être diffusé en temps réel, il vous faudra trouver le bon compromis pour avoir un aspect lissé sur votre modèle sans surcharger le maillage inutilement. Il vous faudra aussi jouer avec les groupes de lissage ou 'Mean Crease' pour conserver des arrêtes bien saillantes ! Vous pouver aussi découper votre maillage avec l'outil Edge Split (Ctrl+E).

Mod01
Deplier les UV's et appliquer les materiaux.

Etape importante à ne pas négliger car elle determinera en grande partie la qualité finale de votre modèle !
En effet selon le type de projet et la complexité du modèle plusieurs alternatives s'offrent à vous. Détailler votre modèle 3d avec énormement de details et faire un backing de texture par la suite sur un modèle low-poly, utiliser un material pour chaque type de couleur et materiaux différents... Ce choix est à définir avant de vous lancer dans le dépliage des UV's et la création des textures. A savoir que les sub-materials sont parfaitement gérés dans Babylon.js. Vous pouvez donc utiliser plusieurs materials sur un seul objet 3d. Cette méthode vous permetra d'avoir un plus grand contrôle sur la qualité finale de votre objet en jouant sur la taille de vos textures. Attention toutefois à ne pas surcharger votre modèle avec des tetxures en 4k et une multitude de material car vour allez vous retrouver avec un projet avec un nombre de MO énorme et des temps de chargement infini et vos utilisateurs n'attendront pas !
Pour cet exemple le choix à été d'utiliser seulement deux materials. Un pour le corps et un pour la roue et des textures avec une résolution de 2048px.
Pour plus de details sur des zooms, il faudrait utiliser un material en plus sur le corps par exemple...
Si vous utilisez également Substance Painter pour peindre votre objet faites attention à faire un dépliage d'UV's propre car vous avez en effet un mode de selection d'UV dans Painter pour créer vos masques qui en dépendra !

Mod01

Peindre le Modèle.

Ajouter les details et la couleur.

Exporter le modèle pour Painter.

Une fois votre modèle fini et les UV's depliés vous pouvez faire l'export pour Painter. Petite particularité la roue du robot pouvant être animée par la suite il nous faut prendre garde à ne pas créer les textures d'oclusion trop vite. Le Backing du corps se fera de manière classique par contre nous n'utiliserons pas le corps pour backer la roue pour ne pas avoir la projection de l'ombre dessus.
Pour l'export vous pouvez le faire en une partie (coprs+roue) en FBX ou séparement pour cet exemple cela ne changera pas grand chose. A noter que Painter ne fera pas la différence entre vos objet de maillage mais se servira du nom et du nombre de material que vous avez affecté à vos objets.

Encore une fois le but n'est pas non plus de faire un tuto Painter nous n'entrerons pas dans les details mais allons voir les étapes clefs du projet (qui peuvent évidement évoluer en fonction de votre projet et surtout de son utilisation finale).
Pour ce projet pas besoin d'avoir de texture en 4k nous créons donc un nouveau projet en 2048px (ce qui peut être modifié par la suite) et n'utiliserons pas de fichiers externes pour le moment (vous pouvez cependant charger vos textures si vous les avez backés dans Blender).

Mod01
Organisation des layers.

Votre projet créé et votre modèle chargé la première étape consiste à backer vos textures dans le 'TextureSet Settings'. Une fois cette étape réalisée n'oubliez pas de remplacer vos textures d'oclusion backer précédemment dans Blender.
Vous devriez avoir dans le 'TextureSet List' le nom et le nombre de texture utilisés pour le projet.
Maintenant le fait de n'avoir utilisé qu'une seule texture pour le corps va devenir problématique si nous voulons appliquer plusieurs materiaux et couleurs différentes sur le modèle. C'est là que votre depliage d'UV's va avoir sont importance car nous allons créer des groupes de calques différents pour chaque zone que nous voulons peindre.

Mod01
Mod01
Peindre notre objet.

Dans un premier temps nous délimitons les zones de notre objet et ajoutons les differents détails de relief qui n'ont pas été modélisés en 3d.
Une fois cette étape réalisée nous commencons à positioner les zones de couleur, régler l'influence de la réfléxion, du roughness puis continuons à ajouter les différents éléments de detail. N'oubliez pas que substance painter vous permet un réglage trés precis sur l'influence de vos différents calques.

Mod01

Différentes images ont aussi été préparées en parallèle pour servir de tampon pour peindre le modèle:

Mod01
Exporter les textures.

Une fois que vous êtes satisfaits du résultat vous allez pouvoir exporter vos textures.
Pour exporter votre projet vous allez avoir besoin de récupérer le BaseColor, Oclusion, Metalic, Roughness et la Normal Map pour chaque material. Plusieurs options s'offrent à vous.
Pour l'export de texture, Substance Painter vous propose différent choix de configuration en fonction de la destination de votre projet. Nous allons donc créer une configuration spécifique pour l'export Gltf. Rien de bien compliqué, la seule particularité est de générer une texture au format PNG avec dans le canal 'Red' la texture d'oclusion, dans le 'Green' le roughness et dans le 'Blue' le metalic. (vous pouvez aussi le faire à la main dans photoshop...).

Mod01

Nous avons donc maintenant trois textures exportées par matérial.

Mod01

L'Export.

Exporter le modèle depuis Blender.

Ajouter les modules suplémentaires.

Pour pouvoir exporter directement votre modèle au format Gltf depuis Blender il vous faudra installer l'add-ons disponible sur le github du KhronosGroup et suivre l'instalation comme indiqué ici.

Une fois cette étape terminé il vous faut connecter ou importer le shader glTF Metalic Roughness à blender. Vous le trouverez dans le dossier "glTF-Blender-Exporter-master\pbr_node\glTF2.blend" que vous avez téléchargé.

Pour le connecter faites File --> Link --> "glTF-Blender-Exporter-master\pbr_node\glTF2.blend" --> "NodeTree\" et enfin séléctionnez glTF Metalic Roughness.
Vous trouverez la documentation sur ce sujet ici.

Vous devriez maintenant pouvoir remplacer votre shader par le shader spécifique.

Mod01
Connecter les textures aux bons canaux.

Nous allons maintenant pouvoir charger les texures génerées et les connecter aux bons canaux du shader gltf Metalic Roughness.
Pour le BaseColor rien de bien compliqué il faut le connecter sur le BaseColor. A noter que pour optimiser le poids de chargement vous pouvez convertir votre image en jpg, il y aura une petite perte de qualité mais un gros gain de poids !
Ensuite il faut connecter la texture Oclusion_Roughness_Metalic aux onglets MatalicRoughness et Occlusion. La Normal sur l'onglet Normal (vous pouvez aussi la convertir en jpg, à vous de tester si il n'y a pas trop de perte de qualité). A noter que vous pouvez aussi ajouter une texture pour l'emissive et jouer avec l'alpha de votre texture pour créer de la transparence. Vous trouverez des exemples dans les liens du dessus sur le Github du KronosGroup.

Pour finir il faut faire la même opération pour la roue.
Pour optimiser le poids de sortie, les textures ont été reduites à 1024*1024px pour la roue. Sa taille étant petite comparé au corps le résultat reste cohérent. A vous d'adapter le format et le poids de vos textures en fonction de votre projet pour optimiser le temps de chargement une fois en ligne.

Mod01
Exporter au format Gltf.

Dernier point vous pouvez backer une ombre sur un plan pour vous en reservir dans Babylon. Enfin le corps à été dupliquer pour ne garder que la partie qui sert de visière pour pouvoir lui apliquer un material glasse directement dans babylon.

Vous pouvez maintenant exporter votre 3d au format gltf (ou glb dans lequel tout sera compilé dans un seul et même fichier). File -> Export -> gltf 2.0. Dans les options pour ce projet nous pouvons tout laisser par défaut. A noter que nos modèles 3d ne comportent pas de modificateurs particuliers et que la scene n'est composé que du corps du robot, sa roue, la visière et éventuellement le plan de l'ombre. (si vous avez d'autres éléments dans votre scène n'oubliez pas de séléctionner seulement vos objets à exporter et de cocher 'Export selected only').
Exporter le tout dans un dossier dédié qui sera réutilisé par la suite.

Mod01

Babylon.js.

Créer le projet babylon et importer le model 3d.

Il est vivement conseillé d'organiser votre votre projet en créant des dossiers spécifiques pour chaque utilisation.
Mod01
La base du projet.

Nous n'allons pas ré-écrire ce qui a déja très bien été fait ici.
Pour cette étape il existe plusieurs façons de travailler. A vous de trouver celle qui vous conviendra le mieux. En effet nous n'écrirons pas tout notre code javascript dans le fichier html. Nous allons créer un fichier 'scene.js' et écrire notre code dedans (le nom du fichier n'a aucune importance).Vous pouvez aussi sortir le css dans un fichier spécifique.
Dernier point très important avant de commencer il vous faudra inclure l'extension javascript pour que Babylon.js reconnaisse le format. Vous pouvez vous brancher directement sur le serveur Babylon.js "http://preview.babylonjs.com/babylon.js" ou générer un fichier que vous utiliserez sur votre serveur (cette option a l'avantage de fonctionner sans connection internet). Pour générer votre fichier Babylon avec la dernière version du framework et l'extension Gltf incluse rendez-vous ici.Vous avez deux option à cocher: la version de babylon (deja coché par default) et n'oubliez pas de cocher dans loader gltf (sinon il vous faudra l'inclure en plus dans votre fichier html).
Vous devriez avoir un fichier babylon.custum.js (que vous pouvez renommer comme vous le souhaitez).
Dernière remarque nous utiliserons 'hand.js' plutôt que 'pep.js' pour le touch screen.

Mod01
Le fichier scene.js.

Le fichier scene.js contient une fonction initScene() qui est appelée dans le fichier html. Encore une fois ce n'est pas l'unique facon de procéder.
La position de la caméra a été réglée pour être centrée sur le robot (d'ou l'intérêt de centrer vos objets à l'origine de votre projet Blender).
Il vous faut charger une BABYLON.CubeTexture pour génerer toutes les réflexions. Vous pouvez créer vos propres textures de réflexion comme indiqué ici.
Nous utilisons la fonction onMeshLoaded du loader BABYLON.SceneLoader.Append pour appliquer la texture glasse et l'ombre. Vous trouverez plus d'information sur le loader ici.
Si vous en êtes arrivés jusque là vous devriez pouvoir tester votre projet en ouvrant le fichier index.html dans votre navigateur.
A noter que vous pouvez jouer avec les paramètres material.environmentIntensity et material.cameraExposure de vos meshes pour affiner l'éclairage. Ne négligez pas non plus la texture d'environement qui a une forte influance sur l'éclairage de scene.
Voir la démo ici.

Mod01
Voilas en éspérant que ces quelques lignes vous aiderons à réaliser vos premiers exports avec ce formidable Babylon.js ;). Vous pouvez télécharger le modèle 3d utilisé ici et l'export du projet ici.

Vous pouvez télécharger le projet ici et le ficgier source de Blender ici.

Bon Courage !

Contact

Contactez nous pour toutes questions ou renseignements complementaires.

Société Studio-Ramble3d
Mr SEMEN Xavier
Tel: 03.44.90.78.45 Port: 06.64.52.26.78
Mail xsemen@studio-ramble3d.com
Parc Technologique des rives de l'oise.
Rue les rives de l'oise.
60201 Compiegne Cedex.