{"id":5958,"date":"2022-09-11T16:30:21","date_gmt":"2022-09-11T15:30:21","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=5958"},"modified":"2025-12-16T18:29:03","modified_gmt":"2025-12-16T18:29:03","slug":"vertex-painting","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/vertex-painting\/","title":{"rendered":"Vertex Painting\/Vertex Color"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fa40077141b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69fa40077141b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/vertex-painting\/#vertex-paint-mode\" >Vertex Paint Mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/vertex-painting\/#vertex-painting-colour\" >Vertex Painting Colour<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/vertex-painting\/#vertex-color-material-preview\" >Vertex Color &#038; Material Preview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/vertex-painting\/#vertex-color-edge-flow\" >Vertex Color &#038; Edge Flow<\/a><\/li><\/ul><\/nav><\/div>\n<p>A cost effective way to change the appearance of an object that&#8217;s already UV mapped with a Diffuse (Base Color) image is to use <b>Vertex Color<\/b>. Here, objects can be tinted by painting colour or tonal information to the mesh in <b>Vertex Paint<\/b> mode. Depending on where the mesh is then used the vertex colouring will modify the objects appearance without unduly taxing the rendering system.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"vertex-paint-mode\"><\/span>Vertex Paint Mode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Painting vertex colours to a mesh is relatively straight forward. In the main 3D Viewport switch the Viewport Shading mode to <b>Solid<\/b> [1] then from the interaction mode menu (<span class=\"shortcutkey\">Ctrl<\/span> + <span class=\"shortcutkey\">Tab<\/span> \u00bb <span class=\"shortcutkey\">8<\/span>) set <b>Vertex Paint<\/b> [2] as the active mode. The mouse cursor will change to a circle, the <b>Tool Settings<\/b> toolbar will appear (can be toggled from <b><i>View \u00bb Tool Settings<\/i><\/b>), and the object to be painted will render a uniform grey.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: by default vertex colours do not display in Material Preview or Rendered view for Eevee or Cycles (<a href=\"#vertex-color-material-preview\">see below<\/a>). In addition, while selecting multiple Objects (<a href=\"https:\/\/www.katsbits.com\/codex\/multi-object-editing\/\">multi-select<\/a>) is possible only the active item with the group can be painted.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: to exit <b>Vertex Paint<\/b> mode select <b>Object Mode<\/b> from the interaction mode menu or use <span class=\"shortcutkey\">Ctrl<\/span> + <span class=\"shortcutkey\">Tab<\/span> \u00bb [mode].<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-mode.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-mode.jpg\" alt=\"Enabling Vertex Paint mode\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Visible in Solid Viewport Display [1], <b>Vertex Paint<\/b> is an interaction mode [2] that changes the 3D Viewports behaviour [3] with a separate toolset [4] available for painting meshes.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"vertex-painting-colour\"><\/span>Vertex Painting Colour<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once Vertex Paint mode is active, to actually paint <i>click<\/i>, or <i>click-hold and drag<\/i>, the mouse cursor across the selected object to affect a &#8216;painting&#8217; action that applies colour to the mesh, infusing tonal information to individual vertices as the cursor passes over them [5]. To change the colour used, in the <b>Tool Setting<\/b> header click the <b>Color<\/b> and\/or <b>Secondary Color<\/b> &#8216;samplers&#8217; [6] then (re)paint.<\/p>\n<blockquote><p><b>Design note<\/b>: the default colour attribute for the paint brush is &#8216;black&#8217;, for mesh vertices it&#8217;s &#8216;white&#8217; &#8211; vertices are essentially &#8216;white&#8217; by default. As a result painting &#8216;white&#8217; as a colour won&#8217;t appear to do anything unless its overriding or replacing a previously assigned colour value. This is effectively how colour is &#8216;removed&#8217; or &#8216;deleted&#8217; once painted (notwithstanding using <span class=\"shortcutkey\">Ctrl<\/span> + <span class=\"shortcutkey\">Z<\/span> to <b>Undo<\/b> activity history).<\/p>\n<p>To aid the painting process, in Object Properties enable <b>Wireframe<\/b> [i] overlay in the <b>Viewport Display<\/b> options to reveal the object structure [ii], following this around a mesh vertices can be more easily located and painted to.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-wireframe.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-wireframe.jpg\" alt=\"Enable wireframe for easier painting\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In <b>Object Properties<\/b> enable <b>Wireframe<\/b> [i] to make it easier to locate vertices [ii] for painting.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-color-selection.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-paint-color-selection.jpg\" alt=\"Colour selection and painting\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To paint vertex colours to meshes simply click or click-drag the mouse cursor over the selected object to &#8216;paint&#8217; [5]. Colour can be changed using the <b>Color<\/b> sampler [6].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"vertex-color-material-preview\"><\/span>Vertex Color &#038; Material Preview<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whilst vertex painting <b>Viewport Shading<\/b> ordinarily has be set to <b>Solid<\/b> mode as the colours do not display in Material Preview [7] or Rendered mode for either Eevee or Cycles render engines. Additionally when <b>Vertex Paint<\/b> mode is active meshes only display grey, images are not shown. This is not particularly useful when painting, especially if doing so is to tint UV mapped images, as context is then missing. To address this, existing materials can be modified to include a <b>Color Attribute<\/b> node that allows for the correct display in both <b>Material Preview<\/b> and <b>Rendered<\/b> modes for both render engines.<\/p>\n<blockquote><p><b>Design note<\/b>: once a material is set up vertex painting can then proceed as normal while textures are visible in the viewport.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-preview.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-preview.jpg\" alt=\"No color in Material Preview\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Vertex Colors do not display in Material Preview [7] or Rendered mode for either Eevee or Cycles.<\/i><\/p>\n<p>To do this, switch to <b>Shading<\/b> workspace and in the Node Editor click the <strong>Add<\/strong> menu, <strong>Input<\/strong> then select <b>Color Attribute<\/b> [8] from the options available &#8211; <b><i>Add \u00bb Input \u00bb Color Attribute<\/i><\/b>. A new node will appear [9]. Click and drop into place then set the vertex color datablock by clicking the <b>Color Attribute<\/b> input field and selecting <b>Col<\/b> from the list [10].<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><strong>Important<\/strong>: as of <strong>Blender 3.0<\/strong> the vertex colour datablock shown in <strong>Color Attributes<\/strong> (formally <strong>Vertex Colors<\/strong>) is named &#8220;<strong>Attribute<\/strong>&#8221; not &#8220;Col&#8221;. This can be changed where needed however, by double-clicking the entry and typing a new name &#8211; material node assignments may need to be manually updated to correctly reference the re-named datablock.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-node.jpg\" alt=\"Adding a Color Attribute node\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>From Add, Input, select <b>Color Attribute<\/b> [8] and drop the node into each\/an existing material [9] so their behaviour can be changed to include vertex colour display alongside standard diffuse (Base Color) images.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-data.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-data.jpg\" alt=\"Setting the appropriate color input\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To pull the appropriate vertex colour datablock into the Material, set <b>Col<\/b> [10] (selected from the list) as the <b>Color Attribute<\/b> input.<\/i><\/p>\n<p>Next, drop a <b>MixRGB<\/b> [11] node into the material tree, from <b>Add<\/b> click <b>Color<\/b> then <b>MixRGB<\/b> &#8211; <b><i>Add \u00bb Color \u00bb MixRGB<\/i><\/b> [12] &#8211; then link the nodes together; from the Color Attribute node link <b>Color<\/b> <i>output<\/i> to <b>Color1<\/b>, the first (upper) <i>input<\/i> of <b>MixRGB<\/b>, then in the <b>Image Texture<\/b> node carrying the diffuse image (Base Color) that&#8217;s visible in the 3D Viewport, connect its <b>Color<\/b> <i>output<\/i> to <b>Color2<\/b>, the second <i>input<\/i> of <b>MixRGB<\/b> &#8211; <i>the two Color outputs should be linked to one input each of MixRGB<\/i> [13]. Finally, from <b>MixRGB<\/b> connect <b>Color<\/b> <i>output<\/i> to <b>Base Color<\/b> <i>input<\/i> of <b>Principled BSDF<\/b>; set <b>Fac<\/b> to <b>1.000<\/b> [14] and change the &#8216;mode&#8217; from <b>Mix<\/b> (default) to <b>Multiply<\/b> [15]. Repeat for each material assigned to the mesh which is to utilise vertex colours. Done correctly vertex colours will then display on the mesh in Material Preview and Rendered mode in addition to when Vertex Paint is active.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-mixrgb.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-mixrgb.jpg\" alt=\"Drop a MixRGB node\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For vertex colouring to appear in the 3D Viewport the datablock needs to be linked through a MixRGB [11] node &#8211; <b>Add \u00bb Color \u00bb MixRGB<\/b> [12]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-attribute-settings.jpg\" alt=\"Node tree connections\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-material-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-material-node-tree.jpg\" alt=\"Node tree connections\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; which in turn needs to be linked [13] and set to use an appropriate &#8216;blend&#8217; value, <b>Fac: 1.000<\/b> [14], and &#8216;mode&#8217;, <b>Multiply<\/b> [15], to mix the vertex colours with the diffuse (Base Color), the combination then shown in both Material Preview and Rendered mode correctly. Image bottom &#8211; full material tree that includes normal and specular maps.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"vertex-color-edge-flow\"><\/span>Vertex Color &#038; Edge Flow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whilst vertex colours are essentially baked to individual vertices they also propagate along edges. For example, blue and green painted to opposite corners of a face or area will blend correctly at the centre only if there&#8217;s a shared diagonal edge between the two points along which the colours can bleed. As a result the effect may bleed and blend across one face [16] or area but not another [17]. To address this issue <b>Rotate Edge CW<\/b> and <b>Rotate Edge CCW<\/b> can be used.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-edge-bleed.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-edge-bleed.jpg\" alt=\"Edge orientation and colour bleed\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Although colour information is baked to individual vertices it does bleed along edges that can work for [16] or against [17] the effects distribution across the mesh depending on shared elements orientation.<\/i><\/p>\n<p>To do this, toggle in to <b>Edit Mode<\/b> and select the face or group of faces to be amended. From the <b>Face<\/b> menu click <b>Triangulate Faces<\/b> [18] to break the selection into individual triangles &#8211; <b><i>Face \u00bb Triangulate<\/i><\/b> (alternatively <span class=\"shortcutkey\">Ctrl<\/span> + <span class=\"shortcutkey\">T<\/span>). Next, select the now exposed edge or edges that need to be rotated and from the Edge menu choose Rotate Edge CW or Rotate Edge CCW. The selection will rotate appropriately [20] depending on the number of times the menu option is clicked. Returning back to <b>Vertex Paint<\/b> (toggle out of Edit Mode) the colours painted to the mesh will be distributed based on the now modified edge flow [21].<\/p>\n<blockquote><p><b>Design note<\/b>: &#8220;<b>CW<\/b>&#8221; means &#8216;<i>Clockwise<\/i>&#8216; (rotates top \u00bb right \u00bb bottom \u00bb left); &#8220;<b>CCW<\/b>&#8221; means &#8216;<i>Counter Clockwise<\/i>&#8216; (rotates top \u00bb left \u00bb bottom \u00bb right).<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-triangulate.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-triangulate.jpg\" alt=\"Face triangulation\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To correct the distribution or colour bleed faces need to be broken down into triangles to expose shared edges [18]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-rotate-edge.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-rotate-edge.jpg\" alt=\"Edge rotate\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; which can then be rotated [19] to change their orientation relative to corner vertices [20]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-edge-flow.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/vertex-color\/vertex-color-edge-flow.jpg\" alt=\"Edge bleed\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; which in-turn change the orientation of vertex colour bleed [21] between individual painted vertices.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6481,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[909,327,841,367,910,908,907,691],"class_list":["post-5958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-material-preview","tag-node-editor","tag-rotate-edge","tag-shader-editor","tag-triangulate","tag-vertex-color","tag-vertex-paint","tag-vertex-painting"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=5958"}],"version-history":[{"count":37,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5958\/revisions"}],"predecessor-version":[{"id":10167,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5958\/revisions\/10167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/6481"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=5958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=5958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=5958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}