{"id":4360,"date":"2021-04-15T15:53:05","date_gmt":"2021-04-15T14:53:05","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4360"},"modified":"2023-09-07T15:51:26","modified_gmt":"2023-09-07T14:51:26","slug":"normal-map-node","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/normal-map-node\/","title":{"rendered":"Normal Map Node"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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-6a066b9ae4ed8\" 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-6a066b9ae4ed8\"  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\/normal-map-node\/#simple-material\" >Simple Material<\/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\/normal-map-node\/#normal-map-node\" >Normal Map Node<\/a><\/li><\/ul><\/nav><\/div>\n<p>Blender generally has the sophistication to render materials that include <a href=\"https:\/\/www.katsbits.com\/codex\/bake-normal-maps\/\">normal maps<\/a> without issue, especially useful for quick content preview. Occasionally however, objects display artefacts and adorations, typically where <a href=\"https:\/\/www.katsbits.com\/codex\/uv-editing\/\">UV Seams<\/a> have been used to unwrap and map a mesh. To address these discrepancies a <b>Normal Map<\/b> node can be dropped into the material tree.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"simple-material\"><\/span>Simple Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When making content for games <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">simple materials<\/a> are often more than enough for preview purposes, that is a material with an <b>Image Texture<\/b> node plugged into the <b>Base Color<\/b> [1], <b>Specular<\/b> [2] and <b>Normal<\/b> [3] inputs of a <b>Principled BSDF<\/b> [4] node, one node instance per input. For such simple materials however, the inclusion of normal maps typically result in render inaccuracies. To address this a <b>Normal Map<\/b> node can be used as a compensatory or corrective property.<\/p>\n<blockquote><p><b>Design note<\/b>: colour values stored in a normlised image, being interpreted as\/representing structure, should inform the render process, how it aught to be modified, typically with respect to <a href=\"https:\/\/www.katsbits.com\/codex\/smoothing\/\">mesh smoothing<\/a> and <a href=\"https:\/\/www.katsbits.com\/codex\/bake-normal-maps\/\">surface detailing<\/a>, and in turn how other aspects of the material then tie together for final output.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/normal-map-node-simple.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/normal-map-node-simple.jpg\" alt=\"A simple material node tree in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For most purposes setting up a material with a simple node-tree is sufficient to get an idea of what the final asset will look like but may present problems if a normal map is part of said material, typically at UV Seams.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"normal-map-node\"><\/span>Normal Map Node<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To address rendering and real-time display issues materials can be modified by dropping a <b>Normal Map<\/b> material node between the <b>Image Texture<\/b> node carrying the normal map image, e.g. <i>normalmap.tga<\/i>, and the <b>Normal<\/b> input of <b>Principled BSDF<\/b> &#8211; <i><b>Image Texture \u00bb Normal Map \u00bb Principled BSDF<\/b><\/i>. To to this,  with the appropriate object selected and material highlighted, in <b>Shading Workspace<\/b> (or the <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">Node Editor<\/a> generally) click the <b>Add<\/b> [5] menu then <b>Vector<\/b> [6], then finally <b>Normal Map<\/b> [7] from the list of options. A node will appear.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/add-vector-normal-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/add-vector-normal-map.jpg\" alt=\"Add a Normal Map Node\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Normal Maps are &#8216;vector&#8217; properties so to add an appropriate node instance, select <b>Vector<\/b> from the Node Editors <b>Add<\/b> menu; <b>Normal Map<\/b> will be an option available in the sub-category menu.<\/i><\/p>\n<p>If space is available drop the <b>Normal Map<\/b> node between the <b>Image Texture<\/b> node holding the normal map itself, and <b>Principled BSDF<\/b>, if the two were connected Blender will automatically adjust the links between the nodes. If not, drop the node into the workspace and ensure <b>Color<\/b> output from the <i>Image Texture<\/i> node [8] is linked to <b>Color<\/b> input of <i>Normal Map<\/i> &#8211; <i><b>Color (Image Texture) \u00bb Color (Normal Map)<\/b><\/i>, and that <b>Normal<\/b> output from the <i>Normal Map<\/i> node is connected to <b>Normal<\/b> input of <i>Principled BSDF<\/i> [9] &#8211; <i><b>Normal (Normal Map) \u00bb Normal (Principled BSDF)<\/b><\/i>. This should immediately correct any aberrations and render the included normal map properly (when Viewport Shading is set to Material Preview or Rendered for both Eevee and Cycles).<\/p>\n<blockquote><p><b>Design note<\/b>: the Normal Map node itself provides a number of settings that control how normal maps are used, primarily the &#8216;space&#8217; represented by the colour palette &#8211; <b>Tangent<\/b>, <b>Object<\/b>, <b>World<\/b> etc., and a <b>Strength<\/b> slider that alters how slight or severe the effect is rendered. In most cases the defaults can be used.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/normal-map-node-connctions.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/normal-map-node-connctions.jpg\" alt=\"Normal Map node connections in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The Normal Map node has to be dropped between the <b>Image Texture<\/b> [8] node carrying the normal map and <b>Principled BSDF<\/b> [9], or at least linked between the two, to work correctly. Once connected the material will be rendered properly normalised.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4368,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,32,230],"tags":[777,327,172,388,519],"class_list":["post-4360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-texturing","category-tutorials","tag-material-nodes","tag-node-editor","tag-normal-map","tag-principled-bsdf","tag-shading-workspace"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4360","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=4360"}],"version-history":[{"count":19,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4360\/revisions"}],"predecessor-version":[{"id":5036,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4360\/revisions\/5036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/4368"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}