{"id":1028,"date":"2019-02-05T23:30:29","date_gmt":"2019-02-05T23:30:29","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=1028"},"modified":"2023-09-07T15:54:17","modified_gmt":"2023-09-07T14:54:17","slug":"alpha","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/alpha\/","title":{"rendered":"Basic 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-69fafdcdd0ab6\" 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-69fafdcdd0ab6\"  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\/alpha\/#basic-transparent-material\" >Basic 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\/alpha\/#shading-workspace\" >Shading Workspace<\/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\/alpha\/#transparent-bsdf-node\" >Transparent BSDF Node<\/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\/alpha\/#material-settings\" >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\/alpha\/#uv-map-node-optional\" >UV Map Node (optional)<\/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\/alpha\/#overall-transparency\" >Overall Transparency<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.katsbits.com\/codex\/alpha\/#video-walkthrough\" >Video Walkthrough<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.katsbits.com\/codex\/alpha\/#blender-29-transparency\" >Blender 2.9+ Transparency<\/a><\/li><\/ul><\/nav><\/div>\n<p>There are a <a href=\"https:\/\/www.katsbits.com\/codex\/principled-alpha\/\">number of ways<\/a> to generate or create transparent materials in Blender. For real-time, live or game-related content creation using (<a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Eevee Render Engine<\/a>), transparency is typically achieved through use of a separate <i>mask<\/i> image, or more commonly, the <i>alpha channel<\/i> of a standard compatible RGB image (Red\/Green\/Blue), that is the <i>A<\/i> component (\/Alpha) of a typical 24 bit RGB<b><i>A<\/i><\/b> image.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: Blender being able to properly and correctly render transparent surfaces is dependent on a number of criteria including but not limited to the application itself, <a href=\"https:\/\/www.katsbits.com\/codex\/blender-opengl-compatibility\/\">system graphics<\/a> and\/or rendering capabilities therein.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-materials-hashed.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-materials-hashed.jpg\" alt=\"Real-time previews differ depending on graphics capabilities\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Real-time preview in the 3D View and other modes where objects can be seen will differ depending on system graphics capabilities, the above for example was rendered by a Radeon HD 6700M with &#8216;Hashed&#8217; blending, the header image an Intel HD 4400 which had some difficulty correctly rendering internal faces (<a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">backface culling<\/a>) and shadows.<\/i><\/p><\/blockquote>\n<blockquote style=\"background-color: #dde3fc; color: #000;\"><p><b>Download<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/blender\/katsbits_node-based-alpha.zip\">Node base alpha example file<\/a> (*.zip c.2 MB).<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: all the more commonly used image editors, Adobe Photoshop, GIMP, Affinity, Paint.net, Krita et al, are capable of generating alpha channels\/masks but will differ in how this is done in practice, subject to format support, e.g. *.tga, *.png support alpha channels whereas *.jpg doesn&#8217;t.<\/p><\/blockquote>\n<p>Using these types of transparent images in Blender, where the degree of opacity is essential controlled externally to Blender, is a two part process; 1) a basic node-based Material is created which is then, 2) modified in Material Properties to activate the property (transparency being a &#8216;property&#8217; of the image and subsequent material its associated with).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-channel.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-channel.jpg\" alt=\"An alpha channel versus alpha mask image in Corel Photopaint\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Above (in Affinity) the &#8216;alpha&#8217; (channel) <\/i><i>element <\/i><i>of a simple (orange blend) image is shown as grey-scale values when selected in the Channels Inspector. This is the &#8216;<strong>A<\/strong>&#8216; aspect of an &#8216;<strong>RGBA<\/strong>&#8216; bitmap image (e.g. *.tga).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"basic-transparent-material\"><\/span>Basic Transparent Material<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To set up a transparent material in Blender using the <b>alpha channel<\/b> of an <b>RGBA<\/b> image (Red\/Green\/Blue\/Alpha), first make sure a suitable image is available that includes an appropriate alpha channel or mask.<\/p>\n<blockquote><p><b>Design note<\/b>: alpha, or the degree to which something appears transparent or opaque, is generally defined by grey-scale values, typically black represents 100% transparent, white 100% opaque, grey determining degrees of transparency between the two extremes (transparency can be understood as &#8216;transparency&#8217; or &#8216;opacity&#8217;, the language used then changing what the percentages might mean, i.e. 100% can be used to represent either extreme).<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-transparent-image.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-transparent-image.jpg\" alt=\"A simple bitmap image with alpha channel in Corel Photopaint\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>A simple bitmap image showing masked or alpha areas as, in this instance fully, transparent in an image editor (Affinity), the programs default grid checker can be clearly seen through the orange tint.<\/i><\/p>\n<p>Next, in <b>Material Properties<\/b> create, click the <b>+ New<\/b> button below or <b>+<\/b> button to the right of the Material List aperture, and\/or assign a <b>Material<\/b> to the selected object (Object Mode) or surface\/s (Edit Mode) in question and ensure <b>Use Nodes<\/b> is active (highlights blue). Rename the Material where necessary (defaults to <i>Material<\/i>, or <i>Material.[n]<\/i> where several are used).<\/p>\n<blockquote><p><b>Design note<\/b>: in <i>Object Mode<\/i> new materials will auto-assign themselves to the selected item if not yet applied, in <i>Edit Mode<\/i> they need to be specifically applied to selections clicking the <b>Assign<\/b> button below the <b>Material List<\/b> aperture.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/material-properties.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/material-properties.jpg\" alt=\"A basic Material needs to be assigned to the object (Object Mode) or surfaces (in Edit Mode)\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>If the object or surface does not have a Material assigned, add one in <strong>Material Properties<\/strong> clicking the <b>+ New<\/b> button (where no material exists), ensure <b>Use Nodes<\/b> is active (highlights blue).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"shading-workspace\"><\/span>Shading Workspace<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With a Material available and assigned switch to the <b>Shading<\/b> layout, primarily to access the <b>Node Editor<\/b> and <b>3D View<\/b> set to <b>LookDev<\/b> render mode in one place, the <b>Node Editor<\/b> will display <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">a basic Material<\/a> by default comprising the <b>Principled BSDF<\/b> [2] node linked to a <b>Material Output<\/b> node [1].<\/p>\n<blockquote><p><b>Design note<\/b>: the two nodes available in the <b>Node Editor<\/b> when switching to the <b>Shading<\/b> layout or workspace, form the core components of all generic node-based materials in Blender 2.8+.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/shading-workspace.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/shading-workspace.jpg\" alt=\"To edit the material switch to Shading workspace to access the Node Editor\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Switching to <b>Shading<\/b> Workspace shows a basic node-based Material in the <b>Node Editor<\/b> (the two nodes, Principled BSDF [2], Material Output [1]) form the basis of all general Materials), and the object to be textured in a 3D View.<\/i><\/p>\n<p>Here, place an <b>Image Texture<\/b> node into the Node Editor workspace clicking <b>Add \u00bb Texture \u00bb Image Texture<\/b> [3], (once the node appears left-click drops it into the workspace) then click the nodes <b>Open image<\/b> button, browse to and select an RGBA image in the <b>File Browser<\/b>, then click the <b>Open Image<\/b> button top right to load. These initial steps <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">form the basis of a standard material<\/a> when nodes are linked; <b>Image Texture \u00bb Principled BSDF \u00bb Material Output<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: objects need to be UV mapped, which can be done at any point prior or post, else little or nothing will be displayed on the mesh after Material set-up (notwithstanding the render mode set for the viewport).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/uv-mapped.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/uv-mapped.jpg\" alt=\"Objects will need to be UV unwrapped and mapped for Materials to appear\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>In this context, of using bitmap images to texture meshes, objects will need to be UV unwrapped and mapped for Materials to display fully &#8211; this can be done at any point, before or after material set up.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/basic-material-node-tree.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/basic-material-node-tree.jpg\" alt=\"Once an Image Texture node is available load an image\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>After dropping an <b>Image Texture<\/b> node [3] into the Node Editor workspace, click the <b>Open image<\/b> icon, select and load the alpha-channeled image then link it to <b>Principled BSDF<\/b> [2], which is in-turn linked to <b>Material Output<\/b> [1] &#8211; the texture will display absent transparency.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"transparent-bsdf-node\"><\/span>Transparent BSDF Node<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the initial material nodes are available, for transparency to work Blender needs to know the material is supposed to render as transparent. To do this two more nodes need to be added; a <b>Transparent BSDF<\/b>, which tells Blender the material is to be rendered with some degree of transparency\/opacity, and a <b>Mix Shader<\/b>, which combines a number of inputs (nodes linking in) into a single output, itself passed on the the final <b>Material Output<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: the nodes used to create the basic Material above were linked together for illustrative purposes, they do not specifically need to be connected for a transparent material to be completed.<\/p><\/blockquote>\n<p>In the <b>Node Editor<\/b> workspace click <b>Add \u00bb Shader \u00bb Transparent BSDF<\/b> [4] (note to select <i>Transparent BSDF<\/i> and not <i>Translucent BSDF<\/i>). Left-click to drop. Then click the <b>Add<\/b> menu again this time selecting <b>Shading \u00bb Mix Shader<\/b> [5] (<i>Add \u00bb Shading \u00bb Mix Shader<\/i>). Once in place connect the nodes together; <b>BSDF<\/b> output from <i>Transparent BSDF<\/i> and <i>Principled BSDF<\/i> to <b>Shader<\/b> input of <i>Mix Shader<\/i>; <b>Color<\/b> output of <i>Image Texture<\/i> to <b>Base Color<\/b> input of <i>Principled BSDF<\/i>, <i>Image Texture<\/i> <b>Alpha<\/b> output to <b>Fac<\/b> input of <i>Mix Shader<\/i>; finally <b>Shader<\/b> output from <i>Mix Shader<\/i> to <b>Surface<\/b> input of <i>Material Output<\/i>.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: transparency can be <b>inverted<\/b> switching the Shader input nodes of the Mix Shader i.e., if the BSDF output node from Transparent BSDF is connected to the bottom Shader input of the Mix Shader, moving that to the input above (top) inverts the transparency &#8211; depending on mask values, transparent becomes opaque, opaque becomes transparent.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/swap-inputs.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/swap-inputs.jpg\" alt=\"Inverting an alpha transparent Material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the basic transparent material is set up the alpha can be inverted swapping the Mix Shader inputs around.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-bsdf-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-bsdf-node.jpg\" alt=\"Adding Transparent BSDF and Mix Shader nodes to the material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>With the addition of a <b>Transparent BSDF<\/b> [4] and <b>Mix Shader<\/b> [5] Blender will knows the material should be rendered with transparency defined by the materials properties, settings and image.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/node-tree-connections.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/node-tree-connections.jpg\" alt=\"Once the transparency enabling nodes are adding everything is linked together\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the extra material nodes are available everything needs to be linked together [1-3], passing through the <b>Mix Shader<\/b> [5] so only one output arrives at the <b>Material Output<\/b> [1] nodes input socket &#8211; the order <b>Transparent BSDF<\/b> [4] and <b>Principle BSDF<\/b> [2] connect to <b>Mix Shader<\/b> can be used to invert how mask data is displayed.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"material-settings\"><\/span>Material Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once all the basic nodes are connected, the material and bitmap will display on the mesh, subject to UV mapping, but will not show as transparent. To actually enable alpha-channel based transparency in the 3D View (as part of any workspace layout) the type of transparency used needs to be set in the <b>Settings<\/b> section of <b>Material Properties<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: the need to do this varies depending on the type of material being set up and the type of transparency required, in this context transparency is determined externally by the dictates of the alpha channel rather than any inherent properties attributed to the Material (nodes) itself.<\/p><\/blockquote>\n<p>To enable alpha-based transparency, in any workspace or layout where <b>Material Properties<\/b> is accessible (right-side), i.e. <b>Shading<\/b>, <b>Layout<\/b> (default), <b>Modeling<\/b> etc., click the <b>Settings<\/b> heading to expand the options then set the <b>Blend Mode<\/b> to <b>Alpha Blend<\/b>, <b>Alpha Clip<\/b> or <b>Alpha Hashed<\/b> depending on the type of transparency required. The Material will immediate display the alpha-masked texture correctly in the 3D View, completing the process of setting up a basic transparent material based on using alpha-channel inclusive bitmaps.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: be aware that using transparency, either in the form of alpha-channeled bitmaps and\/or transparent Materials, may cause real-time rendering issues with other elements of Blenders interface, the 3D View grid for example, can seem to disappear, or appear incorrectly &#8216;ordered&#8217; (stacked) with respect to other objects in a Scene when transparency and\/or <a href=\"https:\/\/www.katsbits.com\/codex\/backface-culling\/\">back-face culling is enabled or disabled<\/a>. Barring errors with a projects set up, if a static\/offline image can be rendered as expected but Scene shows incorrectly in the 3D View this is likely a consequence of <a href=\"https:\/\/www.katsbits.com\/codex\/blender-opengl-compatibility\/\">graphics card driver<\/a> or feature incompatibility or shortfall.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: changing <b>Blend Mode<\/b> modifies transparency behaviour;<br \/>\n&#8211; <b>Opaque<\/b> draws surfaces without any transparency<br \/>\n&#8211; <b>Alpha Clip<\/b> renders transparency using off\/on tolerance<br \/>\n&#8211; <b>Alpha Hashed<\/b> provide complex on\/off tolerance<br \/>\n&#8211; <b>Alpha Blend<\/b> renders full transparencies<br \/>\nSome modes previously available, namely <b>Additive<\/b> (brightens surfaces) and <b>Multiply<\/b> (darkens surfaces), are obsolete\/outmoded and no longer used. <a href=\"https:\/\/www.katsbits.com\/codex\/transparency-cycles\/\">Blend Mode options are also not available using Cycles render<\/a>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/blend-mode-property.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/blend-mode-property.jpg\" alt=\"Change the materials Blend Mode to active\/display transparency\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Changing the <b>Blend Mode<\/b> in <b>Material Properties<\/b> will change the way the transparent properties of the material are rendered, partially or fully based on the alpha values\/alpha channel data that&#8217;s included with the image.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"uv-map-node-optional\"><\/span>UV Map Node (optional)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For game-related content, items used outside Blender, materials, textures and images are typically positioned and orientated over a mesh based on UV mapping. As there are a number of different ways to <i>map<\/i> objects, optional nodes can be included to explicitly define which <b>Input<\/b> type is to be used. In this context this is a <b>UV Map<\/b> node.<\/p>\n<blockquote><p><b>Design note<\/b>: if a mesh is unwrapped and mapped to an image, it will appear where and as it should regardless of the properties associated with a typical material.<\/p><\/blockquote>\n<p>To add a <b>UV Map<\/b> node, in the <b>Node Editor<\/b> click <b>Add<\/b> then <b>Input \u00bb UV Map<\/b> (<i>Add \u00bb Input \u00bb UV Map<\/i>). Left-click to set in place then click the <b>UV coordinates to be used for mapping<\/b> selector and select <b>UV Map<\/b> from the drop-down list. Finally, link the <b>UV<\/b> output socket of the <i>UV Map<\/i> node to the <b>Vector<\/b> input of the <i>Image Texture<\/i> node (in which the bitmap is loaded) completing set up.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/uv-map-node.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/uv-map-node.jpg\" alt=\"Adding a UV Map node to the material\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Optional for most game-related content because the UV itself generally forces proper material behaviour, a <b>UV Map<\/b> node [6] can be added to the material [1-5] explicitly defining what type of <b>Input<\/b> should be used.<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"overall-transparency\"><\/span>Overall Transparency<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once a material has been set up to accommodate image-based alpha transparency, the degree shown can be modified without additional node inclusions; one approach <i>affects the alpha itself<\/i>, the other the <i>entire material<\/i>. To change the former, the way image-based alpha elements are displayed, in the <b>Transparent BSDF<\/b> node click the <b>colour sample area<\/b> (white by default) and select a colour using the <i>picker<\/i>, or change the tone using the <i>slider<\/i>. This will tint the alpha with the selected colour, will make it appear transparent (white, default state) or black and opaque, or a combination of the two &#8211; tinted opacity.<\/p>\n<blockquote><p><b>Design note<\/b>: sort order may affect the way surfaces are rendered in the 3D view independently of materials settings.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-value-opaque.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-value-opaque.jpg\" alt=\"Making the entire material transparent\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The way alpha elements are displayed can be changed using the <b>Transparent BSDF<\/b> colour setting, tinting the effect with a colour or making it opaque and black (shown above).<\/i><\/p>\n<p>To change the latter, overall material transparency, in the <b>Principled BSDF<\/b> node, find the <b>Alpha<\/b> setting (near the bottom of those available) and lower the value from <b>1.000<\/b> to decrease the transparency of the material itself, <b>0.000<\/b> being fully transparent (invisible material).<\/p>\n<blockquote><p><b>Design note<\/b>: changing the materials transparency modifies the entire material, all the properties that might be associated with it will become transparent to the degree set in <b>Alpha<\/b>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-value-0.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-value-0.jpg\" alt=\"Making the entire material transparent\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Modifying the <b>Principle BSDF<\/b>&#8216;s Alpha setting will change the degree of transparency displayed by the entire material, set to 0 (zero) it disappears (shown above).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"video-walkthrough\"><\/span>Video Walkthrough<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Video overview making an alpha-based transparent Material in Blender 2.8+. Duration: c.2 mins.<br \/>\n<video poster=\"\" controls=\"controls\" width=\"100%\" height=\"auto\"><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-transparent-materials.mp4\" type=\"video\/mp4\" \/><!--<source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/collection-shortcut.ogg\" type=\"video\/ogg\" \/>--><source src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/alpha-transparent-materials.webm\" type=\"video\/webm\" \/><\/video><br \/>\n<i>An overview making a transparent material in Blender 2.8+ using an alpha-based bitmap image &#8211; UV mapping is needed to display materials properly.<\/i><\/p>\n<p><center>&bull; &bull; &bull;<\/center><\/p>\n<h3><span class=\"ez-toc-section\" id=\"blender-29-transparency\"><\/span>Blender 2.9+ Transparency<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For <b>Blender 2.9+<\/b> and newer versions (Blender 3.0, 4.0 etc.) basic transparency works the same way as for Blender 2.8+ so the process discussed above can be used (for both <a href=\"https:\/\/www.katsbits.com\/codex\/render-engine\/\">Eevee and Cycles<\/a> render engines); essentially a <b>Transparent BSDF<\/b> node supplies the necessary transparency function and the <b>Alpha<\/b> input value of <b>Principle BSDF<\/b> the degree of transparency, both &#8216;mixed&#8217; together through a <b>Mix Shader<\/b>.<\/p>\n<blockquote><p><b>Design note<\/b>: it&#8217;s important to understand that basic transparency is making the overall material itself transparent not just an element of it, any images or other properties will be appropriately affected by the settings used.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-29.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparency-29.jpg\" alt=\"Making the entire material transparent\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Shown above a material is set up with basic transparency using a Transparent BSDF node that enables the effect. This modifies the material itself (shown), which might then include an image (not included above), which becomes transparent by association &#8211; images absent an included alpha channel (RGB\/A) will become transparent by the same degree as the underlying material.<\/i><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-materaial-overview.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-materaial-overview.jpg\" alt=\"Basic transparent material in Blender 2.9+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-material-nodes.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/transparency\/transparent-material-nodes.jpg\" alt=\"Node tree for basic transparent Material Blender 2.9+\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Making a material transparent overall so the result affects associated elements needs a <b>Transparent BSDF<\/b> node that&#8217;s connected to a <b>Mix Shader<\/b>, everything then being controlled by the <b>Alpha<\/b> input of Principled BSDF (the node tree shown above highlights the set-up for transparency to function without the need for an image).<\/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\/esIKF8WvaVg\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p><i>Setting up a basic transparent material in Blender 2.9+ using the <b>Transparent BSDF<\/b> and <b>Mix Shader<\/b> nodes.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2413,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,230],"tags":[460,457,186,458,459,185,453,456,462,220,454],"class_list":["post-1028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-tutorials","tag-additive","tag-alpha-blend","tag-alpha-channel","tag-alpha-clip","tag-alpha-hashed","tag-alpha-mask","tag-alpha-transparency","tag-blend-mode","tag-opaque","tag-transparency","tag-transparent-textures"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1028","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=1028"}],"version-history":[{"count":7,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1028\/revisions"}],"predecessor-version":[{"id":5181,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/1028\/revisions\/5181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/2413"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=1028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=1028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=1028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}