{"id":3747,"date":"2020-10-09T17:49:20","date_gmt":"2020-10-09T16:49:20","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=3747"},"modified":"2023-09-07T15:51:56","modified_gmt":"2023-09-07T14:51:56","slug":"imvu-studio-normal-map","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/imvu-studio-normal-map\/","title":{"rendered":"Normal Maps &#038; IMVU Studio"},"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-69f1a767e7b66\" 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-69f1a767e7b66\"  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\/imvu-studio-normal-map\/#normal-maps\" >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\/codex\/imvu-studio-normal-map\/#golden-rules-of-normals-from-image\" >Golden Rules of Normals from Image<\/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\/imvu-studio-normal-map\/#normal-map-from-image\" >Normal Map from Image<\/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\/imvu-studio-normal-map\/#normal-map-filter\" >Normal Map Filter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/imvu-studio-normal-map\/#normal-map-in-studio\" >Normal Map in Studio<\/a><\/li><\/ul><\/nav><\/div>\n<p>With the advent of IMVU Studio products can be assembled to include additional effects, <b>Shininess<\/b> and <b>Normal<\/b>, both special images, or &#8216;maps&#8217;, that enhance and objects appearance displaying light-responsive highlights and increased surface detail without using what would otherwise be a lot of superfluous mesh complexity. These are optional texture assets and both be made in a 2D photo or image editor.<\/p>\n<blockquote><p><b>Design note<\/b>: for more information on creating normal maps read &#8220;<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>&#8221; here.<\/p><\/blockquote>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: software or tools for converting images to normal maps; <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, <a href=\"http:\/\/charles.hollemeersch.net\/njob\/\">nJob<\/a>.<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"normal-maps\"><\/span>Normal Maps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Without getting too technical normal maps work by interpreting a particular palette of colours as being representative of surface orientation, that they essentially store complex three-dimensional structural information in a less resource hungry two-dimensional, easily compressed, image format. With this in mind, when looking at a normal map each coloured pixel represents a &#8216;vector&#8217;, the angle, direction or orientation a corresponding face might be pointing, and as part of a larger image, the shapes, forms and detail this may describe. Because of this making normal maps tends to employ special tools or processes;<\/p>\n<p> 1) <a href=\"https:\/\/www.katsbits.com\/codex\/bake-normal-maps\/\">normal maps are baked using high-resolution meshes<\/a>.<br \/>\n 2) <a href=\"https:\/\/www.katsbits.com\/tutorials\/textures\/making-normal-maps-from-photographs.php\">normal maps are converted or generated from 2D images or artwork<\/a>.<\/p>\n<blockquote><p><b>Important<\/b>: for normal maps to work properly the colours used conform to a specific range or palette (&#8216;normalised&#8217;) else rendering issues can occur (&#8216;non-normalised&#8217;).<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-normal-map-high-res.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-normal-map-high-res.jpg\" alt=\"High and low resolution meshes for normal map baking\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The preferred way to make normal maps is to &#8216;bake&#8217; them from high-resolution meshes but this can be time-consuming and can strain resources as the mesh density required can run into the high millions of polygons.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"golden-rules-of-normals-from-image\"><\/span>Golden Rules of Normals from Image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To generate normal maps from images a few ground or golden rules need to be observed;<\/p>\n<blockquote style=\"background-color: #E7FAEA; color: #000;\"><p> 1) Image should be grey-scale tone only.<br \/>\n 2) White represents height, black depth.<br \/>\n 3) Height &#038; depth are relative to the average.<\/p><\/blockquote>\n<p>Before images are converted to normal maps then this means they need to be painted, created or converted to being fully grey-scale, there should be no RGB (Red, Green, Blue) colours present, and the structure is relative to white being the highest point, black being the lowest. In other words processing a photograph of something that includes shiny highlights and shadows will invariably result in a malformed normal map, one that shows structural peaks where shiny highlights occur and indentations where there are shadows.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: Highlight = Height. Darkness = Depth.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-shadows.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-shadows.jpg\" alt=\"Photo that includes highlights and shadows\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-shadows-normals.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-shadows-normals.jpg\" alt=\"Malformed normal map processed from photo\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Shown above for illustrative purposes &#8211; this should not ordinarily be done &#8211; a flower is shown with shadows occluding strong highlights (top) and the resulting normal map (below) &#8211; the tool used has &#8216;correctly&#8217; interpreted the darker tones as depth however, relative to the subject, this means the effect is malformed in those areas, the contrast creates a hard edge in the normal map.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"normal-map-from-image\"><\/span>Normal Map from Image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With the above in mind, to convert an image or photograph into a normal paint, create or generate the image to be converted as, or using, grey-scale tones ensuring the <i>height is represented by light tones and depth by dark<\/i>.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: the image to be converted needs to be painted or created using grey-scale tonal values not necessarily be converted to a grey-scale ICC Colour Profile. In other words it can remain a 24 bit RGB image but <b>consist solely of grey tones<\/b> rather than an 8 bit (single channel) grey-scale image.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-grey-scale.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-grey-scale.jpg\" alt=\"Image painted using grey-scale tones\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Image (a pumpkin skin) converted to and painted in grey-scale tonal values, darker tones will recede, lighter tones protrude from an averaged value between the two extremes, brightest and darkest.<\/i><\/p>\n<p>Next, and depending on the image editor, <i>flatten the image<\/i> to &#8216;background&#8217; or &#8216;layer&#8217; then optionally, if using an external normal map converter, <i>Save As<\/i> or <i>Export<\/i> the template to a <b>lossless image format<\/b>, or a format with image compression disabled, e.g. <b>*.bmp<\/b>, <b>*.tif<\/b>, <b>*.tga<\/b> etc. &#8211; the image should be saved in a raw state absent compression artifacts. The externally saved image can then be opened in another application for processing and conversion to a normal map.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-external-gimp.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-external-gimp.jpg\" alt=\"Saved image open in GIMP\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-external-njob.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-external-njob.jpg\" alt=\"Saved image open in nJob\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The saved image, originally exported from Affinity Photo image editor, can be opened in another application for processing, e.g. GIMP (top &#8211; zoomed in) or nJob (bottom &#8211; to scale).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"normal-map-filter\"><\/span>Normal Map Filter<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>How the grey-scale image is actually converted to a normal map will depend on the image editor or conversion tool being used. To convert using <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, with the grey-scale template open access the <b>Filters<\/b> menu [1], select <b>Generic<\/b> [2] then finally <b>Normal Map&#8230;<\/b> [3] from the listed options &#8211; <i><b>Filters \u00bb Generic \u00bb Normal Map&#8230;<\/b><\/i>. The <b>Normal Map<\/b> filter interface will appear [4] and convert the image into a normal map [5]. Click <b>OK<\/b> to complete [6].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-gimp-filters.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-gimp-filters.jpg\" alt=\"GIMP filter for Normal Map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-gimp-normal-map-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-gimp-normal-map-settings.jpg\" alt=\"GIMP filter for Normal Map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In GIMP the grey-scale image can be converted using the inbuilt normal map filter &#8211; from the <b>Filters<\/b> menu [1] select <b>Generic<\/b> [2] then <b>Normal Map&#8230;<\/b> [3] from the options available, the filter dialogue will appear [4] with various settings and the image converted in the background (real-time preview) [5].<\/i><\/p>\n<p>To convert an image in nJob, load in file then from the <b>Filter<\/b> menu [7] select <b>Heightmap > Normalmap<\/b> [8] &#8211; <b><i>Filter \u00bb Heightmap > Normal map<\/i><\/b>. A <b>Height to Normal<\/b> [9] filter dialogue popup will appear with various settings &#8211; for most uses the default settings are appropriate &#8211; the the image converted in real-time below [11]. Once set click <b>OK<\/b> to complete [10].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-njob-filter.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-njob-filter.jpg\" alt=\"nJob filter to convert images\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-njob-normal-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-njob-normal-map.jpg\" alt=\"nJob filter for Normal Map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In nJob once a (grey-scale) image is loaded from the <b>Filter<\/b> menu [7] select <b>Heightmap > Normalmap<\/b> [8]. The filter dialogue appears [9] with the image converted in real-time below [11]. Click <strong>OK<\/strong> [10] to complete.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"normal-map-in-studio\"><\/span>Normal Map in Studio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Normal maps are essentially loaded into IMVU Studio the same way as other textures so once the derivable project is set up, click the <b>Material<\/b> components of the project [12] to see the <b>Inspector<\/b> properties where the available Texture slots will be shown. Click the <b>Normal<\/b> image slot icon [13] then in the Texture panel that appears click the <b>+<\/b> icon [14] to load in an external image using the standard file browser. Once the image loads click the new thumbnail [15] to select and set it in place within the texture slot and click <b>Preview<\/b> [16]. The image and effect will appear on the product in the main view.<\/p>\n<blockquote><p><b>Design note<\/b>: generally speaking all textures used in a material should be the same size (<span style=\"background-color: #fc0; color: #000;\">[this is important]<\/span> <a href=\"https:\/\/www.katsbits.com\/tutorials\/textures\/make-better-textures-correct-size-and-power-of-two.php\">power-of-two dimensions<\/a>) however, normal maps can be larger as this give the impression of increased visual (surface) detail without adding too much to the products overall file size, e.g. Diffuse 128 x 256, Normal 256 x 512, Shininess 64 x 128.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-load-normal-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-load-normal-map.jpg\" alt=\"nJob filter to convert images\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-load-normal-texture.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal-maps\/studio-load-normal-texture.jpg\" alt=\"nJob filter for Normal Map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once a project is set up Normal map images can be loaded into Studio the same way as others, by selecting the Material [12] and then clicking the available Texture slot [13] to open the file browser [14]. Once loaded the map can then be selected [15] and applied clicking the Preview button [16] &#8211; project above shown using a flat uniform coloured Diffuse to highlight the effect cause by inclusion of a normal map, the surface striations top-to-bottom of the pumpkin.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3924,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,230],"tags":[739,721,194,738,740,172,156],"class_list":["post-3747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-tutorials","tag-gimp","tag-images","tag-imvu","tag-imvu-studio","tag-njob","tag-normal-map","tag-textures"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3747","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=3747"}],"version-history":[{"count":32,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3747\/revisions"}],"predecessor-version":[{"id":5061,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3747\/revisions\/5061"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/3924"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=3747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=3747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=3747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}