{"id":5210,"date":"2021-10-08T17:39:52","date_gmt":"2021-10-08T16:39:52","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=5210"},"modified":"2024-07-08T15:03:28","modified_gmt":"2024-07-08T14:03:28","slug":"two-sided","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/two-sided\/","title":{"rendered":"Two-sided Meshes, Normal &#038; Shininess"},"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-69e7985da3045\" 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-69e7985da3045\"  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\/two-sided\/#description\" >Description<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/two-sided\/#double-sided\" >Double Sided<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/two-sided\/#backface-culling\" >Backface Culling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/two-sided\/#duplicate-mesh\" >Duplicate Mesh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/two-sided\/#normal-maps-swizzle\" >Normal Maps Swizzle<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/codex\/two-sided\/#timestamps\" >Timestamps<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/m0gLww2K3U4?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/7WZUbo7fWug?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this exercise (recorded live so may include off-topic chat) an two sided accessory items is used to explain an issue where normal and shininess maps are used in <a href=\"https:\/\/create.imvu.com\/imvu-studio-download\/\">IMVU Studio<\/a>, in particular how to address issues caused by the <b>Double Sided<\/b> material option, which mirrors surfaces and the dynamic way these new maps respond to scene lighting. Now, rather than enabling the option in the materials <b>Settings<\/b>, meshes should instead be physically double-sided, that is have a front and back that are independent of one another (although using the same material assignment in Blender). In video #1 mesh preparation is discussed before making the normal maps in video #2 for assembly and assignment in IMVU Studio.<\/p>\n<p><b>Duration<\/b>: total c. 2 hr 40 mins (02:40:00).<br \/>\n<b>Info<\/b>: 1080p.<br \/>\n<b>Source<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - two sided.zip\">KatsBits \u2013 Two Sided Meshes<\/a> (zip c. 1.6 MB \u2013 *.blend, *.fbx, *.png).<br \/>\n<b>Product ID<\/b>: <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=56597131\" rel=\"noopener\" target=\"_blank\">56597131<\/a>.<\/p>\n<blockquote><p><b>Design note<\/b>: some additional considerations to keep in mind using Bezier Curves;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"double-sided\"><\/span>Double Sided<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Making products in IMVU Studio that use normal and shininess maps present a few not-so-obvious problems due to their dynamic nature, especially when both sides of a mesh have to be seen. Ordinary to see both front and back of a mesh <b>Double Sided<\/b> [1] is enabled in Studio which forces IMVU to duplicate and mirror materials based on the original, non-mirrored, surface, essentially disabling the default &#8216;<a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">backface culling<\/a>&#8216; render state. For normal maps this is an issue because it often means the effect can appear inverted or backwards [2]. To fix this particular issue the mesh has to be physically duplicated and mirrored in Blender prior to export so there are independent front\/back, outside\/inside surfaces.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/two-sided-single-face.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/two-sided-single-face.jpg\" alt=\"Enabling Double Sided in IMVU Studio\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Shown in IMVU Studio a simple panel is shown two-sided, achieved by enabling the <b>Double Sided<\/b> material option. Using the setting in conjunction with normal maps tends to cause issues because the back face is rendered as a mirrored duplicate of the front, which includes how well its lit and the structure defined by the normal map.<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"backface-culling\"><\/span>Backface Culling<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In Blender materials have a similar setting, <b>Backface Culling<\/b> [3], that when enabled forces meshes to be rendered single-sided [4] &#8211; in Blender surfaces are rendered double-sided by default so enabling Backface Culling disables this property, IMVU draws surfaces single-sided by default, the opposite to Blender. This option should be enabled for any surface that needs to be draw &#8216;two-sided&#8217; in IMVU otherwise it can be difficult to <a href=\"https:\/\/www.katsbits.com\/codex\/flip-normals\/\">determine face orientation<\/a>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/blender-single-sided.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/blender-single-sided.jpg\" alt=\"Enabling Backface Culling in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Enabling Backface Culling [3] in Blender forces meshes to render as single-sided, the opposite of IMVU, making it easier to determine which way surfaces are pointing [4].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"duplicate-mesh\"><\/span>Duplicate Mesh<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To make a <i>&#8216;true&#8217; two-sided mesh<\/i> in Blender, select the original outer surfaces (in this example) and from the <b>Object<\/b> menu select <b>Duplicate Objects<\/b> &#8211; <b><i>Object \u00bb Duplicate Objects<\/i><\/b> (or press <span class=\"shortcutkey\">Shift<\/span> + <span class=\"shortcutkey\">D<\/span>). Press Esc to reset the new object and switch to Edit Mode. Here, ensure the entire mesh is selected (<b>Select \u00bb All<\/b> or press <span class=\"shortcutkey\">A<\/span>) and from the Mesh menu select Normals, then Flip &#8211; <b><i>Mesh \u00bb Normals \u00bb Flip<\/i><\/b>. This inverts or reverses the polarity of the selected faces so they now point inwards (relative to the original selection). Exit Edit Mode. This results in two objects [5] back-to-back, one with surfaces facing outwards, the other inwards [6]. <\/p>\n<div style=\"background-color: #fc0; color: #000; padding: 0.5em 0.75em; width:98.5%;\"><b>Important<\/b>: materials and UV maps do not need to be modified.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/blender-two-sided.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/blender-two-sided.jpg\" alt=\"Two-sided mesh in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Duplicating an object and using <b>Flip<\/b> in Edit Mode to invert its orientation, resulting in two separate objects [5], one facing outwards, the other inwards [6] &#8211; each is a separate object while using the same material and UV assignments.<\/i><\/p>\n<p>In IMVU Studio, and with the <b>Double Sided<\/b> option disabled [7], the product can be set up as before with normal and shininess maps. This time however, because front and back are essentially separate sub-objects each will illuminate and respond dynamically relative to the scene lighting [8].<\/p>\n<div style=\"background-color: #fc0; color: #000; padding: 0.5em 0.75em; width:98.5%;\"><b>Important<\/b>: normal maps rely heavily on there being an actual light source in a room (Omni or Spot) so the effect will be negligible (if visible at all) in rooms illuminated by <i>ambient light<\/i> only, and\/or may not be as noticeable depending on what (detail) is being represented.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/two-sided-two-face.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/two-sided-two-face.jpg\" alt=\"Two-sided mesh in IMVU Studio\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Assembled in IMVU Studio, with <b>Double Sided<\/b> disabled, when items are comprised of separate elements it allows for each side to respond correctly based on the scenes lighting e.g. the front face being lit and effects being shown versus the back, which is in shadow and facing away from the light source [8].<\/i><\/p>\n<h4><span class=\"ez-toc-section\" id=\"normal-maps-swizzle\"><\/span>Normal Maps Swizzle<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When loading <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-studio-normal-map-basics\/\">normal maps<\/a> into IMVU Studio the effect produced may appear upside down or flipped in some way relative to scene lighting. If this happens first double-check this is indeed occurring by perhaps loading in a furniture item that includes a light and placing it near the object to better highlight the normalised effect. If the effect still appears incorrect open the image map in GIMP, Photoshop, Affinity etc. and &#8216;swizzle&#8217; the GREEN (typical) or RED (less typical) channel, for example in <i>GIMP<\/i>, this would mean selecting the <i>Green<\/i> channel in the <i>Channels<\/i> docking panel [11] &#8211; <b><i>Windows \u00bb Dockable Dialogs \u00bb Channels<\/i><\/b>, then selecting <b>Invert<\/b> from the <b>Colors<\/b> menu &#8211; <b><i>Colors \u00bb Invert<\/i><\/b> [12]. Or in <i>Affinity Photo<\/i> select the Green channel in the <b>Chn<\/b> panel [13] then from <b>Layer<\/b> click <b>Invert<\/b> &#8211; <b><i>Layer \u00bb Invert<\/i><\/b> [14]. This inverts the channel effectively correcting the errant orientation of the normal map.<\/p>\n<div style=\"background-color: #fc0; color: #000; padding: 0.5em 0.75em; width:98.5%;\"><b>Important<\/b>: how image channels are &#8216;swizzled&#8217; will depend on the image editor used, typically however, each Red (R), Green (G) and (to a lesser extent) Blue (B) channels should be selectable separately, and modifiable without affecting other channels or the image as a whole. The image may need to be &#8216;renormalised&#8217; afterwards to ensure the correct normalised colour palette. <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/normal-map\/\">See here for more on making Normal Maps<\/a>.<\/div>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/normal-swizzle-green.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/normal-swizzle-green.jpg\" alt=\"Swizzling the Normal Map in GIMP\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>If a the effect accosiated with a normal map appears to be upside down or inverted it&#8217;s likely the red or green image channel is inverted relative to IMVU. This can be fixed by &#8216;swizzling&#8217; or inverting the channel by selecting it [11] and then using <b>Invert<\/b> [12] or similar.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/normal-invert-affinity.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-studio\/normal-invert-affinity.jpg\" alt=\"Swizzling the Normal Map in Affinity Photo\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Swizzling the Green channel of a normal map in Affinity Photo &#8211; select the Green channel in the <b>Chn<\/b> panel [13] (which disables\/hide Red and Blue) then from Layer select Invert [14].<\/i>\n<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"timestamps\"><\/span>Timestamps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Times are approximate;<br \/>\n<b>Video 1<\/b> &#8211; Mesh Prep for Two-Sided<br \/>\n&#8211; 00:00 : null<br \/>\n&#8211; 01:30 : Overview<br \/>\n&#8211; 05:00 : Mesh Duplication<br \/>\n&#8211; 18:00 : UV Map &#038; Material Prep<br \/>\n&#8211; 40:00 : Mesh Prep &#038; FBX Export<br \/>\n&#8211; 48:00 : IMVU Studio Import &#038; Assembly<br \/>\n&#8211; 55:00 : Studio &#038; Alpha Test<\/p>\n<p><b>Video II<\/b> &#8211; Making Normal &#038; Shininess<br \/>\n&#8211; 00:00 : null<br \/>\n&#8211; 01:30 : Overview, nJob &#038; GIMP<br \/>\n&#8211; 10:30 : Normal Map #1 &#038; Studio Test #1<br \/>\n&#8211; 35:00 : Normal Map #2 &#038; Studio Test #2<br \/>\n&#8211; 01:02:00 : Shininess &#038; Reflectivity<br \/>\n&#8211; 01:27:00 : Coming Soon<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5234,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,32,230],"tags":[825,558,559,194,738,172,824,700,156,220,560],"class_list":["post-5210","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-texturing","category-tutorials","tag-alpha-test","tag-backface-culling","tag-double-sided","tag-imvu","tag-imvu-studio","tag-normal-map","tag-shininess-maps","tag-swizzle","tag-textures","tag-transparency","tag-two-sided"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5210","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=5210"}],"version-history":[{"count":41,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5210\/revisions"}],"predecessor-version":[{"id":9081,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5210\/revisions\/9081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/5234"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=5210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=5210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=5210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}