{"id":1662,"date":"2019-08-06T13:28:05","date_gmt":"2019-08-06T12:28:05","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=1662"},"modified":"2023-09-07T15:54:43","modified_gmt":"2023-09-07T14:54:43","slug":"principled-alpha","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/principled-alpha\/","title":{"rendered":"Principled BSDF Alpha Transparency"},"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-69fe27ac30070\" 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-69fe27ac30070\"  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\/principled-alpha\/#alpha-channel\" >Alpha Channel<\/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\/principled-alpha\/#basic-principle-bsdf-material\" >Basic Principle BSDF 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\/principled-alpha\/#principled-bsdf-alpha\" >Principled BSDF Alpha<\/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\/qih2uDZw0JE\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>For instances where an image might include an alpha channel, Blenders Node set-up allows for a simpler approach to creating materials with image-based transparency using the <b>Alpha<\/b> slot of the <b>Principled BSDF<\/b> node.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #666;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits_basic-principled-alpha.zip\">Principled BSDF alpha example file *.blend<\/a> (c.2 MB).<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: creating <a href=\"https:\/\/www.katsbits.com\/codex\/alpha\/\">transparent materials using an Alpha node<\/a> set, <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">transparent materials in Cycles<\/a>.<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"alpha-channel\"><\/span>Alpha Channel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In this example the alpha values used for the materials transparency are generated from <b>alpha channel data<\/b>, the <b>A<\/b> of an RGBA image (<i>RGB+A = Red, Green, Blue plus Alpha, typically written as RGBA<\/i>), included with the image loaded in as the materials Texture.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/alpha-channel.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/alpha-channel.jpg\" alt=\"A simple bitmap image with alpha channel\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A simple bitmap image that has transparency included as an alpha channel (shown in Affinity Photo).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"basic-principle-bsdf-material\"><\/span>Basic Principle BSDF Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For simple <b>Principle BSDF<\/b> based transparency, in the <b>Node Editor<\/b> (switch to the <b>Shading<\/b> workspace if preferred &#8211; <i>shown below<\/i>), create a basic material (if one does not already exist) that references an image with alpha channel in an <b>Image Texture<\/b> node then link the <b>Color<\/b> output [1] of this node to the <b>Base Color<\/b> input [2] of the <b>Principled BSDF<\/b> node. If the object is UV unwrapped the image will appear mapped to the mesh.<\/p>\n<blockquote><p><b>Design note<\/b>: if a material is not available, select the object and in <strong>Material<\/strong> Properties click <b>New<\/b> to generate one, ensure <b>Use Nodes<\/b> is enabled. <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">Click here for more on Material Basics<\/a>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/image-linked-principled.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/image-linked-principled.jpg\" alt=\"Adding an Image Texture node and linking\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the bitmap is loaded into the Image Texture node it can be linked <b>Color<\/b> output [1] to <b>Base Color<\/b> input [2] of the Principled BSDF node &#8211; the 3D preview will update displaying the image sans (without) transparency.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"principled-bsdf-alpha\"><\/span>Principled BSDF Alpha<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the <b>Image Texture<\/b> node is linked, connect its <b>Alpha<\/b> output [3] to the <b>Alpha<\/b> input [4] of the <b>Principled BSDF<\/b> node. The image will update, likely displaying <i>without<\/i> transparency at this point (but confirming the output\/input connection).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/alpha-to-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/alpha-to-alpha.jpg\" alt=\"Linking the Image Texture nodes Alpha output\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Link the Image Texture nodes <b>Alpha<\/b> output [3] to the <b>Alpha<\/b> input [4] of the Principled BSDF node &#8211; the image will update without showing any transparency.<\/i><\/p>\n<p>Next, in <b>Material<\/b> properties to the right [5], access <b>Settings<\/b> [6] (<i>scroll down the Properties panel if not visible and click the triangle\/arrow to the left of the heading, displaying the available options<\/i>). Here, in <b>Blend Mode<\/b> switch from <b>Opaque<\/b> (default) to <b>Alpha Blend<\/b>, <b>Alpha Hashed<\/b> or <b>Alpha Clipped<\/b> [7] depending on the type of, and\/or degree to which, transparency should be shown. The image will update in the preview displaying the now utilised image-based alpha channel.<\/p>\n<blockquote><p><b>Design note<\/b>: Eevee may exhibit incomplete transparency rendering compared to Cycles, especially with respect to <a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">backface rendering<\/a>, shadows and how transparency affects them . Real-time rendering of transparency also introduces issues with regards to <b>sort order<\/b>, the hierarchical order in which surfaces are draw over each other, those that should be behind appear in front of others.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/material-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/material-settings.jpg\" alt=\"Enabling the type of Blend Mode once the nodes are linked\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the materials nodes are linked together the final step in <b>Material<\/b> Properties [5] is to enable the type of Blend Mode to be used in <b>Settings<\/b> [6], typically <b>Alpha Clipped<\/b>, <b>Alpha Hashed<\/b> or <b>Alpha Blend<\/b> [7] &#8211; shown above, <a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">Backface Culling<\/a> and Show Backface is disabled for clarity (the latter may be enabled by default).<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/principled-alpha-eevee.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/alpha\/principled-alpha-eevee.jpg\" alt=\"Transparency rendered in the 3D View using the Eevee rendering engine\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>An object shown in the 3D View rendered in real-time using Eevee with alpha transparency based on simple Principled BSDF alpha (using Eevee some aspect of scene may not drawn, cast shadows for example, which may be dependent on rendering aspects other than Blenders capabilities).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1665,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[186,386,103,327,388,519,220,454],"class_list":["post-1662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-alpha-channel","tag-image-texture","tag-materials","tag-node-editor","tag-principled-bsdf","tag-shading-workspace","tag-transparency","tag-transparent-textures"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1662","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=1662"}],"version-history":[{"count":5,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1662\/revisions"}],"predecessor-version":[{"id":5149,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1662\/revisions\/5149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/1665"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=1662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=1662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=1662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}