{"id":5389,"date":"2021-12-13T17:38:09","date_gmt":"2021-12-13T17:38:09","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=5389"},"modified":"2023-09-07T15:50:39","modified_gmt":"2023-09-07T14:50:39","slug":"transparency","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/transparency\/","title":{"rendered":"Transparency &#038; Blender 3.x+"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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-6a2c726337287\" 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-6a2c726337287\"  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\/transparency\/#eevee-principled-bsdf-alpha\" >Eevee: Principled BSDF Alpha<\/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\/transparency\/#eevee-opacity-map\" >Eevee: Opacity Map<\/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\/transparency\/#eevee-transparent-bsdf\" >Eevee: Transparent BSDF<\/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\/transparency\/#cycles-principled-bsdf-alpha\" >Cycles: Principled BSDF Alpha<\/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\/transparency\/#cycles-opacity-map\" >Cycles: Opacity Map<\/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\/transparency\/#cycles-transparent-bsdf\" >Cycles: Transparent BSDF<\/a><\/li><\/ul><\/nav><\/div>\n<p>While there are some minor updates to the interface, for <b>Blender 3.x<\/b> how <b>transparent materials<\/b> are set up and rendered hasn&#8217;t changed over previous versions. With this in mind the following is an overview of the different ways to create transparency for both <b>Eevee<\/b> and <b>Cycles<\/b> render engines in Blender 3.x+.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"eevee-principled-bsdf-alpha\"><\/span>Eevee: Principled BSDF Alpha<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The simplest transparent material setup is to use <a href=\"https:\/\/www.katsbits.com\/codex\/principled-alpha\/\">Principled BSDF Alpha<\/a>, the <b>Alpha<\/b> output [2] from an <b>Image Texture<\/b> node to the the <b>Alpha<\/b> input [3] of the primary <b>Principled BSDF<\/b> node with the materials <b>Blend Mode<\/b> [1] set to <b>Alpha Blend<\/b>, <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b>. For this to work images mapped to the linked <b>Image Texture<\/b> node should include an <b>Alpha Channel<\/b>.<!-- The node tree is structured as follows; --><\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: all <b>Eevee<\/b> based material transparency requires a <b>Blend Mode<\/b> to be set in Material Properties. In <b>Settings<\/b> select <b>Alpha Blend<\/b> (gradient), <b>Alpha Clip<\/b> (clip mask) or <b>Alpha Hashed<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-blend-mode-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-blend-mode-eevee.jpg\" alt=\"Eevee, Blend Mode and Transparency in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For transparency to be rendered in Eevee, in <b>Material Properties<\/b> [a], under <b>Settings<\/b>, the <b>Blend Mode<\/b> [b] needs to be set.<\/i><\/p><\/blockquote>\n<p><!-- \n\n<div style=\"font-size:90%;\">&bull; <span style=\"background:#79461d;color:white\">[ Bitmap > <b>Image Texture<\/b> > Alpha ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Alpha > <b>Principled BSDF<\/b> > BSDF ]<\/span> \u00bb <span style=\"background:#3c1d26;color:white\">[ Surface > <b>Material Output<\/b> ]<\/span>.<\/div>\n\n\n\n\n\n<blockquote style=\"background-color: #fc0; color: #000;\"><b>Important<\/b>: this type of transparent material may be subject to <a href=\"https:\/\/www.katsbits.com\/codex\/sort-order\/\">Sort<\/a> issues.<\/blockquote>\n\n--><\/p>\n<blockquote><p><b>Design note<\/b>: absent an alpha channelled image being associated with the material it is possible to use the Image Textures <b>Color<\/b> output [i] by connecting this directly to the Alpha input instead [ii] similar to using an <a href=\"#eevee-opacity-mask\">Opacity Mask<\/a> (see below). Doing this forces transparency to be defined by image colour, which is essentially desaturated to achieve the greyscale tones necessary for masking. Caution should be exercised doing this however, as it may lead to transparency being incorrectly defined. <\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-color-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-color-alpha.jpg\" alt=\"Principled Alpha node tree in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In the absence of an alpha channel being available it is possible to use the Color output node [1] but in doing this the resulting effect may be incorrect as it is then defined by the colours and not a channel.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha.jpg\" alt=\"Blend Mode set in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha-node-tree.jpg\" alt=\"Principled Alpha node tree in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-principled-alpha-eevee.jpg\" alt=\"Transparent Material in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Material set up using Principled BSDF Alpha input &#8211; the Alpha output of an Image Texture node is connected to Alpha input of Principled BSDF (image must carry an alpha channel).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"eevee-opacity-map\"><\/span>Eevee: Opacity Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If the image mapped to a material has no alpha channel transparency can be defined using a separate <a href=\"https:\/\/www.katsbits.com\/codex\/opacity\/\">Opacity Map<\/a> [4], a greyscale image that&#8217;s connected to Principle BSDF&#8217;s Alpha input instead. To set this up add a second <b>Image Texture<\/b> node, load in the image to be used as the mask and connect its <b>Color<\/b> output [5] to <b>Alpha<\/b> input [6]. Depending on the <b>Blend Mode<\/b> set this will then clip or blend as needed.<!-- The node tree is structured as follows; --><\/p>\n<p><!-- &bull; <span style=\"background:#79461d;color:white\">[ Bitmap > <b>Image Texture<\/b> > Color ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Base Color > <b>Principled BSDF<\/b> > BSDF ]<\/span>\n&bull; <span style=\"background:#79461d;color:white\">[ Opacity Map > <b>Image Texture<\/b> > Color ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Alpha > <b>Principled BSDF<\/b> > BSDF ]<\/span> \u00bb <span style=\"background:#3c1d26;color:white\">[ Surface > <b>Material Output<\/b> ]<\/span>. --><\/p>\n<blockquote><p><b>Design note<\/b>: images used for opacity masking are generally; black and white for simple <i>clip<\/i> style masking where transparency defines hard edges and transitions; or greyscale for more complex gradient style <i>blend<\/i> transparency.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparancy-opacity-masks.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparancy-opacity-masks.jpg\" alt=\"Types of images used for Opacity Masking\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Image left: an example of a typical &#8216;clip&#8217; style opacity map. Image right: example of an image that produces &#8216;blend&#8217; or gradient style transparency. Both are colourless greyscale images.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map.jpg\" alt=\"Using an Opacity Map in  Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map-node-tree.jpg\" alt=\"Opacity Map node tree in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-opacity-map-eevee.jpg\" alt=\"Opacity Map transparency in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Material set up using a separate Opacity Map to define transparency [4]. So long as the image used to do this is greyscale transparency will be correctly rendered.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"eevee-transparent-bsdf\"><\/span>Eevee: Transparent BSDF<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more flexible (or complex) transparency the material itself can be set up using a <a href=\"https:\/\/www.katsbits.com\/codex\/alpha\/\">Transparent BSDF<\/a> node to control the behaviour of the overall material. This can be used where mapped images are not masked using an Opacity Map or Alpha Channel data [7]. To a <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">standard material<\/a> add a <b>Transparent BSDF<\/b> [8] and <b>Mix Shader<\/b> nodes [9]. To each <b>Shader<\/b> input of the <i>Mix Shader<\/i> connect the <b>BSDF<\/b> outputs from <i>Transparent BSDF<\/i> and <i>Principled BSDF<\/i>, then link <b>Shader<\/b> output to the <b>Surface<\/b> input of <i>Material Output<\/i>.<\/p>\n<blockquote><p><b>Design note<\/b>: if transparency is primarily defined by an opacity map or alpha channel, the <b>color input<\/b> of Transparent BSDF [iii], and <b>Fac<\/b> of the Mix Shader [iv], can be used to modify the characteristics of the effect overall [v] &#038; [vi], useful where a complex material needs to be transparent and not just any image(s) that might be mapped to it, for example fading a transparency effect over time.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-fac-color.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-fac-color.jpg\" alt=\"Color input and Fac affect the materials appearance\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-fac-color-change.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-fac-color-change.jpg\" alt=\"Modifying a materials appearance\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Image top: assigning an image with alpha means allows for more finite control over transparency (where specifically and to what degree) [iii] &#038; [iv]. Image bottom: changes made to <b>Transparent BSDF<\/b> and the <b>Mix Shader<\/b> change the degree of transparency overall [v] &#038; [vi].<\/i><\/p><\/blockquote>\n<p><!-- &bull; <span style=\"background:#79461d;color:white\">[ Bitmap > <b>Image Texture<\/b> > Color ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Base Color > <b>Principled BSDF<\/b> > BSDF ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Shader > <b>Mix Shader<\/b> > Shader ]<\/span>\n&bull; <span style=\"background:#2b652b;color:white\">[ <b>Transparent BSDF<\/b> > BSDF ]<\/span> \u00bb <span style=\"background:#2b652b;color:white\">[ Shader > <b>Mix Shader<\/b> > Shader ]<\/span> \u00bb <span style=\"background:#3c1d26;color:white\">[ Surface > <b>Material Output<\/b> ]<\/span>. --><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-transparent-bsdf.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-transparent-bsdf.jpg\" alt=\"Transparent Material setup in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-node-tree.jpg\" alt=\"Transparent BSDF node tree in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-material-eevee.jpg\" alt=\"Transparent material in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Material set up using a separate Opacity Map to define transparency [4]. So long as the image used to do this is greyscale transparency will be correctly rendered.<\/i><\/p>\n<p><center>&bull; &bull; &bull;<\/center><\/p>\n<h3><span class=\"ez-toc-section\" id=\"cycles-principled-bsdf-alpha\"><\/span>Cycles: Principled BSDF Alpha<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The simplest <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">transparent material for Cycles<\/a> render engine is to use the <b>Alpha<\/b> input of <b>Principled BSDF<\/b>. For this, first drop in an <b>Image Texture<\/b> node then load in an alpha channel carrying image [10]. Next, link Image Texture nodes <b>Alpha<\/b> output [13] to <b>Alpha<\/b> input [14] of Principled BSDF. Finally, make sure <b>Blend Mode<\/b> [11] is set in <b>Viewport Display<\/b> of <b>Material Properties<\/b>.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: for <b>Cycles<\/b>, if <b>Viewport Display<\/b> is set to <b>Rendered<\/b> [c], transparency is shown based on the materials node setup, <b>Blend Mode<\/b> is optional. For <b>Material Preview<\/b> it must be set.<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-blend-mode-optional.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-blend-mode-optional.jpg\" alt=\"Cycles, Blend Mode and Transparency in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When Cycles is active and and the 3D Viewport is set to Rendered mode [c] setting a Blend Mode is optional as transparency will be rendered based on the materials node setup.<\/i><\/p>\n<p>Cycles also displays image based alpha channel and opacity map data automatically if <b>Viewport Shading<\/b> [vii] is set to <b>Rendered<\/b>. In other views a Blend Mode [viii] similarly must be set for transparency to be shown in the 3D Viewport. In <b>Material Properties<\/b>, under <b>Viewport Display<\/b> options [d], select <b>Alpha Blend<\/b>, <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-preview.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-preview.jpg\" alt=\"Blend Mode in Cycles\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When Cycles is active and the 3D Viewport is set to Material Preview [vii], Blend Mode [viii] must be set for transparency to render else Base Color data is displayed.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-blend-mode.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-blend-mode.jpg\" alt=\"Alpha setup for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-alpha-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-alpha-node-tree.jpg\" alt=\"Alpha node tree for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-alpha-channel.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-alpha-channel.jpg\" alt=\"Alpha material in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The most basic transparent material for Cycles is to link an image [10] with alpha channel [12] to the <b>Alpha<\/b> input of Principled BSDF [13] and set the <b>Blend Mode<\/b> in Material Properties [11].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"cycles-opacity-map\"><\/span>Cycles: Opacity Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Where a mapped image exclude alpha channel data an <b>Opacity Map<\/b> can use used to define <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">material transparency in Cycles<\/a>. Here an extra Image Texture node is used as the link between the greyscale bitmap [14] and the Alpha input of Principled BSDF. For this then drop in another Image Texture node, load in the Opacity Map image then link <b>Color<\/b> output [15] to <b>Alpha<\/b> input of <b>Principled BSDF<\/b> [16]. Ensure <b>Blend Mode<\/b> is set, to <b>Alpha Clip<\/b>, <b>Alpha Blend<\/b> or <b>Alpha Hashed<\/b>, in <b>Viewport Display<\/b> options within <b>Material Properties<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: using a separate Opacity Map may be more flexible when setting up transparency as its often quicker to make changes to an image than its alpha channel. It also accommodates situations where alpha channels may not be supported or where content is to be used outside Blender.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity.jpg\" alt=\"Opacity Map setup for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity-node-tree.jpg\" alt=\"Opacity Map node tree for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-opacity-map.jpg\" alt=\"Opacity map transparent material in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Using an Opacity Map to define transparency [14] means using an addition Image Texture node that has its <b>Color<\/b> output [15] plugged into the <b>Alpha<\/b> input [16] of Principled BSDF.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"cycles-transparent-bsdf\"><\/span>Cycles: Transparent BSDF<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">flexible transparency using Cycles<\/a> a <b>Transparent BSDF<\/b> node [17] can be used, linked to a Mix Shader [18]. Here, if the mapped image does not include an alpha channel or use a separate opacity map, the materials overall transparency is then controlled by the <i>color input<\/i> value of Transparent BSDF [19] and\/or the <b>Fac<\/b> input of the Mix Shader [20]. To a standard material add a Transparent BSDF and Mix Shader nodes. Connect the <b>BSDF<\/b> outputs from both <b>Transparent BSDF<\/b> and <b>Principled BSDF<\/b> to the <b>Shader<\/b> inputs [18] of the <b>Mix Shader<\/b>. In Viewport Display settings set the <b>Blend Mode<\/b> to <b>Alpha Blend<\/b>, <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: when setting up a transparent material using a Transparent BSDF node, any image based opacity will augment the way the effect is rendered, which can be adjusted using the <b>Color<\/b> selector of Transparent BSDF [ix] or the <b>Fac<\/b> value input of the <b>Mix Shader<\/b> [x] &#8211; the former adds colour (tint) to the material, the latter increases\/reduces the degree of transparency overall.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-color-fac.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-cycles-color-fac.jpg\" alt=\"Color and Fac influence over a transparent material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Using a Transparency BSDF node to set up transparency also allows the result to be modified based on the <b>Color<\/b> input setting of Transparent BSDF [ix] and the <b>Fac<\/b> input of the Mix Shader [x].<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf.jpg\" alt=\"Transparent BSDF setup for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf-node-tree.jpg\" alt=\"Transparent BSDF node tree for Cycles in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf-cycles.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-transparent-bsdf-cycles.jpg\" alt=\"Transparent BSDF material in Blender 3.0+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Using an Opacity Map to define transparency [14] means using an addition Image Texture node that has its <b>Color<\/b> output [15] plugged into the <b>Alpha<\/b> input [16] of Principled BSDF.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5465,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[457,186,458,459,453,456,565,566,268,834,220,486],"class_list":["post-5389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-alpha-blend","tag-alpha-channel","tag-alpha-clip","tag-alpha-hashed","tag-alpha-transparency","tag-blend-mode","tag-cycles","tag-eevee","tag-opacity","tag-opacity-mask","tag-transparency","tag-viewport-display"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5389","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=5389"}],"version-history":[{"count":77,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5389\/revisions"}],"predecessor-version":[{"id":5468,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/5389\/revisions\/5468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/5465"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=5389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=5389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=5389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}