Real-Time Transparency: how to make it both fast and beautiful

Back to overview

Sketchfab Team Member Christian teaches us how to create realistic transparency in your models and how to use Sketchfab to its fullest potential in order to bring out the complexities of translucent materials. 

Introduction

When displaying real-time 3D graphics, we use many optimizations to increase the performance of our viewer. For example, we save time by not drawing triangles that are obscured by other ones closer to the camera. Once you turn on transparency however, we need to revert to other techniques. Several methods exist and each has its own pros and cons – some may result in a higher quality at the cost of slower rendering, while others will perform much better but may suffer in terms of image quality.

In order to help you decide which option is most suitable for each scene, let’s take a look at our transparency modes.

We will be illustrating the modes by creating a Coca Cola bottle – each layer in this model will use a different transparency mode:

Layers of mesh used for rendering : “Sticker_01a” for the Coca-Cola label “Bottle_01a” for the outer-layer of the bottle --- “Bottle_01b” for the inner-layer of the bottle “Cola_01a” for the Coca-Cola liquid --- “Capsule_01a”... for the capsule!

Layers of mesh used for rendering : “Sticker_01a” for the Coca-Cola label
“Bottle_01a” for the outer-layer of the bottle — “Bottle_01b” for the inner-layer of the bottle
“Cola_01a” for the Coca-Cola liquid — “Capsule_01a”… for the capsule!

Transparency mode: Blending

This is the most ‘expensive’ or slow method. As always, we first sort geometries (separate objects in your scene) back to front. With standard rendering, we can skip surfaces that are obscured by other opaque surfaces.  However, with the Blending mode, we cannot skip geometries that are obscured by transparent objects – we have to render ALL objects that are visible and ‘merge’ them into the final image, which is an ‘expensive’ calculation. An inherent limitation of real-time graphics though is that we can only sort meshes and not individual triangles. Because of this, complex or intersecting shapes can display incorrectly or ‘flicker’ when navigating.

The Blending mode is slow, but robust.

The only exception to this rule is when you are using textured objects that are largely opaque: only the transparent pixels will be involved in the transparency calculations. So less transparent parts in your textures will lead to less of a ‘performance penalty’.

Note: In the Blend and Additive mode, all geometries that have blend or additive materials will be excluded from casting shadows.

For example, I have chosen to make a dirty bottle, cool material to see the level of transparency. “Bottle_01a” is my outer bottle geometry, it will serve me to make my first layer, which will be dirty.

For example, I have chosen to make a dirty bottle, cool material to see the level of transparency.
“Bottle_01a” is my outer bottle geometry, it will serve me to make my first layer, which will be dirty. I will create a second layer that will serve me to add a transparency effect, in this example, add the “glass” effect.

Transparency mode: Additive

This mode is nearly as slow as Blending. It’s more of a visual variation of blending, useful for  emissive materials that are used for effects like sparkles, particles, X-ray/blueprint rendering, etc.

Note: In the Blend and Additive mode, all geometries that have blend or additive materials will be excluded from casting shadows.

This layer “Bottle_01b”, will then be used to "Add" the desired transparency effect for the upper layer, in this case, glass.

This layer “Bottle_01b”, will then be used to “Add” the desired transparency effect for the upper layer, in this case, glass.

As long as only additive is used in the scene, the geometries don’t need to be sorted front to back, thus you won’t have the potential flickering issue like blending. But if you mix additive and blending material in the same scene, additive and blending geometries will need to be sorted correctly

Transparency mode: Dithered

The Dithered mode is a faster way to achieve Blending, but it comes at a price: the model will become more ‘noisy’ during navigation. Similar to our shadows and depth of field, the view will improve when the camera is static.

This method is most useful for models that have complex geometries with partial transparency, like fur or hair.

For this example, I think the little transparency be disabled in the liquid. But if we had a clear liquid, we could use for example Dithered (to avoid problems of sorting) or other mode of transparency as required. One good example for Dithered effect: https://sketchfab.com/models/21b40edc94104acbad85b825ed45733c

For this example, I think the little transparency be disabled in the liquid.
But if we had a clear liquid, we could use for example Dithered (to avoid problems of sorting) or other mode of transparency as required.

One good example for Dithered effect:

For change coca coca to water for example, I can enable the transparency and use Dithered mode.

For change coca cola to water for example, I can enable the transparency and use Dithered mode.

