Studio9P
/loading
000
Studio9P
Yamê est un artiste complet, qui a développé autour de sa musique un univers riche, empreint des racines camerounaises de sa famille. Pour son l’album Ebêm, il a imaginé un dispositif complet avec un court métrage (produit par le studio Mathematics) racontant le concept global, et un site expérience permettant de naviguer librement dans ce lore, et d’y découvrir des pépites, des contenus inédits, mais aussi les jalons qui ont fait son succès, comme la vidéo COLORS avec ses 100 millions de vues.
Découvrir le siteplay
00:00:00
Yamê est venu à nous avec le concept général, celui d’un plateau rotatif sur lequel son avatar à “bécane” se promène à moto. Ici c’est le décor qui défile, à la manière du site www.joshuas.world. Les paysages sont variés, à l’image des changements d’univers dans le court-métrage : le désert, la forêt, le palais etc. Nous nous sommes coordonnés avec Mathematics, qui avait déjà avancé sur les planches créatives du film avec Yamê, afin de coordonner nos décors avec les leurs.
Conçu comme un espace évolutif, le site propose régulièrement de nouveaux contenus, et voit son décor évoluer en fonction. Le site poursuit plusieurs missions complémentaires. Il propose d’abord une variété de contenus dédiés à l’album Ebem.
Il offre également un espace sécurisé, accessible uniquement aux détenteurs de la clé collector. Par ailleurs, il invite les utilisateurs à embarquer sur la bécane de Yamê à travers un mini-jeu interactif. Enfin, il réserve quelques surprises supplémentaires grâce à des easter eggs dissimulés dans le décor.
Tous les décors ont été conçus sur Blender par le studio. Les planches d’inspiration du film de Mathematics ont servi de base, puis Hugo Maury (designer senior) a produit des planches pour chaque univers, ainsi que les objets qui les composent.
Ces éléments (décors posés sur le plateau, et objets du décor) ont ensuite été designés en 3D par Thomas (designer junior), puis texturés par Hugo et Thomas.
Dans ce projet, l’ensemble de la chaîne 3D s’est articulé autour de trois pôles indissociables : la modélisation des objets, leur texturing, puis leur intégration au sein d’une scène unique. L’objectif était d’instaurer un processus fluide, permettant à chaque collaborateur de travailler en parallèle sur ses propres assets et de pouvoir intégrer ses modifications sans craindre de conflit sur les fichiers de travail et ainsi itérer plus rapidement.
La scène principale, elle aussi versionnée de manière isolée, ne contient qu’un unique design spécifique : la forme organique du sol. Les gros volumes (bâtiments, structures, mobiliers volumineux) sont importés depuis l’Asset Manager, positionnés manuellement puis regroupés par type sous des empties (objet null). Chaque groupe partage la même géométrie, ce qui permet d’exporter ces objets sous formes d’instances.
Pour peupler la scène de petits assets (cailloux, plantes, accessoires), nous utilisons un autre procédé : on duplique la surface du sol autant de fois qu’il existe d’assets, et chaque copie devient l’entrée d’un Geometry Node. Avec un opérateur Mesh Boolean, on supprime les endroits du sol où l’on ne souhaite n’avoir aucune instance, puis à l’aide d’une texture de weight-paint, on dessine les zones exactes d’apparition des instances. Le Geometry Node lit ces données de densité et distribue sur la surface du sol.
Dès qu’un asset évolue (forme, UV, textures), le designer réalise sa modélisation dans son fichier dédié et update sa version sur le drive. Dans la scène principale, un simple « Link Object Data » suffit pour rapatrier la nouvelle géométrie et les nouvelles ressources, sans impacter le reste de la composition ni générer de conflits de version.
Pour l’export, nous sélectionnons le format GLB en gardant l’option « Geometry Node Instance ». En post-processing, gltf-pipeline intervient pour:
Le résultat pèse moins de 7 Mo, garantissant un chargement rapide et une exécution fluide en WebGL.
La direction artistique repose sur un style graphique proche du comic/cartoon. Pour reproduire ce style, on combine généralement plusieurs techniques.
Le seuillage des ombres permet de simplifier les zones sombres, tandis que le tracé des contours met en évidence les formes principales. Enfin, l’ajout d’effets de textures vient enrichir l’ensemble et lui donner plus de profondeur.
Le seuillage des ombres est assez simple : THREE.js le gère automatiquement avec le matériau MeshToonMaterial.Le principe consiste à échantillonner l’ombrage – c’est-à-dire les variations de luminosité quand la lumière frappe une surface sous différents angles – puis à regrouper toutes ces nuances en quelques couleurs (généralement 3 à 5).
Ce shader avait un inconvénient : on ne pouvait pas définir séparément les couleurs des zones éclairées et ombragées.
Par défaut, THREE.js utilise deux composantes :
Ces deux couleurs sont simplement additionnées au rendu.
Nous avons donc modifié le shader pour :
Résultat : à gauche, le rendu initial où toutes les textures partagent les mêmes tons ; à droite, le rendu modifié, qui permet de décaler manuellement la teinte en fonction de l’exposition à la lumière.
Cet étape est essentielle dans un rendu toon, les contours rappellent les rendus comics mais permettent aussi de distinguer mieux les volumes qui à cause des aplats de couleurs ont tendance à devenir moins visible. Pour définir ces contours on combine deux techniques :
Un texturing graphique appliqué directement dans les textures et permettant de donner les reliefs et aspérité à l’intérieur de chaque volume propre. Un postprocessing de contours permettant de distinguer les volumes entre eux.
Pour ce dernier point, on utilise un algorithme de détection des contours (type sobel). Cet algorithme est basé sur une matrice de convolution qui va accentuer les différences aux abords d’un pixels. Pour chaque pixel d’une image on vient regarder ses voisins immédiats et plus leur différence est marquée, plus le pixel résultant sera intense, ce filtre agit comme un révélateur de contraste. En appliquant et combinant cette technique sur des rendus particuliers comme une texture de normale (voir image de gauche) ou une texture de profondeur (image central) on arrive à faire ressortir les contours de certains objets.
Image Source : https://en.wikipedia.org/wiki/Cel_shading
Cette méthode marche généralement bien mais pose quelques problèmes et peut permettre l’apparition d’artefacts indésirables. Il peut arriver que des faces d’objet différents se retrouvent juste les unes derrière les autres (différence de profondeur faible) et orienté de la même manière (direction des faces identiques) pour que les différences ne soient pas assez marquées, dans ces cas le contraste est trop faible et la figure le contour n’apparaît pas.
Pour pallier ce problème nous avons séparé par couleurs unique chaque entité dont nous voulions voir les contours. Un algorithme déterministe distribue régulièrement les couleurs les plus éloignées les unes des autres et chaque objet se voit attribuer une couleur.
