The FPS Deep Dive - 5 Techniques for Optimizing Transparency in Unreal Engine

Pulsating energy barriers, glass, realistic water, see-through cloth curtains, exploding magic projectiles - translucent effects are beautiful. Almost all of them look amazing. However, with every transparent object placed on the scene, a trade-off is made. Transparency is an expensive effect. It bypasses the standard, efficient logic of the graphics pipeline.

If you add too many transparent effects to your game without planning and measuring, it will compromise performance. This can lead to poor reviews and players quitting. No matter how amazing the scenery appears, nobody wants to look at a slide show.

This guide is your plan to prevent that. By the time you finish this article, you will have a toolkit of powerful methods for taming transparency. You will learn how to strategically balance visual quality with game performance, often without compromising your creative vision.

1. The Ultimate Optimization - Avoiding Transparency Altogether

Sounds harsh. What about visual quality? With some creativity, you can make great visuals without using transparent surfaces at all.

A good example of this is Overwatch 2. For Mei's ice, they made it non-transparent.

There is a pixel shader effect that shows a silhouette inside a block, but this is just a visual trick, not transparency. When creating effects like ice, techniques such as parallax on multiple textures can be used.

Bottles in Half Life Alyx

They appear transparent, but they are not. They sample a cube map - a 360-degree static texture of the environment.

Smokes in Valorant

Riot Games ensured that this game runs smoothly even on older, low-end hardware. The entire game is designed with performance in mind, and even on the lowest setting, it still retains its artistic vision. Smokes are a great example of avoiding expensive transparency.

Many smokes in Valorant are opaque. An effect like fog would be a standard excuse for the necessity of transparency, yet Riot uses it minimally. While some parts use transparency, I do not think it's full translucency. They use many techniques described below.

2. The Illusion of Transparency - Masking and Dithering

Masking

Typically, with translucent materials, you can pass a float, allowing for a range of transparency in the surface. With masking, this is not the case. There are only two values: 1 and 0. Transparent or not transparent. This is drastically faster than classic transparency. It still allows for amazing shader animations that are possible with transparency.

A lot of effects in Valorant are based on masking

Look at Viper's wall. There is no halfway transparency. The wall is not see-through. Its edge is entirely see-through, allowing for animation. The effect is cheap and looks great!

Dithering

Baldur's Gate 3

I love dithering! It is a concept that relies on masking. It boils down to creating an illusion of partial transparency with masking. Let's say you have a masked material and want it to appear semi-transparent. You can then use masking in a pattern, which masks some points and leaves others unmasked. It will be clearer if you look at an example. Look how this wall appears to be fading in. But it's all smoke and mirrors! With masked material, the wall is either visible or not. It's only the pattern that makes it appear to fade in.

Here, the same concept is taken to a higher level. Pixels are either transparent or fully opaque. A pattern is applied, just a different one. However, the pattern is tiny. If you look carefully, you can see a pattern in small pixels.

Genshin Impact

Genshin Impact uses this technique when you put your camera close to the character. This way, when the camera flies inside the game character, the player will not see parts of the mesh from the inside.

Warframe

Warframe is a fantastic game that runs well on older PCs. They also use this technique to avoid blocking player's vision.

What I love in dithering is how universal this is. That technique can be applied to almost all objects with traditional transparency, and it will look alright.

3. Keep It Small - Tighter Meshes

Use tight meshes and textures. This is a widespread optimization for things like foliage. Instead of putting a leaf mask on a quad, put it on a leaf-shaped mesh. The less transparent the surfaces in your game, the better the performance! Even masking is more expensive than using purely opaque objects, so it's beneficial to do so.

4. The Right Algorithm - Finding the Cheapest Blend for the Job

Another great way of making transparent surfaces render faster is by using blend modes like Additive. There are a couple of them, and most of them are more efficient than classic blend mode. They work in a specific way, for example, Additive can only brighten the surface behind it.

5. Simple Shaders - Optimize the Material

It is essential to minimize the complexity of shaders that utilize transparency, as well as those on objects adjacent to transparent objects. Very often, with transparency, one pixel can be drawn multiple times. Disabling lighting on translucent objects is beneficial. Avoid complex shader operations, especially on translucent objects. I will write more about this point in another blog post in the future.

Marvel Rivals

The material for Invisible Woman's barrier is very simplistic - a fresnel with a pattern. This is excellent practice for an ability like this, which can occupy a large part of the screen.

Bonus Tip: The Last Resort - Lowering Resolution When All Else Fails

This one is the last resort, but it can be effective and fast to implement. For some platforms, such as mobile devices, this is a widespread practice and barely noticeable. For PC and console, this can be observed by players and negatively impacts game quality.

DLSS and TSR are a quick fix for this, but use them with caution. Some players dislike those effects. They also incur a performance cost on their own. Sometimes, it might not be worth running them - the price of the TSR algorithm can be more expensive than transparency. Like many things, it's beneficial to measure its performance in your game.

It's good to have it as an option for a player. However, if the game can only run smoothly with DLSS, this is not ideal.

A Word of Warning

Some of the tips here are just good rules, and you should follow them whenever you can. But if your game has low FPS, and you want to improve it, make sure that transparency is actually an issue. You should profile your games regularly. Performing random optimizations blindly can sometimes yield no performance benefit - it can make your game look worse and move further away from your artistic vision. Sometimes it can even make it run slower.

If you want a simple profiling solution, click to join our Fish Profiler Beta waitlist.