{"id":2041,"date":"2024-04-09T16:43:07","date_gmt":"2024-04-09T15:43:07","guid":{"rendered":"https:\/\/www.katsbits.com\/site\/?p=2041"},"modified":"2024-04-09T16:43:07","modified_gmt":"2024-04-09T15:43:07","slug":"normal-map-orientation-applied-to-models","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/site\/normal-map-orientation-applied-to-models\/","title":{"rendered":"Normal Maps, Texture Space &#038; Orientation on Models"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/a><\/span><\/div>\n<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\/site\/normal-map-orientation-applied-to-models\/#Dynamic_Lights_Normal_Maps\" >Dynamic  Lights &amp; Normal Maps<\/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\/site\/normal-map-orientation-applied-to-models\/#UVW_Tiling_Texture_Position_Orientation\" >UVW Tiling, Texture Position &amp; Orientation<\/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\/site\/normal-map-orientation-applied-to-models\/#How_to_Fix_Orientation_Issues\" >How to Fix Orientation Issues<\/a><\/li><\/ul><\/nav><\/div>\n<p>If you&#8217;re starting to get into the creation of normal maps for your own or other mod projects then here&#8217;s a little tip that you may not have thought about, and it might explain why you get odd results some times where you don&#8217;t expect them.<\/p>\n<p>In the past when making assets for game based on light mapped or vertex lit rendering engines, artists have been concerned with &#8216;texture space&#8217;, that is, trying to squeeze as much out of a given image size as possible because the orientation of the image didn&#8217;t matter; applying textures to brush faces or models allowed level designers and modellers to simply rotate a texture in pace so it faced the right direction.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dynamic_Lights_Normal_Maps\"><\/span>Dynamic  Lights &amp; Normal Maps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you carry over your texture techniques into the new dynamically lit engines however, creating 2D artwork from which you need to render normal maps needs a bit of thought to get round a problem that you don&#8217;t initially think of when your head is buried in Photoshop et-al.<\/p>\n<p>Take a look at the image below, it&#8217;s a height template that&#8217;s going to be used to generate a normal map for application to a model; the model happens to be a stone pillar. In order to get as good a texture space usage as possible out of a single 512&#215;512 texture the artist (me) has gone ahead with their traditional techniques and positioned of the two sections so a &#8216;split&#8217; runs down the centre of the image; this allows a good tiling vs texture density ratio; the &#8216;bricks&#8217; of the pillar on the left; the &#8216;trim\/base&#8217; on the right.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/normal_height_template.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" height=\"440\" alt=\"original template image\" title=\"original template image\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/normal_height_template.jpg\" width=\"428\" border=\"0\" \/><\/a><\/p>\n<p>Gray scale template ready for rendering to normal map<\/p>\n<\/p><\/div>\n<p>If you run this through a 2D to normal map converter (I used the GIMP&#8217;s normal map filter for this example) you&#8217;ll get the image below, there&#8217;s nothing overtly wrong with that image on initial inspection until you start to think about something; <b>which way is &#8216;up&#8217;?!<\/b>.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/pillar_v3b_local.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/pillar_v3b_local.jpg\" width=\"428\" border=\"0\" height=\"428\" alt=\"original normal map\" title=\"original normal map\"  \/><\/a><\/p>\n<p>Normal map rendered from the original template<\/p>\n<\/p><\/div>\n<p>Because of the way normal maps are implemented by game engines, rendering the &#8216;bump&#8217; effect in game means the engine gets it directional data (which way the texture is supposed to be facing) from the colours present in the normal map; depending on how those colours are being read, the game will render up\/down, left\/right and height\/depth accordingly.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"UVW_Tiling_Texture_Position_Orientation\"><\/span>UVW Tiling, Texture Position &amp; Orientation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There&#8217;s a problem here with the original template, the trim section has been rotated so it&#8217;s positioned to get the best tiling and texture density ratio possible on a 512&#215;512. This now means that the trim section is effectively physically lying on it&#8217;s side, the result of this being that the normal map converter will rendered the colour orientation according to that position.<\/p>\n<p>If you were put this into game as is, in spite of rotating the texture in a level design editor or 3D modeling application, you&#8217;d find the brick body displaying correctly in game; shadows and highlights behave correctly. Looking at the base trim however, you&#8217;re likely to find at least one of the &#8216;axis&#8217; inverted with the result that the object is rendering shadows and highlights &#8216;backwards&#8217; &#8211; it&#8217;s showing highlights when it should be showing shadows.<\/p>\n<p>It&#8217;s doing this because the colour orientation of the normal map rendered from the template is incorrect for the trim section. As mentioned above the image was lying on it&#8217;s side when rendered to normal map so the lighting in game looks at the normal map based on that; in effect one (or more) of the axis&#8217;s are flipped; lying on it&#8217;s side like this means the top\/bottom axis is actually left\/right as the normal map converter see&#8217;s it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_to_Fix_Orientation_Issues\"><\/span>How to Fix Orientation Issues<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this particular instance the fix can&#8217;t be done by flipping individual channels until the texture shows up correctly; because only a section of the image is wrong, trying to correct it that way means &#8216;breaking&#8217; the sections that were previously OK.<\/p>\n<p>What needs to be done instead is for the original template image to be split into two separate images, for the trim to then be rotated so it&#8217;s aligned to the correct orientation for what it represents, and <i>then<\/i> for both to be rendered to normal maps <b>separately<\/b>. This now means that both sections are rendered according to the correct interpretation of &#8216;up&#8217; so when they show up in game the light\/shadows render relative to the normal map.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/corrected-orientation.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_map_tips\/corrected-orientation.jpg\" alt=\"Corrected Orientation of normal maps\" width=\"256\" height=\"512\" border=\"0\" \/><\/a><\/p>\n<p>Correctly orientated templates and rendered normal maps<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[276,277,278,515,261,516,506,239],"class_list":["post-2041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-blender-2-5x","tag-blender-2-6x","tag-blender-2-7x","tag-dynamic-light","tag-normal-maps","tag-texture-space","tag-texturing","tag-uv-editing"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/comments?post=2041"}],"version-history":[{"count":1,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2041\/revisions"}],"predecessor-version":[{"id":2045,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2041\/revisions\/2045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media\/2042"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media?parent=2041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/categories?post=2041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/tags?post=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}