{"id":2640,"date":"2020-01-15T13:28:29","date_gmt":"2020-01-15T13:28:29","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=2640"},"modified":"2023-09-07T15:52:44","modified_gmt":"2023-09-07T14:52:44","slug":"opacity","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/opacity\/","title":{"rendered":"Opacity Maps (transparent 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-6a172886a9860\" 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-6a172886a9860\"  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\/opacity\/#opacity-map-vs-opacity-mask\" >Opacity Map vs Opacity Mask<\/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\/opacity\/#step-1-basic-material\" >Step 1: Basic 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\/opacity\/#step-2-opacity-mapmask\" >Step 2: Opacity Map\/Mask<\/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\/opacity\/#step-3-material-settings\" >Step 3: Material Settings<\/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\/opacity\/#video\" >Video<\/a><\/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\/opacity\/#blender-29-opacity\" >Blender 2.9+ Opacity<\/a><\/li><\/ul><\/nav><\/div>\n<p>Despite the removal of the <a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Blender Render or Blender Internal<\/a> rendering engine from Blender 2.8+, there are still a number of straightforward ways to create node-based <i>transparent materials<\/i> and\/or <i>transparent objects<\/i> (<i>transparent surfaces<\/i>). One such approach is to use an <b>Opacity Map<\/b>, a separate image that defines material transparency.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #666;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits_opacity-maps.zip\">Opacity Map defined Transparency example file *.blend<\/a> (c.200 KB).<\/p><\/blockquote>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: in this context, using a separate image to generate material transparency (technically &#8216;blending&#8217;), &#8216;<b>maps<\/b>&#8216; and &#8216;<b>masks<\/b>&#8216; are essentially the same, they result in variable transparency (or opacity) of materials. They do differ generally in that &#8216;maps&#8217; tend to comprise more detailed and graduated grey-scale tonal values, whereas &#8216;masks&#8217; are typically more oblique, defined by simple black and white values only. There is some cross-over depending on context, especially when assembled and\/or used outside Blender.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: materials that make use of a separate image to define opacity\/transparency should render without issue in both main <a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Render Engines<\/a>, Eevee and <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">Cycles<\/a>, but may be subject to other limiting factors contributing to a given material instance or engine used to render.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-maps-cycles.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-maps-cycles.jpg\" alt=\"Cycles rendered opacity map material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A simple opacity map based transparent material assigned to a Cube rendered in the 3D View using Cycles (note absence of sort-order issues common to Eevee).<\/i><\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"opacity-map-vs-opacity-mask\"><\/span>Opacity Map vs Opacity Mask<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this context, creating materials that display some degree of image or object transparency, <b>opacity maps<\/b>, <b>opacity masks<\/b>, <b>alpha masks<\/b>, <b>alpha maps<\/b> et al are all functionally the same in that they provide Blenders <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">node-based material system<\/a> the data necessary to render transparency using separate instead of <a href=\"https:\/\/www.katsbits.com\/codex\/principled-alpha\/\">inclusive<\/a> images (<a href=\"https:\/\/www.katsbits.com\/codex\/alpha\/\">i.e. alpha channels<\/a>). In essence this is done by translating tonal information from an image specifically tasked for the job into transparency values &#8211; depending on the type of transparency being rendered, <b>black<\/b> equates to a surface rendered <i>fully transparent<\/i>, <b>white<\/b> <i>fully opaque<\/i>, <b>grey<\/b> being degrees of <i>transparency or opacity in between<\/i>.<\/p>\n<blockquote><p><b>Design note<\/b>: the nomenclature used to describe transparency may differ depending on context, for example black values generally render fully or 100% transparent, which can also be referred to as being none or 0% opaque. In some circumstances this can be confusing, especially so referencing external assets, tools or processes.<\/p><\/blockquote>\n<p>Generally speaking then, transparency results from a process that ostensibly filters certain aspects of a material such that content can be seen through it, a cube placed inside another object being visible through the outer objects surfaces for example.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/mask-vs-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/mask-vs-map.jpg\" alt=\"Opacity Map versus Opacity Mask\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Broadly speaking opacity maps &#8211; right, and opacity masks &#8211; left (also alpha maps and alpha masks), function the same way, both define areas of transparency or opacity. <b>Masks<\/b> are typically black and white images, essentially a stencil or cutout, whereas a <strong>map<\/strong> might be more complex, offering degrees of opacity, and be fully grey-scale.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"step-1-basic-material\"><\/span>Step 1: Basic Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To set up a transparent material governed by a separate image, first <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">set up an initial but basic Material<\/a>; (select the object and) in <b>Material Properties<\/b> click <b>+ New<\/b> to create and populate a new instance if one does not exist. Switch to <b>Shading Workspace<\/b> and in the <b>Node Editor<\/b> (lower area) click the <b>Add<\/b> menu and drop an <b>Image Texture<\/b> node into the workspace, <i><b>Add \u00bb Texture \u00bb Image Texture<\/b><\/i>, then click the nodes <b>Open<\/b> button [2], browse to and load in a new image, or the <b>Browse Image to be linked<\/b> button [1] to link an existing (previously loaded) image. Finally click-drag the <i>Image Texture<\/i> nodes <b>Color<\/b> output to the <b>Base Color<\/b> input of <i>Principled BSDF<\/i> [3].<\/p>\n<blockquote><p><b>Design note<\/b>: once set up the Material will only appear in Material Preview\/Rendered display modes if the selected object has been <a href=\"https:\/\/www.katsbits.com\/codex\/uv-editing\/\">UV unwrapped and mapped<\/a>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-basic-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-basic-material.jpg\" alt=\"Basic settings for opacity Material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Set up an initial basic Material by dropping an <b>Image Texture<\/b> node into the Node Editor once a material is available or assigned, then set the &#8216;diffuse&#8217; image using <b>Browse Image to be linked<\/b> [1] or <b>Open<\/b> [2] to use\/load in a bitmap, which is then linked to <b>Principled BSDF<\/b> [3].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"step-2-opacity-mapmask\"><\/span>Step 2: Opacity Map\/Mask<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the basic nodes are in place add another <b>Image Texture<\/b> node, <b>Add \u00bb Texture \u00bb Image Texture<\/b>. For this node click <b>Browse Image to be linked<\/b> or <b>Open<\/b> the browse to and select\/assign the <i>black and white<\/i> or <i>grey-scale image<\/i> to be used as the opacity or transparent control element of the material. Once done click-drag this new <i>Image Textures<\/i> <b>Color<\/b> <i>output<\/i> [4] to the <b>Alpha<\/b> <i>input<\/i> [5] of <i>Principled BSDF<\/i> linking the two together.<\/p>\n<blockquote><p><b>Design note<\/b>: a colour image can be used for the opacity map but may cause unexpected discrepancies due to the way Blender converts colour to tone when data is passed through Alpha input. For best results use an appropriate grey-scale or black and white image as required.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-image.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-image.jpg\" alt=\"Opacity image linked to an Image Texture node\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To use an opacity map another <b>Image Texture<\/b> node needs to be placed, the black and white or grey-scale opacity map (bitmap image) then being associated with it, and finally linked (<b>Color<\/b> output [4]) to the <b>Alpha<\/b> input [5] of <b>Principled BSDF<\/b> (near the bottom of the node).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"step-3-material-settings\"><\/span>Step 3: Material Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the materials nodes are set up the final step is to enable or activate the type of transparency or <b>Blend Mode<\/b> used to render the effect. To do this, with the material still selected, in <b>Material Properties<\/b> scroll down to <b>Settings<\/b> (expand the options if not shown) and to the right of <b>Blend Mode<\/b> [6] click the drop-down menu selecting a &#8216;type&#8217; from the list, typically <b>Alpha Clip<\/b>, <b>Alpha Blend<\/b> or <b>Alpha Hashed<\/b>. The material will immediately display with opacity map\/mask-based transparency.<\/p>\n<blockquote><p><b>Design note<\/b>: generally speaking <b>Alpha Blend<\/b> and <b>Alpha Hashed<\/b> tolerate the subtleties of a grey-scale image whereas <b>Alpha Clip<\/b> does not, it interprets tone relative to being &#8216;on&#8217; or &#8216;off&#8217; &#8211; black being &#8216;off&#8217; (fully transparent), white being &#8216;on&#8217; (fully opaque) &#8211; this behaviour can be adjusted changing <b>Clip Threshold<\/b> if Alpha Clip is set.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-settings.jpg\" alt=\"Setting the type of transparency\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the nodes are set up and linked together the final step is to set the type of transparency or Blend Mode to use. In <b>Material Properties<\/b>, under <b>Settings<\/b>, click the drop-down menu to the right of <b>Blend Mode<\/b> [6] and select an option, typically <b>Alpha Clip<\/b>, <b>Alpha Blend<\/b> or <b>Alpha Hashed<\/b>. Blender will finally display the transparent aspects of the material.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"video\"><\/span>Video<span class=\"ez-toc-section-end\"><\/span><\/h3>\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\/zPx8eVKRVFY\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p><i>Overview making a simple transparent material where transparency is defined by a separate image, a grey-scale <b>opacity map<\/b> or black and white <b>opacity mask<\/b>.<\/i><\/p>\n<p><center>&bull; &bull; &bull;<\/center><\/p>\n<h3><span class=\"ez-toc-section\" id=\"blender-29-opacity\"><\/span>Blender 2.9+ Opacity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For <b>Blender 2.9+<\/b> (and future versions, Blender 3.0, 4.0 etc.) controlling basic material transparency using a separate opacity &#8216;map&#8217; or image works exactly the same as it does for Blender 2.8+ (explained in detail above), and works in both <a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Eevee and Cycles render engines<\/a> so long as nodes are correctly linked and an appropriate <i>grey-scale<\/i> or <i>black and white<\/i> image is used for the opacity map itself. <\/p>\n<blockquote><p><b>Design note<\/b>: it&#8217;s best to use grey-scale images to control opacity as colour can be tonally misinterpreted, &#8216;red&#8217; for example might result in a darker grey-scale value than expected.<\/p><\/blockquote>\n<p>Simply drop in two <b>Image Texture<\/b> nodes and link <b>Color<\/b> output from one to <b>Base Color<\/b> input of Principled BSDF, and the other to the said-sames <b>Alpha<\/b> input. This will override the Alpha value normally attributed to Principled BSDF, the maps gray-scale values then controlling the degree of material transparency.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-map-transparency-overview.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-map-transparency-overview.jpg\" alt=\"Opacity map defined transparency in Blender 2.9+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-nodes.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/opacity-nodes.jpg\" alt=\"Node tree for opacity map transparency Blender 2.9+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Simple material transparency defined by an opacity map requires two <b>Image Texture<\/b> nodes; one for the image seen, the other holding the grey-scale image that&#8217;s to be the opacity map, connected to the <b>Alpha<\/b> input of the <b>Principle BSDF<\/b> node.<\/i><\/p>\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\/6Xu69G2ko_E\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p><i>Basic transparency in Blender 2.9+ defined by a separate &#8216;opacity&#8217; image (Eevee shown, compatible with Cycles).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2666,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[386,667,307,103,327,268,221,388,668,220],"class_list":["post-2640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-image-texture","tag-masks","tag-material-properties","tag-materials","tag-node-editor","tag-opacity","tag-opacity-map","tag-principled-bsdf","tag-texture-maps","tag-transparency"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/2640","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=2640"}],"version-history":[{"count":7,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/2640\/revisions"}],"predecessor-version":[{"id":5097,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/2640\/revisions\/5097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/2666"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=2640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=2640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=2640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}