UE4: How to fix translucent materials (dithered opacity) – Howtoshtab – how to, lifehacks, tips and tricks

Hi! In this video I’m going to show you how to avoid common problems with transparency in Unreal Engine 4. On the screen you can see two meshes with opacity set to 100% so they both should look the same. But the mesh on the left is definitely different. It has bad sorting of polygons, Unreal Engine logo is not visible. The mesh on the left has translucency enabled. While the mesh on the right… it’s material is opaque. Blend mode on the left mesh is set to “Translucent” while the second mesh is “Opaque”.

As you can see, enabling translucency changes the look of the object even if the opacity is set to 100%. Probably that’s an issue you encountered quite often. How can we deal with it? We can use a trick that comes straight from the 80’s It’s “alpha dithering”, or “screen door transparency”. Dithering – is emulating the appearance of a smooth gradient or a smooth value (like light gray) with a fewer amount of shades. Here we could still use a solid mesh and emulate the transparency by dithering its alpha with only two values – completely transparent and completely opaque zero and one. There is a mode for that – “Masked” – so we replace “Translucent” with “Masked”. Now obviously nothing happened, because in “Masked” you have to specify “Opacity Mask”, not “Opacity”.

If we just move opacity to “Opacity Mask”, it still won’t be what we need because it’s either one (completely opaque) or zero (completely invisible). As you can see, at least the appearence changed. It looks like a proper solid mesh. The appearance is identical to the regular solid mesh (opaque mesh). Now we need to enable dithering. There’s a node called “DitherTemporalAA”. It refers to temporal antialiasing, used in postprocess by Unreal. So it will smooth out the zero-one mask Let’s place it between our opacity and “Opacity Mask” with the opacity value put into the “Alpha Threshold” slot. And that’s it. Now our left mesh is properly vanishing almost like it was a normal translucency. You can probably see some pattern but it’s completely fine. In Full HD it would be even better.

So why is it so hard to use normal translucency for the engine compared to an opaque mesh with a mask? Well, it’s because how modern game engines do rendering. Before the generation of Xbox 360 and PS3, the most commonplace technique was called Forward Rendering. Currently, the mainstream technique is Deferred Rendering. I will explain the Deferred technique by showing you the buffers that Unreal Engine uses for that. View Mode > Buffer Visualization you can see all of the buffers. For example: Base color. World normal. All the lighting is done in the 2nd pass. The 1st pass is just writing values for every pixel into the buffers like Roughness, Base Color. So instead of wasting computation time for every polygon, every vertex and every light in the scene, we only use the information that comes from screen’s pixels.

Thanks to that, in modern game engines you can have hundreds of small lights in the scene. It would be super hard to do with Forward techniques. But, there’s a disadvantage to this. As you can see, in World Normal pass we only store values from the closest mesh – closest pixel – to the camera. So what about the rocks that are behind our objects? For Deferred rendering, they are completely invisible. They don’t exist. And that’s a huge problems. Because we calculate light only for what we see, if we want to have some transparency, we would have no information for the rocks behind to get lit. So how Unreal Engine solves this kind of a problem? Well, it renders transparent meshes in Forward mode, then combines the result with the Deferred-rendered background. When we go back to “Lit”, it’s here, but definitely looks different. It’s rendered with a different technique. So, what we did is using a standard “Masked” mode, instead of the “Translucent” mode.

Thanks to that, Unreal Engine can still stick to its Deferred rendering path for the object It looks identical the the normal opaque mesh, just masked by a dithered mask, which is either 0 or 1. in motion, with anti-aliasing applied, it will be very hard to notice especially in high resolutions. And the additional benefit of using this technique is much higher performance of the meshes, compared to translucency. Thank you for your time and good luck with your projects!.

You may also like