{"id":3232,"date":"2020-06-18T15:51:21","date_gmt":"2020-06-18T14:51:21","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=3232"},"modified":"2023-09-07T15:52:13","modified_gmt":"2023-09-07T14:52:13","slug":"double-sided-materials","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/double-sided-materials\/","title":{"rendered":"Double-Sided Materials"},"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-6a03ffab3a22c\" 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-6a03ffab3a22c\"  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\/double-sided-materials\/#double-sided-meshes\" >Double-sided Meshes<\/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\/double-sided-materials\/#double-sided-different-material\" >Double-Sided, Different Material<\/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\/double-sided-materials\/#double-sided-different-uvs\" >Double-Sided, Different UV&#8217;s<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; margin: 0; padding: 0; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;\"><center><iframe loading=\"lazy\" style=\"margin: 0!important; padding: 0!important; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/ZsXz1Vy3XwI\" width=\"720\" height=\"405\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>By default Blender 2.8+ renders meshes <b>double-sided<\/b> (<i>two-sided<\/i>) by duplicating surfaces to create an &#8216;inside&#8217; and &#8216;outside&#8217;. The disadvantage in doing this is that both sides are identical; the same UV mapped image appears on both front and back sides. The workaround for this would typically require another object being created with its own set of properties to fulfill whichever side needed to be different i.e. object 1 &#8211; leather on one side, object 2 &#8211; sheepskin on the other. Using <b>Nodes<\/b> however, it&#8217;s possible to avoid needing to do this using a <b>double-sided material<\/b> (two-sided).<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/tutorials\/katsbits_double-sided-materials.zip\">KatsBits &#8211; Double-Sided Materials<\/a> | c. 700 KB (*.blend).<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"double-sided-meshes\"><\/span>Double-sided Meshes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As briefly mentioned above Blender 2.8+ renders surfaces double-sided by default. It typically does this by duplicating the (often) outward facing surfaces of an object and flipping or inverting them inwards (or vice versa). Aside from their orientation this means both sides are identical, they use the same base materials, the same properties, the same UV mapping etc., with changes to any one aspect being immediately and simultaneously shown on both sides.<\/p>\n<blockquote><p><b>Design note<\/b>: although the &#8216;viewport&#8217; double-sided effect is &#8216;on&#8217; by default it can be disabled a number of ways depending on which <b>Viewport Shading<\/b> mode is active. For more on this see <a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">Backface Culling<\/a>.<\/p><\/blockquote>\n<p>Ordinarily to work around this problem objects would need to be hard or physically duplicated and set up to use their own unique properties, materials and UV&#8217;s before being <a href=\"https:\/\/www.katsbits.com\/codex\/flip-normals\/\">inverted<\/a> (<i>Mesh \u00bb Normals \u00bb Flip<\/i>) to produce a model comprising two meshes, one with surfaces pointing outwards, the other with surfaces pointing inwards.<\/p>\n<blockquote><p><b>Design note<\/b>: game assets may still require use of two meshes, one being inverted.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-meshes.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-meshes.jpg\" alt=\"Two meshes create a two-sided mesh\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Ordinarily double-sided meshes can be created using two separate objects with independent properties and materials assignments facing away from each other, typically this might be done for models used in games where inside and outside surfaces need to differ.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"double-sided-different-material\"><\/span>Double-Sided, Different Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To set up a basic double-sided material, first from <b>Material Properties<\/b> create and assign a standard Material. Next, in <b>Shading Workspace<\/b> add an <b>Image Texture<\/b> node and associated image (<i>Add \u00bb Texture \u00bb Image Texture<\/i>) &#8211; the image will appear on both sides of the mesh.<\/p>\n<blockquote><p><b>Design note<\/b>: images assigned to the Image Texture node (and material overall) can be internally Generated, UV Grid etc., or externally loaded, *.tif, *.gif etc., as normally expected when setting up a material.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-standard-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-standard-material.jpg\" alt=\"Basic material assigned and shown on both sides\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A basic material is first assigned to the object so the same image appears on both sides (subject to the object being UV unwrapped and mapped and scene set to Material Preview mode).<\/i><\/p>\n<p>To this basic material add another <b>Image Texture<\/b> node (<i>Add \u00bb Texture \u00bb Image Texture<\/i>), a <b>Principled BSDF<\/b> node (<i>Add \u00bb Shader \u00bb Principled BSDF<\/i>) and a <b>Mix Shader<\/b> (<i>Add \u00bb Shader \u00bb Mix Shader<\/i>). Create or assign a different image to this second <i>Image Texture<\/i> node and connect its <b>Color<\/b> output to the <b>Base Color<\/b> input of the second <i>Principled BSDF<\/i> node. From here link the <b>BSDF<\/b> outputs [1] of both <i>Principled BSDF<\/i> nodes to each <b>Shader<\/b> input of the <i>Mix Shader<\/i> [2], then the <b>Shader<\/b> output of the <i>Mix Shader<\/i> to the <b>Surface<\/b> input of <i>Material Output<\/i> [3]. This blends the two separate images together, displaying them as such on the both sides of the mesh.<\/p>\n<blockquote><p><b>Design note<\/b>: assignment can be inverted by switching the Shader inputs of the Mix Shader.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-double-nodes.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-double-nodes.jpg\" alt=\"Another set of nodes are added and connected together\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the basic material is set up another <b>Image Texture<\/b> and <b>Principle BSDF<\/b> nodes are added alongside a <b>Mix Shader<\/b> which are linked together &#8211; Image Texture to Principled BSDF, the two Principle BSDF nodes [1] to Mix Shader [2], finally Mix Shader to Material Output [3].<\/i><\/p>\n<p>Finally to this combination add a <b>Geometry<\/b> node [4] (<i>Add \u00bb Input \u00bb Geometry<\/i>) and link its <b>Backfacing<\/b> output to the <b>Fac<\/b> input of the <i>Mix Shader<\/i> [5]. This filters the blending separating the two textures so they display on the mesh correctly, one for each side (obverse and inverse).<\/p>\n<blockquote><p><b>Design note<\/b>: although a double-sided material shows a different image on either side of a surface it still &#8216;mirrors&#8217; position, images are mapped to an object or surfaces using the same UV&#8217;s &#8211; selecting or modifying one image via UV placement applies to both, they are not distinct (<a href=\"#doublesided,-different-uv%e2%80%99s\">cf. below for more<\/a>).<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-geometry-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-geometry-node.jpg\" alt=\"Adding a Geometry node to the tree\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the nodes are linked up a <b>Geometry<\/b> node [4] is added and connected to the <b>Fac<\/b> input [5] of the Mix Shader, which then correctly displays the two images, one on either side of the mesh.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-materials.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-materials.jpg\" alt=\"Node tree for basic two-sided material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Node tree for a basic two-sided (double-sided) material that displays a different image on either side of a surface.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"double-sided-different-uvs\"><\/span>Double-Sided, Different UV&#8217;s<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whilst the basic two-sided material described above displays different images on either side of a mesh or surface, they are mirrored because they use the same UV map or mapping coordinates. For the material to accommodate different image positioning, both the object and material need to be altered slightly. First the Object.<\/p>\n<blockquote><p><b>Design note<\/b>: because objects assigned double-sided materials are still physically single sided, texture placement, what area of each respective image is used, is determined by the same UV. In other words although a given UV might be selected the image section associated with it will be the same for both sides of the mesh\/materials regardless.<\/p><\/blockquote>\n<p>To set up a mesh so a single double-sided material displays mapped images differently, two <b>UV maps<\/b> are needed. To do this, with the mesh selected access <b>Object Data Properties<\/b> and in the <b>UV Maps<\/b> subsection click the [<b>+<\/b>] button to the right of the aperture, creating another second instance (double-click and rename as required) &#8211; two instances are needed so repeat if this is not the case [6 &amp; 7]. Switch to <b>UV Editing Workspace<\/b> and select each UV Map entry in turn (from Object Data Properties) &#8211; each layout will then toggle in the UV Editor (and be editable) when the respective map entry is selected in UV Maps &#8211; and edit as necessary.<\/p>\n<blockquote><p><b>Design note<\/b>: although there are no limits to the number of UV Maps an object can have, double-sided materials can only use two from a selection, one for each side of a surface.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uvmap1.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uvmap1.jpg\" alt=\"Node tree for basic two-sided material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uvmap2.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uvmap2.jpg\" alt=\"Node tree for basic two-sided material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<video poster=\"\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-uv-maps.mp4\" type=\"video\/mp4\" \/><!--<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.ogg\" type=\"video\/ogg\" \/>\n<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/collections\/collection-shortcut.webm\" type=\"video\/webm\" \/>--><\/video><br \/>\n<i>To accommodate textures being mapped differently on either side of a mesh when the double-sided material is assigned, the mesh needs two UV Maps [6 &amp; 7] (rename for clarity where appropriate).<\/i><\/p>\n<p>To then set up the material so each UV map is associated with a specific (UV mapped) image; switch to <b>Shading Workspace<\/b> and add a <b>UV Map<\/b> node [8] (<i>Add \u00bb Input \u00bb UV Map<\/i>). Once placed click the <b>UV Coordinate to used for mapping<\/b> input box\/drop down, select an entry from the list to make the association and then link <b>UV<\/b> output of the <em>UV Map<\/em> node to the <b>Vector<\/b> input [9] of the <i>Image Texture<\/i> node. The associated image will then appear on the appropriate side of the mesh. Repeat for the other image block; add a UV Map node, select the UV map to use and then link to the Image Texture node, <strong>UV<\/strong> output to <strong>Vector<\/strong> input. The end result will be a different texture on each respective side of the mesh with independently editable UV&#8217;s.<\/p>\n<blockquote><p><b>Design note<\/b>: depending on <b>Shader<\/b> input order to the <b>Mix Shader<\/b> images may appear inverted relative to the physical mapping of the UV&#8217;s. This can be corrected physically inverting the UV&#8217;s in the UV Editor or adding a &#8216;swizzle&#8217; to the material tree that flips the UV on the appropriate axis. To do this, in <b>Shading Workspace<\/b> add a <b>Mapping<\/b> node [10] (Add \u00bb Input \u00bb Mapping) then links as follows;\u00a0 <b>UV<\/b> output (UV Map) to <b>Vector<\/b> input (Mapping), <b>Vector<\/b> output (Mapping) to <b>Vector<\/b> input [11] (Image Texture). Use the various options of the Mapping node to then correct for <b>Rotation<\/b>, <b>Location<\/b> and\/or <b>Scale<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-mapping-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-mapping-node.jpg\" alt=\"Image may flip depending on input order\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-mapping-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-mapping-node-tree.jpg\" alt=\"Node tree of a Mapping node inclusion\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To correct image flipping from within the material use a <b>Mapping<\/b> node [10] as this then provides a number of options to &#8216;swizzle&#8217; the result, to numerically change rotation, location, scale characteristics of the (node chain) linked image (typically applied to both although only one shown above).<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uv-map-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-uv-map-node.jpg\" alt=\"Adding a UV Map node to tree\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-uv-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/two-sided\/two-sided-two-uv-tree.jpg\" alt=\"Two-sided material with UV maps\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To accommodate each side of the mesh\/material using a different UV Map a <b>UV Map<\/b> node [8] has to be associated with each Image Texture block, linked to <b>Vector<\/b> input [9], ensuring one map, one image.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3248,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[558,559,386,706,103,564,388,519,560,651,705,648,520],"class_list":["post-3232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-backface-culling","tag-double-sided","tag-image-texture","tag-mapping-node","tag-materials","tag-mix-shader","tag-principled-bsdf","tag-shading-workspace","tag-two-sided","tag-uv-editing-workspace","tag-uv-map-node","tag-uv-maps","tag-vector"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3232","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=3232"}],"version-history":[{"count":5,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3232\/revisions"}],"predecessor-version":[{"id":5078,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3232\/revisions\/5078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/3248"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=3232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=3232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=3232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}