{"id":3783,"date":"2020-10-16T17:51:28","date_gmt":"2020-10-16T16:51:28","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=3783"},"modified":"2023-09-07T15:51:56","modified_gmt":"2023-09-07T14:51:56","slug":"transparent-shadows","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/transparent-shadows\/","title":{"rendered":"Transparent Shadows"},"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-69f1b70254dc3\" 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-69f1b70254dc3\"  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\/transparent-shadows\/#transparent-material\" >Transparent Material<\/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\/transparent-shadows\/#transparent-shadows\" >Transparent Shadows<\/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\/fsQTfyX0jiQ\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>For newer versions of Blender the way materials are set up to accommodate <b>transparent shadows<\/b> has changed and with it the need, for incidental and typically non-transparent materials, to include the <b>Receive Transparent<\/b> property, a legacy necessity superseded by <b>Shadow Mode<\/b>. Here, once a material is determined to be transparent, surfaces are rendered in real-time by Eevee or Cycles with or without transparency-defined shadows as appropriate, without the extra set-up of nearby objects.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits-transparent-shadows.zip\">transparent shadows example *.blend<\/a> [c. 150 KB].<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/transparency\/\">see here for different ways to set up transparency in Blender<\/a>.<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"transparent-material\"><\/span>Transparent Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To see <b>transparent shadows<\/b>, that is shadows rendered based on the transparency of a material assigned to a surface or object, a material with basic transparency is needed, for example an <a href=\"https:\/\/www.katsbits.com\/codex\/opacity\/\">opacity map<\/a> plugged directly into the <b>Alpha<\/b> input of <b>Principled BSDF<\/b> by way of an <b>Image Texture<\/b> node. To do this, in <b>Shading Workspace<\/b>; create a Material (or select one already assigned); drop in an <b>Image Texture<\/b> node; click Open, browse to, select and load the image to be used; link <b>Color<\/b> <i>output<\/i> to <b>Alpha<\/b> <i>input<\/i>; finally in (Material) <b>Settings<\/b> switch <b>Blend Mode<\/b> to <b>Alpha Blend<\/b>, <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b> [1].<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: for transparent shadows to be visible in real-time <b>Viewport Shading<\/b> must be set to <b>Rendered<\/b> mode. This applies for both <a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Eevee and Cycles<\/a>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-basic.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-basic.jpg\" alt=\"Blend Mode set to Alpha Blend\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>For transparent shadows to work the material first has to be set up with standard <b>Blend Mode<\/b> transparency, i.e. <b>Alpha Blend<\/b> in the selected materials Settings [1].<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-node-tree.jpg\" alt=\"Simple transparent material using opacity map\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i> Shown above the node-tree for a very basic transparent material where transparency is defined by an external image (bitmap) that&#8217;s plugged directly into the Alpha input of Principled BSDF.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-opacity.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-opacity.jpg\" alt=\"Opacity map used to define transparency\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A simple grey-scale images is used to determine the transparency of the material &#8211; each tone defines a different grade or degree of transparency; white fully opaque, black fully transparent.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"transparent-shadows\"><\/span>Transparent Shadows<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the basic transparent material is set up, shadows cast and received by objects in the scene will be rendered solid or <b>Opaque<\/b> by default based on the object itself regardless of the <b>Blend Mode<\/b> set [2]. To change this so transparency defines the degree to which objects cast and\/or receive shadows; in (Material) <b>Settings<\/b> click the <b>Shadow Mode<\/b> drop-down menu [3] and swap <b>Opaque<\/b> (default) for <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b> [4]. Anything assigned the material will immediately display variable transparency and shadowing depending on the image used to define the opacity or transparency [5].<\/p>\n<blockquote><p><b>Design note<\/b>: for Shadow Mode;<br \/>\n&#8211; <b>None<\/b>: transparency is ignored.<br \/>\n&#8211; <b>Opaque<\/b>: surfaces render without transparency &#8211; solid.<br \/>\n&#8211; <b>Alpha Clip<\/b>: shadows &#8216;clipped&#8217; to a threshold.<br \/>\n&#8211; <b>Alpha Hashed<\/b>: shadows fully rendered.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-settings.jpg\" alt=\"Material 'mode' settings\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Blender renders transparent shadows as opaque or solid by default based on the objects shape not the degree of transparency present in the material\/image regardless of Blender Mode set [2]. To change this behaviour select an appropriate <b>Shadow Mode<\/b> option [3], e.g. <b>Alpha Hashed<\/b> [4]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-mode.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-shadows-mode.jpg\" alt=\"Set the Shadow Mode to enable transparent shadows\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the <b>Shadow Mode<\/b> is set [5] the scene will be rendered using the materials transparency to define shadows, overriding the default object-based rendering (shadow fidelity can be adjust in Render Properties and additionally depends on graphics hardware\/capabilities).<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3785,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[457,554,103,268,743,741,220],"class_list":["post-3783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-alpha-blend","tag-material-settings","tag-materials","tag-opacity","tag-receive-transparent","tag-shadows","tag-transparency"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3783","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=3783"}],"version-history":[{"count":38,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3783\/revisions"}],"predecessor-version":[{"id":5060,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/3783\/revisions\/5060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/3785"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=3783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=3783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=3783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}