{"id":1403,"date":"2019-06-18T03:46:24","date_gmt":"2019-06-18T02:46:24","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=1403"},"modified":"2023-09-07T15:54:34","modified_gmt":"2023-09-07T14:54:34","slug":"bsdf-normal-maps","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/bsdf-normal-maps\/","title":{"rendered":"BSDF &#038; Normal Maps"},"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-69f19f067d41d\" 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-69f19f067d41d\"  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\/bsdf-normal-maps\/#standard-material\" >Standard 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\/bsdf-normal-maps\/#normal-map-node\" >Normal Map Node<\/a><\/li><\/ul><\/nav><\/div>\n<p>As with other aspects of <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">Blender 2.8&#8217;s node-based material system<\/a>, the changes and improvements also affect how materials make use of normal maps, the external bitmap\/image variety common to game or content creation. To function properly, a dedicated <b>Normal Map<\/b> node has to be used as part of a larger material node-tree, that once set up, results in a material that responds correctly to real-time lighting and Scene illumination.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits_basic-normal-map.zip\">example node based normal map material *.blend<\/a> (c.2 MB).<\/p><\/blockquote>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: Blender may use different RGB colour orientations for normal maps than other real-time game or rendering engines which might mean the <b>red<\/b> and\/or\/both <b>green<\/b> colour channels (<b>blue<\/b> is typically unused in this context) being &#8216;flipped&#8217; or inverted in an image or photo editor for proper functionality. For more help with this see &#8216;<a href=\"https:\/\/www.katsbits.com\/tutorials\/textures\/how-not-to-make-normal-maps-from-photos-or-images.php\">How NOT to make Normal Maps<\/a>&#8216;.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/inverted-channels.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/inverted-channels.jpg\" alt=\"Colour orientation may need to be adjusted for Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Normal maps used in Blender may need to be be &#8216;channel flipped&#8217;, i.e. the red (left\/right) or green (top-bottom) colour channels inverted so the normalised effect works correctly in response to dynamic\/real-time lighting.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/nodes-normal-map-door.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/nodes-normal-map-door.jpg\" alt=\"Material with normal map and door texture\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A door textures that&#8217;s been modified to accommodate use of a normal map (courtesy of Return to Castle Wolfenstein) exhibiting per-pixel shading effects as a light source moves in relation to the object.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"standard-material\"><\/span>Standard Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Normal maps generally don&#8217;t work on their own (unless used as both &#8216;normal&#8217; and &#8216;colour&#8217; components of a material) so a <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">standard or basic material<\/a> will first need to be created to hold a &#8216;diffuse&#8217; or &#8216;color&#8217; image. To do this, select the object in question and click the <b>Material<\/b> Properties button. Here create a Material instance (or select if available) and assign to the object (auto-assigned if object is selected beforehand). Ensure <b>Use Nodes<\/b> is enabled, switch to <strong>Shading Workspace<\/strong> and add an <b>Image Texture<\/b> node (<i><b>Add \u00bb Texture \u00bb Image Texture<\/b><\/i>). To this create a <b>+ New<\/b> texture or <b>Open<\/b> a preexisting image, e.g. door.tga, and then link <b>Color<\/b> output [1] to <b>Base Color<\/b> input [2] &#8211; <i>Image Texture to Principled BSDF<\/i>. This creates a basic material that will appear in the 3D View (upper section of Shading workspace).<\/p>\n<blockquote><p><b>Design note<\/b>: some materials won&#8217;t appear on the mesh, or correctly orientated or positioned, unless the object being textured is UV unwrapped and mapped, in the example shown below, to the Image Texture node associated with the standard material described above.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/basic-material-uv-mapped.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/basic-material-uv-mapped.jpg\" alt=\"With a basic Material applied the object can be UV mapped\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Creating a basic Material aids objects being properly UV unwrapped and mapped. Without this nothing appears on the mesh when the material is completed or assigned.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/nodes-normal-map-basic-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/nodes-normal-map-basic-material.jpg\" alt=\"A basic node-based Material in the Node Editor\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Normal maps generally don&#8217;t work without other components of a Material being present so they need to be generated first, a basic node tree that contains a <b>Texture Image<\/b> node [1] will suffice (shown above as a flat brown for clarity) that&#8217;s linked to the <b>Principled BSDF<\/b> node [2].<\/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>With a basic material set up to include normal map functionality, in the <b>Node Editor<\/b> add a <b>Normal Map<\/b> node from <i><b>Add \u00bb Vector \u00bb Normal Map<\/b><\/i> [1]. This will drop a new node into the workspace, <b>Normal Map<\/b> [2] (the nodes header will be purple indicating its association with <i>Vector<\/i> based functionality). Check the <b>Space<\/b> is set to <b>Tangent<\/b> (or appropriate setting per intended use &#8211; default is Tangent).<\/p>\n<blockquote><p><b>Design note<\/b>: make sure to select <b>Normal Map<\/b> not <b>Normal<\/b>, the two nodes are different.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-node.jpg\" alt=\"Add a Normal Map node to the material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once a basic material is available add a <b>Normal Map<\/b> node to the workspace from <b>Add \u00bb Vector \u00bb Normal Map<\/b>. Set <strong>Space<\/strong> to <strong>Tangent<\/strong> (or appropriate option per intended use if not already set &#8211; &#8216;Tangent&#8217; is the default).<\/i><\/p>\n<p>To this, from <b>Add \u00bb Texture \u00bb Image Texture<\/b>, place another <b>Image Texture<\/b> node [3], load in (click <b>Open<\/b>) the RGB normal map image (bitmap) that&#8217;s to be used as the materials normal map, then set <b>Color Space<\/b> to <b>Non-Color Data<\/b> [3].<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: <b>Non-Color Data<\/b> essentially nullifies the normal maps intense RGB colours influencing the materials final (diffuse) appearance &#8211; without this setting normals can appear broken or incorrectly lit.<\/p><\/blockquote>\n<p>Once the Image Texture node is set up, link <b>Color<\/b> output [3] to <b>Color<\/b> input [4] <i>connecting Image Texture and Normal Map nodes together<\/i>, then <b>Normal<\/b> output [4] to <b>Normal<\/b> input [5] <i>linking Normal Map to Principled BSDF<\/i>. This activates the normal map so the effect, per-pixel shading, displays on the object in the preview area.<\/p>\n<blockquote><p><b>Design note<\/b>: depending on the diffuse (&#8216;Color&#8217;) image assigned to the material, the normalised effect may not be readily apparent (cf. <a href=\"https:\/\/www.katsbits.com\/tutorials\/textures\/how-not-to-make-normal-maps-from-photos-or-images.php\">How NOT to make normal maps<\/a>). To compensate for this increase the <b>Strength<\/b> value (default 1.000) attributed to the <b>Normal Map<\/b> node, larger values equal stronger effect (the slider maxes out at 10.000 but higher values can be manually typed).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-strength.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-strength.jpg\" alt=\"Increasing the normal maps effect\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Increasing the <b>Strength<\/b> of the normal map to make the effect more pronounced.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/normal-map-node-tree.jpg\" alt=\"Link the nodes together so the normal map is used\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once an <b>Image Texture<\/b> and <strong>Normal Map<\/strong> nodes are available they can be linked together and then to <b>Principled BSDF<\/b> (via the Normal Map node) to form a node chain (branch) that complete the material tree. Subject to other elements of the material, the normal map effect will then display in the <b>3D View<\/b>.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/bsdf-normal-maps.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normals\/bsdf-normal-maps.jpg\" alt=\"A door object with normal map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A door mesh object, little more than a six sided door-shaped cube (six polygons total and mapped a flat colour for clarity), appears with structural detailing that&#8217;s provided solely by the assigned normal map (without the object appears as a flat object), it reacts in real-time to changes in scene lighting as a result.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1405,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[521,386,103,327,172,388,519,520],"class_list":["post-1403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-bsdf","tag-image-texture","tag-materials","tag-node-editor","tag-normal-map","tag-principled-bsdf","tag-shading-workspace","tag-vector"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1403","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=1403"}],"version-history":[{"count":4,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1403\/revisions"}],"predecessor-version":[{"id":5155,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1403\/revisions\/5155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/1405"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=1403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=1403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}