{"id":4760,"date":"2021-06-27T15:26:01","date_gmt":"2021-06-27T14:26:01","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4760"},"modified":"2023-09-07T15:50:55","modified_gmt":"2023-09-07T14:50:55","slug":"transparency-godot","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/transparency-godot\/","title":{"rendered":"Transparency in Godot"},"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-69fe1a4d7e942\" 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-69fe1a4d7e942\"  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-godot\/#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\/transparency-godot\/#basic-material-blender\" >Basic Material Blender<\/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-godot\/#transparency-in-godot\" >Transparency in Godot<\/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-godot\/#opacity-or-clip-mask-in-godot\" >Opacity or Clip Mask in Godot<\/a><\/li><\/ul><\/nav><\/div>\n<p>The <a href=\"https:\/\/godotengine.org\/\" rel=\"noopener\" target=\"_blank\">Godot Game Engine<\/a> encourages use of other applications to make and assemble components that are exported, then imported into the editor using the <b>*.glb<\/b> or <b>*.glTF<\/b> file formats. For all intents and purposes this doesn&#8217;t require content to undergo any special preparation or treatment, everything, barring dynamic elements, can be built in situ and exported as is. However, some consideration does need to be given to transparency and how that is set up so it works correctly within the <b>Godot<\/b> editing environment.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: example files provided below.<br \/>\n &#8211; <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits - opacity maps godot (packed).zip\">Blender Transparent Materials<\/a> (c. 200 kb &#8211; *.blend, *.tga).<br \/>\n &#8211; <a href=\"https:\/\/www.katsbits.com\/files\/godot\/katsbits - godot transparency.zip\">Godot Transparency Materials<\/a> (c. 250KB &#8211; *.glb, *.material, *.tga, *.tscn).<\/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>Transparency in the Godot is ostensibly defined by the <b><i>A<\/i><\/b> or <b>Alpha<\/b> element of standard 24 bit RGB image (RBG<b>A<\/b>), so first and foremost a suitable format with alpha channel support should be used, typically this would be *.tga, *.png or *.dds.<\/p>\n<blockquote><p><b>Design note<\/b>: Godot supports a number of <a href=\"https:\/\/docs.godotengine.org\/en\/stable\/getting_started\/workflow\/assets\/importing_images.html\" rel=\"noopener\" target=\"_blank\">images formats<\/a> but not all can be used for transparent materials. For that the aforementioned PNG, TGA or DDS are typical and broadly supported.<\/p><\/blockquote>\n<p>Because transparency is defined by the alpha channel so too is the <i>type<\/i>, in other words, the grey-scale data painted to the channel in an image editor will differ depending on whether gradients or varying degrees of transparency are to be accommodated (below, right), or a simple clip or stencil style mask (below, left).<\/p>\n<blockquote><p><b>Important<\/b>: Godot isn&#8217;t (currently) set up to use separate images as a means to define material transparency as might be done using an <a href=\"https:\/\/www.katsbits.com\/codex\/opacity\/\">opacity map<\/a>, only RGBA images work.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-clip.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-clip.jpg\" alt=\"Gradient vs clip transparency\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>How Godot interprets transparency depends on whether the alpha channel is essentially a &#8216;gradient&#8217; (right) or &#8216;mask&#8217; (left), or rather how much grey-scale tonal variations there is versus stricter black and white values.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"basic-material-blender\"><\/span>Basic Material Blender<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Assuming then that transparent materials in Godot are defined by image based alpha channel data, in Blender this means the material node tree can be set up, at its simplest, using the <a href=\"https:\/\/www.katsbits.com\/codex\/principled-alpha\/\">Principled BSDF &#8216;alpha&#8217; structure<\/a>, so <b>Alpha<\/b> output [1 &#038; 4] of an <b>Image Texture<\/b> node carrying the masked image is linked to the <b>Alpha<\/b> input of <b>Principled BSDF<\/b> [5] &#8211; <b>Image Texture [Alpha|Out] \u00bb [Alpha|In] Principled BSDF<\/b>, with <b>Blend Mode<\/b> enabled and an appropriate option set in <b>Material Properties<\/b>, e.g. <b>Alpha Blend<\/b>. Once this is done the object, scene or project can be exported to *glb or *.glTF.<\/p>\n<blockquote><p><b>Design note<\/b>: setting the Blend Mode in Blender provides a preview of how Godot will interpret the alpha channel data, roughly as &#8216;blend&#8217; &#8211; gradient or variable transparency, or &#8216;clipped&#8217; &#8211; clipped or cut-off transparency, and again, depending on the channel data, transparency will render with as variable for the former (below, right) or masked for the latter (below, left) &#8211; variable transparency will be clipped in the latter&#8217;s case if not explicitly painted for to accommodate clipping (<a href=\"#opacity-or-clip-mask-in-godot\">see yellow boxout below<\/a>).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/clip-alpha-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/clip-alpha-material.jpg\" alt=\"Adjusting Clip mask\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Clipped or masked transparency is defined by image alpha and can be similarly controlled or previewed in Blender setting the <b>Blend Mode<\/b> to <b>Alpha Clip<\/b> [a] and adjusting the <b>Clip Threshold<\/b> [b] to alter how &#8216;hard&#8217; or &#8216;soft&#8217; the mask is (the degree to which a pixel is rendered fully transparent or opaque).<\/i>\n<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/basic-transparent-material.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/basic-transparent-material.jpg\" alt=\"Basic Material in Blender\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To export transparent materials from Blender to Godot set them up as would be done normally so they work in Blender [3] &#8211; Image Texture node carries the bitmap with alpha channel; Color output linked to Base Color input [1]; <b>Blend Mode<\/b> is set to <b>Alpha Blend<\/b> etc. [2]&#8230;<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-material-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-material-tree.jpg\" alt=\"Basic transparent material tree\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>&#8230; with <b>Alpha<\/b> output [4] from the Image Texture node being linked to the <b>Alpha<\/b> input [5] of the Principled BSDF node. In Material Preview the texture\/material appears transparent as expected.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"transparency-in-godot\"><\/span>Transparency in Godot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the exported *.glb or *.glTF file is imported, Godot will automatically assemble the objects and materials, by default rendering transparency similar to Blenders Alpha Blend, in Godot this <b>Blend Mode<\/b> is referred to as <b>Mix<\/b> [6] &#8211; <i><b>Blend Mode: Mix<\/b><\/i>, and can be found in the <b>Parameters<\/b> section of the <b>Inspector<\/b> (right-side by default) when a material is selected in the <b>Filesystem<\/b> (left-side by default).<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: to make a material more transparent or less transparent in Godot changes have to be made to the alpha channel itself using an image editor to modify the source data (which is then reimported).<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/godot-parameters-blend-mode.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/godot-parameters-blend-mode.jpg\" alt=\"Mix property in Godot\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Using alpha-based transparency Godot uses a Blend Mode similar to Blenders called Mix [6] that approximates Alpha Blend. The option is found in the <b>Parameters<\/b> properties of the selected material.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"opacity-or-clip-mask-in-godot\"><\/span>Opacity or Clip Mask in Godot<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If instead of a <b>Mix<\/b> style transparent material as described above a clip or mask is needed, i.e. transparency defined by an on\/off tolerance, once the object and associated material(s) are imported into Godot select the appropriate material instance in the <b>FileSystem<\/b> so its properties appear in the <b>Inspector<\/b>. Expand the <b>Parameters<\/b> section. Near the bottom enable <b>Use Alpha Scissors<\/b> [7] by clicking the checkbox (<b>On<\/b> will highlight) &#8211; depending on the texture the material will then render with clipped or scissored transparency. To control the degree to which clipping occurs change the <b>Alpha Scissor Threshold<\/b> [8] value; higher values are more strict, everything except white is clipped.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: if alpha channel data used to define transparency is not set up as a mask (<a href=\"#alpha-channel\">see &#8216;Alpha Channel&#8217; above<\/a>), Godot will forcibly clip or scissor the result relative to the <b>Alpha Scissor Threshold<\/b> set. In other words because clip masks are defined by black (100% transparent) and white (0% transparent) values, intermediary grey-scale tones will be clipped depending how close they are to either extreme, a threshold of 1.0 [c] for example renders everything except 100% white as transparent whereas a threshold of 0.01 [d] renders everything but 100% black transparent, grey values clipped appropriately. Set <b>Alpha Scissor Threshold<\/b> to <b>0.5<\/b> for a typical level of clipping &#8211; <b><i>Alpha Scissor Threshold: 0.5<\/i><\/b>.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-threshold-high.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-threshold-high.jpg\" alt=\"High alpha threshold in Godot\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-threshold-low.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-threshold-low.jpg\" alt=\"Low alpha threshold in Godot\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Setting the <b>Alpha Scissor Threshold<\/b> changes the degree to which pixels are rendered transparent when <b>Use Alpha Scissor<\/b> is enabled &#8211; higher values (top image) are more strict than lower values (bottom image).<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-scissors.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/godot\/alpha-scissors.jpg\" alt=\"Use Alpha Scissor in Godot\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Clip masks should automatically render based on alpha channel data but can be enabled clicking <b>Use Alpha Scissor<\/b> [7] and controlled setting the <b>Alpha Scissor Threshold<\/b> [8] properties in the selected materials Parameters.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4794,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,803,230],"tags":[458,804,805,72,801,802,800,806,268,220],"class_list":["post-4760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-godot","category-tutorials","tag-alpha-clip","tag-alpha-scissor","tag-alpha-threshold","tag-export","tag-glb","tag-gltf","tag-godot","tag-mask","tag-opacity","tag-transparency"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4760","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=4760"}],"version-history":[{"count":31,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4760\/revisions"}],"predecessor-version":[{"id":5024,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4760\/revisions\/5024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/4794"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}