BabylonJS et 3DsMax Part 3

Résumé des épisodes précédents : Nous avons vu jusqu’à présent comment on incorpore, on prépare et on optimise un fichier 3D avec 3dsMax afin de le rendre compatible avec BabylonJS et le temps réel. Nous avons également vu comment éclairer basiquement, puis avec de l’occlusion ambiante une scène 3D et comment convertir cet éclairage en textures afin d’obtenir un maximum de performances.

Au programme de cet article, voyons comment donner un aspect décent à nos objets et finalement ajouter de la valeur par l’aspect et le rendu des matériaux et des shaders.

Un premier rendu dans Babylon.JS

Un premier rendu dans Babylon.JS

 

Dis monsieur, c’est quoi un shader ?

Un shader mon petit, c’est un ensemble d’opérations qui amène un pixel de l’écran à prendre une certaine couleur. Cela inclut donc la projection de votre objet 3D en pixels en 2D, le calcul de votre éclairage, de vos textures que vous allez appliquer, des effets particuliers que vous ajouterez à votre scène et éventuellement des opérations spécifiques au traitement de votre image finale.

Ainsi, afficher un cube rouge mat ne comporte que peu de défis techniques, puisque le shader sera minimaliste : Je calcul l’angle que prend une face donnée de mon objet (les sommets en fait, mais faisons simple) avec la source lumineuse, je rempli la face du rouge que je pondère avec l’intensité de la lumière, et ainsi de suite.

Par contre, calculer au plus juste un matériau comme un verre déformant, ou un cuir performant, représente un challenge autrement plus intéressant pour lequel une bonne dose d’observation, quelques notions d’optique et de photographie, un peu de bon sens et un peu d’instinct artistique vous serons recommandés.

Commençons par un shader simple.

Pour se faire la main, nous allons en premier lieu parler d’un des éléments du décors, à savoir les photos du grand Steve Mac Queen. Par défaut, nous avons déjà un matériau standard dans 3dsMax (voir le post précédent), qui contient dans le canal d’ambiant les informations d’éclairage via une texture d’occlusion ambiante. Dupliquons ce matériau (et renommons-le proprement) et affectons ce nouveau shader au dépliant. Notons au passage que seul les matériaux standards disposant de textures bitmaps seront convenablement exportés vers Babylon.JS. Pas de matériaux Vray, MentalRay, de textures procédurales, et autres, donc.

Dans le canal diffus, nous allons avoir besoin de stocker les photos de l’acteur que je souhaite appliquer sur l’objet. Mais pour cela, je vais avoir besoin de coordonnées de textures. Cependant, la coordonnée utilisée pour la texture d’ambiant (le canal 2) n’est pas très optimisée pour l’emploi de cet objet uniquement (nous avons déplié cette coordonnée de texture initialement pour plusieurs objets de la scène). Je recommande donc de passer à nouveau par un modificateur Unwrap UVW pour déplier les coordonnées de textures de cet objet, mais cette fois-ci sur le canal 1.

Le diffus des photos promotionnelles

Le diffus des photos promotionnelles

 

Petit rappel : Mon workflow est assez strict là-dessus. Pour m’y retrouver, le diffus va toujours sur le canal 1 et mon ambiant va dans le canal 2. Par ailleurs, Babylon.JS ne gère que deux coordonnées de textures différentes. Il va falloir bien gérer, donc.

Dans le modificateur Unwrap UVW, après avoir déplié votre coordonnée du canal 1 via Flatten Mapping, vous pouvez un faire un rendu rapide du maillage aplati afin de vous servir de guide dans Photoshop et faire correspondre vos différentes ressources images dans un composite unique. Allez dans Tools->Render UV template et faites un rendu filaire de votre coordonnées, puis allez dans Photoshop et faites correspondre les faces avec les images que vous souhaitez mapper. Avec peu d’efforts vous obtiendrez un matching efficace.

La texture de diffus

La texture de diffus

L’autre solution consisterait à appliquer un matériau multi-sous objets de manière à appliquer une image différente à chaque face, puis de faire un rendu sur texture du diffus obtenu afin d’obtenir rapidement une texture composite, puis de la ré-appliquer au matériau unique.

