BabylonJS et 3DsMax Part 2

Dans l’épisode 1, nous avons vu comment on récupérait, puis on optimisait et enfin on mettait un peu en scène un ensemble d’objets en 3D, avec l’ambition d’en faire une scène pour Babylon.Js. Ladite scène portera sur la célèbre montre Monaco de la marque Tag Heuer.

Le modèle dans son contexte

Le modèle dans son contexte

Ce second et long épisode portera sur la création de l’éclairage de base de cette scène, ainsi que sur les premiers calculs de textures de rendu. Entrons tout de suite dans le vif du sujet avec quelques notions d’éclairage.

J’aurais pu faire un titre du genre :  Que la lumière soit…

…Mais j’ai encore un peu de fierté. Surtout qu’ici, c’est assez sérieux. En effet, la reproduction d’un éclairage est une phase très intense et faisant appel à de nombreuses notions (éclairage, photo, physique, …). On distingue donc plusieurs écoles et quelques belles signatures (comme les ombres bleues de Pixar, par exemple). La seule véritable règle, en tout cas, c’est que la lumière doit respecter les volumes de votre scène et paraître plausible. Trop de sources lumineuses, et l’ensemble parait plat. Trop peu et c’est trop sombre. Une lumière trop forte et vous “cramez” (zones toute blanches). Si on y ajoute des subtilités spécifiques des moteurs de rendu, comme les lumières négatives (avec des ombres négatives, elles aussi), on peut vite s’y perdre…

Pour commencer calmement, on parlera d’un éclairage de type tri-spot. C’est la plus classique des configurations. On éclaire la face avant des objets avec une lampe haute et blanche assez forte (70%), on contre-éclaire à gauche et à niveau avec une lampe bleutée (30%), et on ajoute une back light (orangée), derrière et à droite, un peu basse.

Un éclairage Tri-spots

Un éclairage Tri-spots

Tout ceci dans l’optique d’utiliser le moteur de rendu en lancer de rayon classique (onglet Rendering-> Render) ultra-rapide. Notez comme l’alternance de lumière et d’ombres permet de bien faire ressortir les volumes.

Une autre méthode consiste à faire de la radiosité, c’est à dire de travailler avec les rebonds lumineux. Pour ceci, il faut changer le moteur de rendu de 3ds Max (voir épisode précédent) et le passer à Mental Ray. Cela vous ouvre les portes à des éclairages physiquement réalistes (comme la consommation en Watts, le nombres de Lumens à 1 m, le type de rayonnement, le combustible utilisé). Mais pour que cela fonctionne, il faut utiliser comme unité le mètre, ce qui n’est pas le cas, dans notre scène. Faisons tout de même un essai :

Pour cela, je crée en une seule fois un ensemble de lumière qui reproduit l’éclairage outdoor naturel. C’est un Daylight (Command Panel –>Onglet Create->sous-onglet Systems->Dayllight) et posez-le en vue de dessus (notez que vous pouvez régler des paramètres comme le lieux, l’heure, etc… de votre illumination). Ensuite, dans les paramètres du moteur de rendu, je coche la case Enable Final Gather dans l’onglet Indirect Illumination, et je lance un rendu. Avec assez peu de réglages et une seule source lumineuse, j’obtiens un résultat assez probant, avec de beaux volumes et de belles ombres.

Illumination Globale

Illumination Globale

On pourrait encore aller plus loin, bien sûr, en fonction de notre scène, avec des simulations de lancer de rayons, de lancer de photons, etc…Les moteurs de rendu permettent vraiment d’aller très loin dans le réalisme, avec un mépris total de votre patience et du temps de calcul de chaque image.

Et je vais utiliser quoi ?

Oui, car ce que je veux, au final, c’est un rendu en temps réel de ma scène dans Babylon.JS, pas de rendu statique dans 3dsMax. Et bien en fait, je vais faire du judo artistique et utiliser la force de l’adversaire. Je vais calculer mes éclairages dans des textures en profitant de la puissance des moteurs de rendu offline, pour pouvoir ré-appliquer rapidement dans Babylon.JS. Pas bête, la guêpe. Par défaut, j’utilise volontiers un moteur de rendu offline comme Vray, pour sa souplesse et sa facilité d’utilisation, ainsi que pour ses capacités à effectuer des passes de rendu sur texture. Je vais donc vous expliquer les phases de setup qui me sont nécessaires pour un rendu agréable de cette scène.

Un peu d’AO ?

Tout d’abord, Vray se télécharge à cet endroit et fonctionne comme un moteur de rendu additionnel, disposant de ses propres composants (lumières spécifiques, objets factices à part, matériaux propriétaires, etc…). On switche rapidement sur ce moteur de rendu (voir épisode précédent ou plus haut) et on ouvre l’éditeur de matériaux de 3dsMax, on choisit un matériaux vide, auquel on affecte une texture VRay Dirt au canal de diffus. Tout ceci dans l’optique de fabriquer une texture d’illumination d’occlusion ambiante. Oui, mais c’est quoi l’occlusion ambiante ? C’est un calcul statistique de l’éclairage d’ambiance des objets, en regard à leur disposition. On sait, par exemple, que deux murs très proches ont moins de chances de capter de la lumière, que deux murs éloignés. Il va donc en résulter une zone moins éclairée dans l’interstice entre les murs. C’est aussi simple que cela. Avec en prime le fait que vous n’ayez pas besoin de placer des lumières dans la scène, puisque ce rendu est statistique. Encore une fois, nous faisons au plus simple, en ne jouant que sur un matériaux, grâce à Vray Dirt dans le canal de diffus (provisoirement). On peut également monter l’auto-illumination du matériau à 100%, pour n’obtenir que du diffus pur. Enfin, n’oubliez pas d’attribuer ce matériau à la totalité de vos objets. A ce propos on veillera à cacher la vitre de la montre, afin qu’elle n’interfère pas dans le rendu du cadran.

