There are many methods of rendering transparent objects in real time. Transparency is often expensive in terms of processing and rendering performance. Among the different methods, there are trade-offs between image quality and viewer performance. This article describes the transparency modes on Sketchfab and suggests when each option is most suitable.
Why order matters
Rendering transparent objects is done by blending colors. Objects are drawn one by one on top of each other and depending on the blend mode and the order they are rendered, the result differs.
- Left: Blue square is in front of the orange one.
- Right: Orange square is in front of the blue one.
Offline renderers like raytracers and modeling tools favor quality over performance. They can afford to sort each triangle before rendering a frame, so blending is not an issue.
When achieving realtime performance level there is a limitation due to raster algorithms; polygons are drawn by batches, and per batch the order in which polygons are drawn can't always be predicted.
Sketchfab makes a compromise between transparency quality and speed by sorting transparent objects and not transparent polygons.
Blending is the slowest method of rendering transparency. All visible objects in the scene must be rendered, sorted, and merged into the final image. This is an "expensive" calculation. It is usually a grayscale (Luminance channel) or RGBA (Alpha channel) texture, or a solid gray value. Blending mode is useful for translucent materials like glass.
Additive mode is almost as slow as Blending. It works by adding the transparent colors of objects together, so order does not matter in this case. Black will be rendered as transparent. It is similar to the Linear Dodge (Add) blend mode in Photoshop. Additive transparency is useful for special effects and emissive materials like fire, sparkles, and holograms.
Dithered mode is a faster method to achieve Blending, but it produces "noise" during navigation. The image quality improves when the camera is static. It is usually a grayscale (Luminance channel) or RGBA (Alpha channel) texture, or a solid gray value. The Dithered mode is useful for complex geometries with partial transparency, like fur and hair.
Alpha Masking is the fastest transparency method. It works by setting visibility in a binary (on / off) way. It is usually a grayscale (Luminance channel) or RGBA (Alpha channel) texture. You can use the slider to set an Alpha "Threshold". Masking is useful for materials that require a "cutout" effect like leaves and logos.
The texture format option enables you to set how colors are encoded: RGB for color texture only, RGBA for color + alpha transparency, and LUMINANCE for alpha transparency only. Opacity in textures can be defined by the alpha channel or grayscale levels.