Transparency mode: Mask

This is the fastest method that you can use whenever you want cutout meshes without changing your geometry. By adding an alpha channel to your textures and setting an alpha threshold you can create the appearance of a very detailed mesh, while still rendering very fast.

This type of texturing is almost mandatory on scenes with many grass blades, leaves of trees, etc. as otherwise the rendering cost would be way too high.

The sticker / label will be above all, it is glued over the bottle. I'll add a texture in grayscale for damaging/dirt effect and managed the intensity. The “Mask” mode is usually the most suitable for the sticker.

The sticker / label will be above all, it is glued over the bottle.
I’ll add a texture in grayscale for damaging/dirt effect and managed the intensity.
The “Mask” mode is usually the most suitable for the sticker.

Limitations of transparency on Sketchfab

It’s important to realise some effects are very hard (read: slow) to achieve in a real-time renderer. Here’s a list of effects that we currently do not support:

  • Refraction
  • Colored shadows
  • Shadows where light passes multiple transparent objects
  • For Blending mode: Accurately rendering complex models that self-intersect or that have complex shapes. As we cannot not depth-sort triangles within a single geometry in real-time, complex shapes can lead to unexpected results or ‘flickering’ when navigating a model. You can avoid this by breaking up your geometry into separate parts.

Best practices for using transparency on Sketchfab

To wrap up, here are some tips on how to get the best results for transparency:

  • Use it wisely. If possible, limit the size of your transparent objects and break large, complex objects into smaller geometries.
  • Don’t join transparent and opaque meshes into one geometry, but leave them as separate meshes in your model. This will allow far faster sorting and rendering.
  • Start testing with the least ‘expensive’ mode (‘Mask’) and switch to more expensive modes as needed.
  • When relying on alpha masks, it can help performance to add a little bit of geometry. An example: when rendering leaves, don’t use a square for each leaf but a (very!) low poly shape that roughly matches the leaf’s shape. This will minimize the amount of sorting and testing we need to do. Again, this will only increase performance if you use very few  (like less than 10) polygons.

Examples:

image02

About the author

Bart Veldhuizen

Head of Community at Sketchfab. 3D Scanning enthusiast and Blenderhead. Running BlenderNation in my spare time.


Leave a Reply

Your email address will not be published. Required fields are marked *

  • faz says:

    Super cool thanks !

  • Simon Kratz says:

    Wow that’s really smart!
    Never thought to do it this way but the results look really convincing! Gotta try this as soon as there’s a chance, thx so much for this tutorial!

  • David Cohen says:

    This is extremely useful! I am sending this to my team! We will be sure to incorporate these tips and tricks into our next batch of models!

    • Bart Veldhuizen says:

      Glad to hear it was helpful David! Let me know if your team has any questions that we can help with.

  • Stevenb says:

    There’s either a typo or I’m just reading this incorrectly. You have two seemingly contradictory sentences. First you say “As always, we first sort geometries (separate objects in your scene) back to front.” And then you say “As long as only additive is used in the scene, the geometries don’t need to be sorted front to back, thus you won’t have the potential flickering issue like blending.” So is it front to back, or back to front? Or are you talking about something different in those sentences and I’m just confused?

    • Bart Veldhuizen says:

      Hi Steven!

      These sentences relate to different transparency modes. In each case, the sorting is handled differently, leading to a difference in performance.

      I hope that clears it up!

  • Missratatine says:

    Super bien fait 🙂

  • Mauricio says:

    “we cannot skip geometries that are obscured by transparent objects”

    Do you mean “obscured by *opaque* objects”?

    • Bart Veldhuizen says:

      No this is correct, and this is exactly what makes transparency so ‘expensive’ to compute. With opaque objects, you can depth-sort the faces and discard the ones that are obscured. With transparent objects however, you have to take all the ‘stacked’ faces into account and combine their contribution to the final image.

      Does that make sense?

      • Mauricio says:

        I do understand what you are saying, and I guess I would add a few words to make it clear that you are comparing this to standard opaque rendering. Something like: “With standard rendering, we can skip surfaces that are obscured by other opaque surfaces. However, with transparent surfaces and the Blending mode, we cannot skip any surfaces – we must render ALL…”

      • Bart Veldhuizen says:

        That’s a great suggestion, thanks! I’ve updated the text.

Related articles