Transparency / Blender
Here we show how to enable transparency for Eevee/Cycles and glTF-compliant materials in Blender.
- Setting Up in Blender
- Blended vs Masked
- Additive Compositing (aka Additive Blending)
- Rendering Order (aka Z-index)
- Order-Independent Transparency (OIT)
- Transparency for glTF-compliant Materials
Setting Up in Blender
Transparency for Eevee materials can be enabled by using a combination of the Transparent BSDF and the Mix Shader nodes. The factor in the Mix Shader node can be used to define the alpha value — you can directly specify a value or create a dependency from some other nodes such as Fresnel for more realistic look.
Alternatively, you can use Alpha input of the Principled BSDF node.
Use the Blend Mode dropdown to choose between transparency modes:
- Render material with no transparency.
- Alpha Clip
- Masked transparency (see below).
- Alpha Hashed
- Hashed transparency, aka alpha to coverage. This method takes an intermediate position between masked and blended transparency. It uses MSAA rendering to improve the quality of alpha clipping.
- Alpha Blend
- Blended transparency (see below).
To tweak your the material's transparency there are other options available on the Settings panel:
- Backface Culling
- This checker works only for Alpha Blend materials with the Show Backface option enabled (effectively replacing Verge3D-specific Render Side property). When checked, the back side of tranparent polygons won't be rendered.
- Shadow Mode
- Transparency mode for the shadow casters. For now only Opaque and None modes are supported in Verge3D.
- Clip Threshold
- Threshold for alpha clipped (masked) materials.
- Show Backface
- Render multiple layers of transparent geometry. If turned off, the objects will be rendered by using the special technique called "Depth Prepass" which renders only one (nearest to the viewer) transparency layer.
For usage example, check out the following demo from the Asset Store: Transparency.
Blended vs Masked
Being a real-time 3D engine, Verge3D offers two main methods to handle transparent objects: alpha blending and alpha clipping (usually with an image mask). Blending enables combining a translucent foreground color with a background color, using the foreground color's alpha as blending factor. Clipping, on the other hand, simply discards all pixels with alpha less than some predefined threshold (by default 0, but can be changed in material settings).
Blending enables for smooth transitions, generally looks nicer but computationally more expensive than clipping. It may also produce z-sorting artifacts when polygons appear to be rendered in wrong order. Clipping works best for visualizing numerous small objects (such as grass or tree leaves). It also produces hard edges without any transitions which may be aliased.
Additive Compositing (aka Additive Blending)
Verge3D also offers a special method for rendering transparent surfaces called additive compositing. By blending in additive manner and excluding polygons from pixel depth comparison you can get rid of transparency artifacts.
To enable this mode, use the following material setup. Replace Glossy BSDF with the actual nodes you require for your material.
Also disable the Depth Write option located on the Verge3D Settings panel:
Rendering Order (aka Z-index)
Verge3D does not perform sorting of polygons inside objects, but rather performs sorting between objects. This provides correct blending in most cases but sometimes one may need to forcibly change the rendering order for an object.
To modify the rendering order for a particular object, change the numeric field in the Verge3D settings panel. The smaller the index, the earlier the object will be rendered.
So, if you have a transparent, continuous object in the rear and want other transparent objects in the front to render correctly, set some negative value as the rendering order of the rear object.
Order-Independent Transparency (OIT)
Verge3D allows the use of an approximate order-independent transparency technique, which do not require rendering geometry in sorted order, so it solves most transparency issues without any of the above considerations.
OIT can be enabled though the Verge3D Settings panel.
- OIT is only compatible with WebGL 2, otherwise it has no effect.
- OIT is ignored by Reflection Cubemap Light Probes and Reflection Plane Light Probes.
- May not work well with high opacity objects.
- Should not be used together with MSAA (multisample anti-aliasing) in scenes with 2 or more opaque objects. Instead you can use FXAA (fast approximate anti-aliasing) which is fully compatible with OIT.
Transparency for glTF-compliant Materials
In order to enable transparency for such materials, add alpha mask information to the alpha channel of the base color texture. Also you can tweak the alpha channel with the Alpha input of the Principled BSDF node.
Use the Blend Mode dropdown to choose between the supported transparency modes: Opaque, Alpha Clip, or Alpha Blend.
Feel free to ask on the forums!