[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"work-yame":3},{"id":4,"title":5,"body":6,"description":7,"extension":8,"meta":9,"navigation":137,"path":138,"seo":139,"slug":142,"stem":142,"__hash__":143},"content_fr\u002Fyame.json","Yamê",null,"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.","json",{"modules":10,"preview":124,"layout":125,"thumbnail":126,"updatedAt":127,"date":128,"url":129,"cover_video":15,"cover":130,"tags":131,"year":136},[11,16,21,31,35,39,42,49,52,55,57,61,67,70,76,79,82,84,87,89,92,98,100,102,105,108,114,116,122],{"type":12,"style":13,"format":14,"video":15},"video_module","contain","landscape","https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fvideo\u002Fupload\u002Fv1753352371\u002Fmola_screen_cast.mp4",{"type":17,"gradient":18,"inverse":19,"image":20},"token_module",0.2,false,"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1753438354\u002F%EF%B8%8F.png",{"type":22,"item":23,"style":30},"carousel_module",[24,26,28],{"image":25},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1753438299\u002Fmobile_01_yame.webp",{"image":27},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fvideo\u002Fupload\u002Fv1758789017\u002Fyame_mobile.mp4",{"image":29},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1753438299\u002Fmobile_02_yame.webp","flex",{"type":32,"style":33,"text":34},"text_module","content_right","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](http:\u002F\u002Fwww.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.",{"type":36,"style":37,"image":38},"image_module","cover","https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1753438299\u002Fforest_yame.webp",{"type":32,"style":33,"text":40,"title":41},"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.\n\n\\\nIl 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.","Coordination des contenus, design 2D et features",{"type":43,"item":44},"double_image_module",[45,47],{"image":46},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002Fux.webp",{"image":48},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fkey.webp",{"type":36,"style":37,"image":50,"caption":51},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002Fpalace.webp","",{"type":32,"style":33,"title":53,"text":54},"Design 3D et texturing","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](https:\u002F\u002Fmaury.io) (designer senior) a produit des planches pour chaque univers, ainsi que les objets qui les composent. \n\n\\\nCes é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.",{"type":36,"style":13,"image":56},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729938\u002FAsset_Manager.webp",{"type":32,"style":58,"title":59,"text":60},"small_title","De la modélisation 3D à l’intégration dans la scène ","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.",{"type":43,"item":62},[63,65],{"image":64},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002FWeight_painting.webp",{"image":66},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729938\u002Fasset_drive.webp",{"type":32,"style":58,"title":68,"text":69},"Composition de la scène et instances","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. \n\n\\\nPour 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.",{"type":43,"item":71},[72,74],{"image":73},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729938\u002Fasset_browser_palace.webp",{"image":75},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fnode.webp",{"type":32,"style":58,"title":77,"text":78},"Cycle de mise à jour","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.",{"type":32,"style":58,"title":80,"text":81},"Export final et optimisation","Pour l’export, nous sélectionnons le format GLB en gardant l’option « Geometry Node Instance ». En post-processing, gltf-pipeline intervient pour:\n\n* compresser la géométrie en DRACO\n* convertir les textures en KTX2\n\n\\\nLe résultat pèse moins de 7 Mo, garantissant un chargement rapide et une exécution fluide en WebGL.",{"type":36,"style":37,"image":83},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002Ftimeline_dev.webp",{"type":32,"style":33,"title":85,"text":86},"Développement","La direction artistique repose sur un style graphique proche du comic\u002Fcartoon. Pour reproduire ce style, on combine généralement plusieurs techniques. \n\n\\\nLe 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.",{"type":36,"style":13,"image":88},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fhead_yame.webp",{"type":32,"style":58,"title":90,"text":91},"Seuillage des ombres","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).",{"type":43,"item":93},[94,96],{"image":95},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729945\u002Fyame_moto_profil.webp",{"image":97},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002Fwebgl_demo.webp",{"type":32,"style":33,"text":99},"Ce shader avait un inconvénient : on ne pouvait pas définir séparément les couleurs des zones éclairées et ombragées.\n\n\\\nPar défaut, THREE.js utilise deux composantes :\n\n* « color » (ou albedo) : la couleur diffusée par la lumière\n* « emissive » : la couleur que le matériau émet de lui-même\n\nCes deux couleurs sont simplement additionnées au rendu.\n\n\\\nNous avons donc modifié le shader pour :\n\n1. fixer des seuils d’irradiance\n2. interpoler librement les couleurs intermédiaires selon l’éclairement\n\n\\\nRé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.",{"type":36,"style":13,"image":101},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729938\u002Fbig_rock.webp",{"type":32,"style":58,"title":103,"text":104},"Le tracé des contours","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 : \\\nUn 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. \n\nPour 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.",{"type":36,"style":13,"image":106,"caption":107},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729940\u002Fwiki.webp","Image Source : \u003Chttps:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCel_shading>",{"type":43,"item":109},[110,112],{"image":111},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fmontain.webp",{"image":113},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fmonatain_01.webp",{"type":32,"style":33,"text":115},"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. \n\n\\\nPour 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.",{"type":43,"item":117},[118,120],{"image":119},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729944\u002Fyame_color.webp",{"image":121},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729939\u002Fcontour.webp",{"type":36,"style":37,"image":123},"https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1758729944\u002Fyame_shop.webp","https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1764154124\u002Fmola-zone.com__iPhone_SE.png","case_study","https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fvideo\u002Fupload\u002Fv1791813577\u002Fyame-thumbnail.mp4","2026-10-02","2025-07-25T10:05:49.392Z","https:\u002F\u002Fmola-zone.com\u002F","https:\u002F\u002Fres.cloudinary.com\u002Fneuvieme-page\u002Fimage\u002Fupload\u002Fv1759159146\u002FYame_minia.webp",[132,133,134,135],"VUE.JS","UX & UI design","3D Design","Project management","2025",true,"\u002Fyame",{"title":140,"description":141},"Yamê : expérience web immersive 3D","Pour l’album Ebêm, Yamê imagine un site expérientiel : un univers 3D interactif mêlant lore, mini-jeu et contenus exclusifs.","yame","mTCBptc7SyaH99ztPbYMJPzTRaeRW_PJaRUKThHvORw"]