Transparency in Godot

Link, Like, Share.

The Godot Game Engine encourages use of other applications to make and assemble components that are exported, then imported into the editor using the *.glb or *.glTF file formats. For all intents and purposes this doesn’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 Godot editing environment.

Download: example files provided below.
Blender Transparent Materials (c. 200 kb – *.blend, *.tga).
Godot Transparency Materials (c. 250KB – *.glb, *.material, *.tga, *.tscn).

Alpha Channel

Transparency in the Godot is ostensibly defined by the A or Alpha element of standard 24 bit RGB image (RBGA), so first and foremost a suitable format with alpha channel support should be used, typically this would be *.tga, *.png or *.dds.

Design note: Godot supports a number of images formats but not all can be used for transparent materials. For that the aforementioned PNG, TGA or DDS are typical and broadly supported.

Because transparency is defined by the alpha channel so too is the type, 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).

Important: Godot isn’t (currently) set up to use separate images as a means to define material transparency as might be done using an opacity map, only RGBA images work.

Gradient vs clip transparency
How Godot interprets transparency depends on whether the alpha channel is essentially a ‘gradient’ (right) or ‘mask’ (left), or rather how much grey-scale tonal variations there is versus stricter black and white values.

Basic Material Blender

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 Principled BSDF ‘alpha’ structure, so Alpha output [1 & 4] of an Image Texture node carrying the masked image is linked to the Alpha input of Principled BSDF [5] – Image Texture [Alpha|Out] » [Alpha|In] Principled BSDF, with Blend Mode enabled and an appropriate option set in Material Properties, e.g. Alpha Blend. Once this is done the object, scene or project can be exported to *glb or *.glTF.

Design note: setting the Blend Mode in Blender provides a preview of how Godot will interpret the alpha channel data, roughly as ‘blend’ – gradient or variable transparency, or ‘clipped’ – 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) – variable transparency will be clipped in the latter’s case if not explicitly painted for to accommodate clipping (see yellow boxout below).

Adjusting Clip mask
Clipped or masked transparency is defined by image alpha and can be similarly controlled or previewed in Blender setting the Blend Mode to Alpha Clip [a] and adjusting the Clip Threshold [b] to alter how ‘hard’ or ‘soft’ the mask is (the degree to which a pixel is rendered fully transparent or opaque).

Basic Material in Blender
To export transparent materials from Blender to Godot set them up as would be done normally so they work in Blender [3] – Image Texture node carries the bitmap with alpha channel; Color output linked to Base Color input [1]; Blend Mode is set to Alpha Blend etc. [2]…

Basic transparent material tree
… with Alpha output [4] from the Image Texture node being linked to the Alpha input [5] of the Principled BSDF node. In Material Preview the texture/material appears transparent as expected.

Transparency in Godot

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 Blend Mode is referred to as Mix [6] – Blend Mode: Mix, and can be found in the Parameters section of the Inspector (right-side by default) when a material is selected in the Filesystem (left-side by default).

Important: 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).

Mix property in Godot
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 Parameters properties of the selected material.

Opacity or Clip Mask in Godot

If instead of a Mix 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 FileSystem so its properties appear in the Inspector. Expand the Parameters section. Near the bottom enable Use Alpha Scissors [7] by clicking the checkbox (On will highlight) – depending on the texture the material will then render with clipped or scissored transparency. To control the degree to which clipping occurs change the Alpha Scissor Threshold [8] value; higher values are more strict, everything except white is clipped.

Important: if alpha channel data used to define transparency is not set up as a mask (see ‘Alpha Channel’ above), Godot will forcibly clip or scissor the result relative to the Alpha Scissor Threshold 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 Alpha Scissor Threshold to 0.5 for a typical level of clipping – Alpha Scissor Threshold: 0.5.

High alpha threshold in Godot
Low alpha threshold in Godot
Setting the Alpha Scissor Threshold changes the degree to which pixels are rendered transparent when Use Alpha Scissor is enabled – higher values (top image) are more strict than lower values (bottom image).

Use Alpha Scissor in Godot
Clip masks should automatically render based on alpha channel data but can be enabled clicking Use Alpha Scissor [7] and controlled setting the Alpha Scissor Threshold [8] properties in the selected materials Parameters.


Link, Like, Share.