Tant que nous sommes sous Photoshop, profitons-en pour dupliquer cette image et en faire une version en noir et blanc invertie. Cette version de l’image va aller dans le canal de specular color. C’est dans ce canal que nous allons contrarier la tache lumineuse que produit la lumière sur un objet brillant. En effet, selon les encres et les vernis, certaines couleurs en impression photographique renvoient plus ou moins de lumière. Nous simulerons cet effet en ajoutant donc cette texture (réduite en 128×128 pixels) dans ce canal de couleur spéculaire avec les coordonnées de texture du canal 1.

La texture de speculaire

La texture de speculaire

Note : bien sûr, pour qu’il y ait tache lumineuse, il faudra ajouter une source de lumière dans la scène. J’ai choisi de poser une source lumineuse de type Omnidir derrière la caméra, un peu haut et sur la gauche afin de générer de cet emplacement tous les spéculaires de ma scène. Autre point à ne pas omettre, il faut spécifier la capacité du matériau à générer cette tache lumineuse, via les paramètres de Specular Level et de Glossiness de 3dsMax.

Au final, ce shader simple (qui est auto-illuminé à 100%, pour rappel, donc ne subit ni l’ambiant de la scène, ni l’éclairage de la lumière) s’est vu adjoindre une texture d’ambiant (afin de simuler l’éclairage), une texture de diffus (pour simuler l’aspect des photos) et une texture de couleur spéculaire (pour simuler la tâche lumineuse faussée par l’encre). Voilà comment on obtient un shader facilement, mais déjà assez bien défini et efficace.

Le cadre photo complet

Le cadre photo complet

Techniquement, le fond du shader blanc est multiplié par le diffus. Si vous utilisez un shader rouge, l’image bitmap que vous ajoutez dans le diffus va être multipliée par cette teinte et en sera fortement influencée. Ce diffus va être ensuite multiplié par la texture d’ambiant. Le diffus va donc être obscurci dans les zones sombres de la texture d’ambiant et va passer tel quelle dans les zones blanches de l’ambiant.

 J’veux du cuir…

Attaquons-nous à la partie en cuir du bracelet. On pratique de la même manière que pour le cadre des photos, donc en dupliquant le shader basique existant (qui contient une texture d’ambiant) et en ajoutant une texture de diffus et une texture de spéculaire. Mais cette fois-ci, je complète mon shader avec une texture de type Normale (avec une coloration en rose, bleu et vert indiquant la normale, le vecteur d’éclairage de chaque pixel) dans le canal de Bump du matériau.

Le bump va venir simuler par déformation des informations du spéculaire, une déformation de la surface de l’objet. Simuler seulement, puisqu’en aucun cas ce shader ne changera la topologie (le maillage) de notre objet.

La composition du shader de cuir

La composition du shader de cuir

Rendu du bracelet

Rendu du bracelet

 

Le métal brillant

L’un des aspects vraiment sexy de cette montre est dans l’alternance des métaux polis et des métaux brossés. Concentrons-nous sur l’aspect brillant. Un métal de ce type disposera avant tout d’un spéculaire très fort (donc un indice de Specular Level aux environs de 800), d’un glossiness resserré (60). Mais ce qui définit le mieux un métal brillant, c’est sa capacité à refléter son environnement. Pour cela nous repartons du shader de base appliqué aux objets composant la montre, nous le dupliquons et le nommons. Ensuite, nous allons passer sa couleur diffuse de base à noir pur. Puis nous ajoutons une texture qui va simuler l’environnement immédiat de la montre. Comme les formes de la montre ne sont que rarement plates, nous n’avons pas besoin d’un reflet très précis, puisque les déformations de surface vont déformer à l’excès les réflexions. J’utilise donc une texture de type 360°, à laquelle j’ai appliqué un léger flou dans Photoshop (un métal n’est pas non plus un miroir parfait). De plus, j’ai ajouté pas mal de contraste afin d’obtenir des reflets bien marqués.