L'occlusion ambiante dans un jeu comme Batman Arkham Origins

L’occlusion ambiante dans un jeu comme Batman Arkham Origins

C’est la corvée de repassage

Nous avons établi que notre solution d’éclairage par occlusion ambiante allait être convertie en textures bitmaps. Il va donc falloir faire correspondre les pixels de ces textures aux sommets des objets, via des coordonnées de textures. J’utilise pour ceci le modificateur UnwrapUVW, qui va me permettre d’obtenir et d’éditer des textures aplaties de mon objet. Voici mon pipeline : Je sélectionne d’abord tous les objets de mon décor (je vous recommande d’en faire une sélection nommée, en indiquant un nom dans le champ idoine du menu de 3dsMax), j’ajoute mon modificateur sur cette sélection. Je viens ensuite régler ce modificateur sur le map channel 2 (le map channel 1, je le réserve pour le vrai diffus, mais nous verrons ceci plus tard, dans le prochain épisode. La bonne réponse est de toute manière de conserver les coordonnées de textures initiales du fichier de base), et j’ouvre l’éditeur d’UV. Dans la nouvelle fenêtre, je sélectionne toutes les faces de mes objets, puis je vais dans le menu Mapping->Flatten mapping et je modifie la valeur de spacing par défaut par la valeur 0.002. On valide et un premier calcul est effectué, que l’on peut bien sûr remodifier pour obtenir plus de cohérence, moins d’espaces morts (plus de pixels de la future texture occupés), ou des coupes entre les faces moins brutales (via un Pelt Map, pour les plus érudits).

aplat des coordonnées de textures

aplat des coordonnées de textures

Je reproduis une nouvelle fois ce même processus pour tous les objets composant la montre (exceptée la vitre) et me voilà prêt pour rendre sur textures l’occlusion ambiante.

Le rendu sur textures

Voilà la phase un peu technique de mon pipeline. Il faut être un peu rigoureux et laisser la machine travailler sagement. On sélectionne donc nos objets du décor et on ouvre donc l’utilitaire de rendu sur texture (Rendering->Render to textures). On va d’abord aller donner un répertoire de rendu à notre solution (je recommande de créer un répertoire spécifique pour ce process), on valide bien que tous les éléments sont bien répertoriés dans la liste et que le canal de texture à rendre est bien le 2. Pour l’output, on sélectionne un VRAY complete map, avec une taille de 2048×2048 pixels, et on n’oublie pas de cocher la case Render to files only. Si tout est bien paramétré, un clic sur le bouton Render va lancer le process de rendu de chaque objet en série, et va sauvegarder le résultat dans le dossier que vous aurez créé. Et bien entendu, il faudra également faire un rendu des objets de la montre en répétant le process ci­-dessus.

Vous reprendrez bien un peu de Toshop ?

Maintenant que vous avez vos textures d’occlusion ambiante par objet, il va falloir en faire des composites. Ouvrez les fichiers relatifs à votre décor dans un logiciel de montage de type Adobe Photoshop et empilez les différentes textures des objets en mode « Lighten », afin de bien conserver la luminosité de chaque calque. On peut en profiter pour diminuer un peu le bruit inhérent à ce type de calcul en appliquant un filtre de type Smart Blur, avant de réduire la taille de la texture à 512×512 pixels.Au final, vous devriez obtenir deux textures composites : Une pour le décor et une pour la montre. Notre éclairage est fini.

Une texture D'AO dépliée

Une texture D’AO dépliée

 

Un avant-goût du chapitre 3 ?

Pour se donner un peu envie, on va commencer à créer des shaders et faire notre premier export. On commence par créer deux matériaux vides auxquels on donnera un diffus complètement blanc, une auto-illumination à 100% et sur lesquels on débloquera le canal d’ambiant. Dans un matériau, on va attribuer à ce canal d’ambiant l’une des textures d’occlusion ambiante composite (mettons celle du décor) en faisant attention de l’attribuer à la coordonnée de texture 2. Ensuite, on applique ce matériau aux objets du décor et on demande au shader de bien afficher cette texture dans le viewport de 3dsMax.

 En procédant de la même manière avec le second matériau et en l’appliquant aux objets de la montre, on se donne déjà une bonne idée de l’éclairage de notre scène, sans aucune source lumineuse, faut-il le rappeler !!

Au passage, on crée une caméra libre, on la règle proprement (focale à 24 mm, objets bien centrés). Ceci est impératif pour avoir un point de vue interactif dans la scène.

L'AO appliquée dans 3dsMax

L’AO appliquée dans 3dsMax

On finit donc ce chapitre en effectuant un export vers BabylonJS en local en se rendant dans le menu->Babylon->Babylon File Exporter. Le panneau spécifique de Babylon.Js s’ouvre alors, autorisant plusieurs manipulations. D’abord, on va trouver un répertoire et un nom pour notre fichier. En passant, on en profitera pour exporter les textures dans le répertoire du fichier Babylon, si ce n’est pas déjà le cas et nous cliquons sur le bouton Export & Play.

Un premier rendu dans Babylon.JS

Un premier rendu dans Babylon.JS

 

Cette action va exporter le modèle et lancer votre navigateur favori affichant fièrement votre scène en cours de production. Nous sommes prêts à travailler sur les matériaux de la scène, mais cela attendra le troisième chapitre de cette série !

Alors, revenez vite !

Publicités