{"id":447,"date":"2024-06-03T10:14:28","date_gmt":"2024-06-03T09:14:28","guid":{"rendered":"https:\/\/lacuisine.tech\/fr\/?p=447"},"modified":"2024-06-03T10:17:54","modified_gmt":"2024-06-03T09:17:54","slug":"grease-pencil-color-mapper","status":"publish","type":"post","link":"https:\/\/lacuisine.tech\/fr\/grease-pencil-color-mapper\/","title":{"rendered":"Grease Pencil Color Mapper"},"content":{"rendered":"\nIl y a deux ans, nous avons fait le <a href=\"https:\/\/lacuisine.tech\/fr\/grease-pencil-color-picker-un-addon-blender\/\">color picker<\/a>, dans le but d\u2019aider les artistes 2D dans leur t\u00e2che de mise en couleur sur Blender. Cet outil est particuli\u00e8rement utile lorsque les mod\u00e8les comprennent une tr\u00e8s grande liste de mat\u00e9riaux. Nous avons ensuite travaill\u00e9 sur l\u2019exploration de palettes de couleurs. Qu\u2019il s\u2019agisse de composer la palette parfaite pour un personnage, de proposer des alternatives, ou d\u2019adapter une palette existante \u00e0 diff\u00e9rents environnements lumineux, l\u2019exploration de palettes de couleurs en 2D peut \u00eatre laborieuse, en particulier si la palette comprend un grand nombre de couleurs.\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"608\" src=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-1024x608.png\" alt=\"\" class=\"wp-image-448\" srcset=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-1024x608.png 1024w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-300x178.png 300w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-768x456.png 768w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-1536x912.png 1536w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-370x220.png 370w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script-760x451.png 760w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/color_script.png 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Exemple d\u2019application (mapping) de palette de couleurs traduisant un changement d\u2019environnement lumineux sur notre personnage <a href=\"https:\/\/lacuisine.tech\/fr\/billie-une-sequence-danimation-2d-libre\/\">Billie<\/a>. Cr\u00e9dit: Gaelle Diot.<\/em><\/p>\n\n\n\n\n\n<p class=\"has-text-align-left\"><em>Cet article existe en <a href=\"https:\/\/lacuisine.tech\/grease-pencil-color-mapper\/\">anglais<\/a> \/ This article exists in <a href=\"https:\/\/lacuisine.tech\/grease-pencil-color-mapper\/\">English<\/a><\/em>.<\/p>\n\n\n\n\n\n\n\n\n<!--more-->\n\n\n\nCette exploration de palette de couleurs se fait souvent directement sur l\u2019image, \u00e0 l\u2019aide d\u2019un logiciel d\u2019\u00e9dition bitmap comme Krita. Le changement de couleurs est effectu\u00e9 \u00e0 partir d\u2019une s\u00e9lection par couleur sur l\u2019image. Ce proc\u00e9d\u00e9 ne permet pas de s\u00e9parer les couleurs similaires correspondant \u00e0 des zones s\u00e9mantiquement diff\u00e9rentes, et ne prend pas non plus en compte les changements de couleurs li\u00e9e \u00e0 la superposition de couches semi-transparentes, ou autres effets de rendu. En cela, il se rend difficilement automatisable, ce qui pose un probl\u00e8me lorsque l\u2019on veut appliquer le changement de couleur sur une animation enti\u00e8re.\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"995\" src=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-1024x995.png\" alt=\"\" class=\"wp-image-449\" srcset=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-1024x995.png 1024w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-300x291.png 300w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-768x746.png 768w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-1536x1492.png 1536w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-370x359.png 370w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection-760x738.png 760w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_color_selection.png 1569w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Exemple de changements de couleurs effectu\u00e9s manuellement avec le logiciel Krita, pouvant mener \u00e0 des r\u00e9sultats inattendus.<\/em><\/p>\n\n\n\n\n\n<div class=\"wp-container-2 wp-block-columns\">\n<div class=\"wp-container-1 wp-block-column\" style=\"flex-basis:100%\">\nD\u2019un autre c\u00f4t\u00e9, l\u2019outil d\u2019animation 2D de Blender &#8211; le grease pencil &#8211; nous permet de part ses donn\u00e9es vectorielles d\u2019acc\u00e9der directement \u00e0 l\u2019ensemble des couleurs qui ont \u00e9t\u00e9 utilis\u00e9es sur chacune des formes que compose le dessin. Cet acc\u00e8s peut se faire soit par les <em>vertex colors<\/em> ou bien par les mat\u00e9riaux grease pencil. Nous nous concentrons ici sur les mat\u00e9riaux, parce qu\u2019ils sont plus facilement manipulables dans l\u2019interface, et parce qu\u2019ils portent g\u00e9n\u00e9ralement des informations s\u00e9mantiques dans leur organisation, et leurs noms. Les trac\u00e9s vectoriels sont affect\u00e9s \u00e0 un mat\u00e9riau de la liste, ce qui permet facilement de modifier la couleur de tous les trac\u00e9s correspondant \u00e0 un mat\u00e9riau donn\u00e9. Ainsi, si on affecte un mat\u00e9riau sp\u00e9cifique pour la peau par exemple, nous pouvons changer la couleur de la peau de notre personnage \u00e0 partir d\u2019un seul contr\u00f4leur, et sur l\u2019ensemble de l\u2019animation.\n<\/div>\n<\/div>\n\n\n\n\nL\u2019\u00e9dition des couleurs de mat\u00e9riaux grease pencil est cependant une op\u00e9ration destructive, affectant directement les couleurs de la palette initiale. Il existe une m\u00e9thode non-destructive pour \u00e9diter les couleurs d\u2019un objet grease pencil, c\u2019est celle des <em>modifiers<\/em>. En particulier le <em>modifier<\/em> de \u201cTeinte\u201d qui ajoute une teinte sp\u00e9cifique \u00e0 l\u2019objet grease pencil. Par d\u00e9faut, cette teinte s\u2019applique sur tout l\u2019objet, bien que l\u2019on puisse alternativement s\u00e9lectionner des calques ou des mat\u00e9riaux pour que l\u2019effet soit plus cibl\u00e9. On peut donc cr\u00e9er un <em>mapping<\/em> de couleurs \u00e0 travers une liste de <em>modifiers<\/em> appliqu\u00e9s \u00e0 chacun des mat\u00e9riaux. Une telle liste n\u2019est cependant pas vraiment facile \u00e0 manipuler en pratique.\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"547\" src=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-1024x547.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-1024x547.png 1024w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-300x160.png 300w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-768x410.png 768w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-1536x821.png 1536w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-370x198.png 370w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint-760x406.png 760w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_tint.png 1619w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Exemple d\u2019applications du modifier de teinte sur notre personnage Billie, avec diff\u00e9rentes valeurs de facteur.<\/em><\/p>\n\n\n\n\nA partir de ces observations, nous avons voulu combiner l\u2019intuitivit\u00e9 de l\u2019approche bitmap &#8211; clic sur une zone de dessin, choix de la nouvelle couleur &#8211; avec la pr\u00e9cision et la flexibilit\u00e9 de l\u2019approche vectorielle, dans une m\u00e9thode non-destructive. Ainsi est n\u00e9 le Grease Pencil Color Mapper qui permet de cr\u00e9er des surcouches de couleurs sur les mat\u00e9riaux grease pencil d\u2019une sc\u00e8ne. L\u2019utilisateur peut constituer une liste de mat\u00e9riaux existants, and de choisir une couleur de surcouche pour chacun d\u2019entre eux. En effectuant cette op\u00e9ration, le programme va cr\u00e9er un <em>modifier<\/em> de teinte sp\u00e9cifique \u00e0 chacun des mat\u00e9riaux et qui sera manipulable directement via l\u2019interface du <em>color mapper<\/em>. Ce proc\u00e9d\u00e9 ne fonctionne qu\u2019avec des mat\u00e9riaux \u201cplats\u201d, c\u2019est-\u00e0-dire sans texture ni gradients.\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"432\" src=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-1024x432.png\" alt=\"\" class=\"wp-image-453\" srcset=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-1024x432.png 1024w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-300x126.png 300w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-768x324.png 768w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-1536x647.png 1536w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-370x156.png 370w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations-760x320.png 760w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/mapper_operations.png 1898w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Aper\u00e7u de l\u2019interface utilisateur du color mapper.<\/em><\/p>\n\n\n\n\n\n<div class=\"wp-container-4 wp-block-columns\">\n<div class=\"wp-container-3 wp-block-column\" style=\"flex-basis:100%\">\nL\u2019interface montre la liste des applications (<em>mappings)<\/em> cr\u00e9\u00e9es, avec pour chacune le nom du mat\u00e9riau associ\u00e9, ses couleurs de trac\u00e9 et de remplissage initiales, ainsi que la ou les couleur(s) choisies en surcouche. Si le mat\u00e9riau poss\u00e8de \u00e0 la fois une couleur de trac\u00e9 et une couleur de remplissage, alors l\u2019utilisateur peut \u201clier\u201d l\u2019application, c\u2019est-\u00e0-dire de faire pointer la couleur de remplissage et la couleur de trac\u00e9 sur un seul et m\u00eame contr\u00f4leur.\n<\/div>\n<\/div>\n\n\n\n\nPour fluidifier la constitution de la liste d\u2019applications, nous avons ajout\u00e9 un outil permettant de pointer directement dans le visualiseur le mat\u00e9riau dont on veut cr\u00e9er ou \u00e9diter une surcouche de couleur. Cet outil sp\u00e9cifique de s\u00e9lection de mat\u00e9riau dans le visualiseur fera sans doute l\u2019objet d\u2019un prochain article.\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"567\" src=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-1024x567.png\" alt=\"\" class=\"wp-image-458\" srcset=\"https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-1024x567.png 1024w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-300x166.png 300w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-768x426.png 768w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-1536x851.png 1536w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-370x205.png 370w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping-760x421.png 760w, https:\/\/lacuisine.tech\/fr\/wp-content\/uploads\/sites\/2\/2024\/06\/billie_mapping.png 1846w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Exemple d\u2019application de couleurs simple, visant \u00e0 changer la couleur de la jupe du personnage d\u2019orange \u00e0 violet.<\/em><\/p>\n\n\n\n\n\n<div class=\"wp-container-6 wp-block-columns\">\n<div class=\"wp-container-5 wp-block-column\" style=\"flex-basis:100%\">\nLe <em>color mapper<\/em> est donc un outil assez basique pour cr\u00e9er une surcouche de couleurs sur un ensemble de mat\u00e9riaux, de mani\u00e8re non-destructive. Si vous voulez l\u2019essayer, vous le trouverez sur <a href=\"https:\/\/gitlab.com\/lfs.coop\/blender\/gp-color-mapper\">notre gitlab<\/a>.\n<\/div>\n<\/div>\n\n\n\n\n<a href=\"\/8511db2fcb3d47c59e54267c9e2faf4e?pvs=25\">Cette vid\u00e9o <\/a>montre comment le <em>color mapper<\/em> peut \u00eatre utilis\u00e9 pour cr\u00e9er une surcouche de palettes de couleurs \u00e0 partir d\u2019une image de r\u00e9f\u00e9rence. Comme vous pouvez le voir, cette m\u00e9thode trouve ses lorsqu\u2019on essaie d\u2019\u00e9chantilloner des couleurs issues de mat\u00e9riaux semi-transparents. Cependant, les couleurs peuvent toujours \u00eatre r\u00e9-ajust\u00e9es individuellement pour retrouver les bonnes teintes dans ces cas sp\u00e9cifiques.\n\n\n\n\n<div class=\"wp-container-8 wp-block-columns\">\n<div class=\"wp-container-7 wp-block-column\" style=\"flex-basis:100%\">\nEn th\u00e9orie, l\u2019outil <em>color mapper<\/em> peut aussi \u00eatre utilis\u00e9 pour l\u2019exploration de nouvelles palettes de couleurs. Cependant la s\u00e9lection couleur par couleur semble \u00eatre une limite importante pour une exploration fluide des palettes. Alternativement, nous pourrions \u00e9diter les couleurs de mani\u00e8re globale. Nous avons impl\u00e9ment\u00e9 une version simple de cette m\u00e9thode par le biais des <em>preset<\/em>, ici \u201cniveau de gris\u201d mais qui pourrait \u00eatre \u00e9tendue \u00e0 d\u2019autres fonctions couleur \u2192 couleur. Cependant ce syst\u00e8me, similaire \u00e0 l\u2019application d\u2019un filtre sur une image, est lui aussi assez limit\u00e9, par son manque de contr\u00f4le local.\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-container-10 wp-block-columns\">\n<div class=\"wp-container-9 wp-block-column\">\n<strong>Et maintenant ? <\/strong>\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-container-12 wp-block-columns\">\n<div class=\"wp-container-11 wp-block-column\" style=\"flex-basis:100%\">\nIl semblerait pr\u00e9f\u00e9rable de se diriger vers une approche plus hybride, combinant des contr\u00f4les locaux, semi-locaux, et globaux. Une mani\u00e8re na\u00efve de mettre en place une telle approche serait de permettre de verrouiller certaines couleurs et d\u2019\u00e9diter toutes les autres via une m\u00eame op\u00e9ration dans l\u2019espace de couleurs, comme une translation dans l\u2019espace HSV par exemple. Ainsi, l\u2019utilisateur pourrait par exemple s\u00e9lectionner tous les mat\u00e9riaux correspondant \u00e0 la jupe, et effectuer un changement de teinte, ou de valeur sans affecter le reste des mat\u00e9riaux.\n<\/div>\n<\/div>\n\n\n\n\n\n<div class=\"wp-container-14 wp-block-columns\">\n<div class=\"wp-container-13 wp-block-column\" style=\"flex-basis:100%\">\nBien s\u00fbr, cette approche na\u00efve n\u00e9cessite d\u2019\u00eatre am\u00e9lior\u00e9e et approfondie afin de devenir un syst\u00e8me utilisable en pratique. Une de nos principales r\u00e9f\u00e9rences pour la suite de nos travaux est l\u2019article de Mellado et al., paru en 2017 [1] (<a href=\"https:\/\/www.irit.fr\/STORM\/site\/constrained-palette-space-exploration\/\">page de projet)<\/a>. Leur m\u00e9thode utilise une repr\u00e9sentation des palettes par graphe de couleurs, afin de d\u00e9finir des op\u00e9rations s\u2019appliquant de mani\u00e8re non-lin\u00e9aires sur l\u2019ensemble des couleurs. Nous pr\u00e9voyons aussi un travail d\u2019interface, afin de proposer une mani\u00e8re plus intuitive de naviguer dans une longue liste de couleurs contenant des donn\u00e9es s\u00e9mantiques.\n<\/div>\n<\/div>\n\n\n\n\n<em>[1] Mellado, N., Vanderhaeghe, D., Hoarau, C., Christophe, S., Br\u00e9dif, M., &amp; Barthe, L. (2017). Constrained palette-space exploration. ACM Transactions on Graphics (TOG), 36(4), 1-14.<\/em>\n","protected":false},"excerpt":{"rendered":"<p>Il y a deux ans, nous avons fait le color picker, dans le but d\u2019aider les artistes 2D dans leur t\u00e2che de mise en couleur sur Blender. Cet outil est particuli\u00e8rement utile lorsque les mod\u00e8les comprennent une tr\u00e8s grande liste de mat\u00e9riaux. Nous avons ensuite travaill\u00e9 sur l\u2019exploration de palettes de couleurs. Qu\u2019il s\u2019agisse de composer la palette parfaite pour un personnage,&hellip;<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":""},"categories":[19,21,17,18],"tags":[],"_links":{"self":[{"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/posts\/447"}],"collection":[{"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/comments?post=447"}],"version-history":[{"count":40,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/posts\/447\/revisions"}],"predecessor-version":[{"id":494,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/posts\/447\/revisions\/494"}],"wp:attachment":[{"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/media?parent=447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/categories?post=447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacuisine.tech\/fr\/wp-json\/wp\/v2\/tags?post=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}