Par défaut, la réflexion est en mode additif, plutôt que multiplicatif. Voilà pourquoi il est préférable de changer la couleur de base du shader pour un noir pur. Par ailleurs, une texture de réflexion ne prend pas en compte les coordonnées de texture de l’objet, puisque son placement dépend essentiellement de la position de la caméra. Il est donc nativement associé à une matrice de type « environement », plutôt qu’objet. Mais j’ai tout de même changé le mode de placement de la texture du mode de mapping « Spherical » au mode « Cylindrical » qui est plus proche du rendu planaire que je désire.

Texture de réflexion

Texture de réflexion

 

Rendu du metal

Rendu du metal

Le verre du cadran

Les choses sérieuses commencent avec le verre du cadran. Le verre est en effet un matériau étrange dans ses propriétés : Pas totalement transparent, il ralenti pourtant assez nettement la lumière pour que des effets de bord se fassent sentir (réfraction). Sa surface dure génère des spéculaires très forts, mais aussi très serrés, et des reflets très marqués. Voyons comment j’ai travaillé ce matériau.

Pour mémoire, cet objet est l’un des rares à ne pas avoir eu de calcul d’éclairage, pour ne pas interférer avec les éléments en dessous et car il n’en a pas vraiment besoin. Nous pouvons donc partir d’un shader neutre et standard. On appliquera une couleur noire au diffus de base, et on réglera l’opacité sur une valeur d’environ 10. Le specular level sera quant à lui de 90, avec un glossiness de 91. Une tache forte, mais étroite. Par-dessus tout ceci, on ajoute une réflexion franche, avec une texture posée en environnemental cylindrique et participant à un niveau de 50.

Pour autant, la tranche du verre va fortement réfracter les objets dessous. Comme je ne tiens pas, à ce niveau à ajouter trop de draw calls à mon calcul, je vais ruser un peu. Je sépare la tranche de la partie plate du verre du cadran et dans le matériau spécifique que j’applique à la tranche, j’augmente l’opacité (84), et je passe le type d’environnemental de la texture réflexion de cylindrique à sphérique, tout en augmentant sa force (84).

 Le cadran, enfin…

Dernier exemple des shaders de cette scène, le matériau du cadran. En effet, celui-ci est assez compliqué. Il contient une texture d’ambiant (notre occlusion), une de diffus (le bleu du cadran et le logo de la marque), et une de réflexion (en cylindrique, et teinté en bleue, pour respecter la couleur du diffus).

Diffus du cadran

Diffus du cadran

Ce qui est remarquable, lorsque l’on regarde la varie montre, c’est cet effet fuyant que donne la tache spéculaire sur le cadran. Ceci est dû en partie à un très fin rainurage en cercle, effet que l’on rencontre également sur les surfaces usinées et que l’on peut assimiler à un spéculaire anisotropique. Pour reproduire cet effet, on doit déformer artificiellement le passage du spéculaire sur l’objet. Et il existe pour ceci une méthode assez simple : La texture de normale, qui va venir indiquer à chaque pixel vers où la tache spéculaire va être déportée par rapport à la géométrie du mesh.

Texture de normale

Texture de normale

Pour réaliser cette texture, je me suis fait un dégradé circulaire sur une planche de 256×256 px, puis j’ai appliqué un filtre normal bump de nvidia à ce dégradé pour obtenir une texture en violet/bleu/vert. Je n’ai plus qu’à appliquer cette texture dans le canal de bump, avec 60 d’intensité et le tour est joué. Attention, cette normale map va également modifier l’application de la texture de réflexion. On auto-illumine pas trop, car cela risque de «cramer » avec l’additif.

Texture de réflexion du cadran

Texture de réflexion du cadran

Dernière astuce, on applique juste une couleur de spéculaire (bleutée), assez fort pour obtenir l’effet souhaité et le tour est joué.

Le cadran finalisé

Le cadran finalisé

Conclusion :

Vos shaders et matériaux vont être au moins aussi importants pour le résultat final de votre image que la qualité de votre modélisation ou que la finesse de votre éclairage. Soyez persévérant, inventif, tentez et expérimentez. Vous pourriez même obtenir des shaders étonnants, simplement en inversant un canal de texture, ou en changeant la couleur du spéculaire. Un dernier conseil ? Le spéculaire est votre meilleur ami et l’un des canaux les plus importants que vous aurez à adresser. Soignez donc bien cette partie.

Monaco complete

Monaco complete

Publicités