Material Blend Mode Issue

Hey guys, so I just started UE a couple days ago and have run into an issue regarding materials. Basically, I have a hexagon shaped mesh (created in Blender, but colored/textured in UE). The material I applied to it appears to be really buggy. It almost looks like the mesh is glitching and just looks bad. I don’t know what the cause of this issue is.

Here is a video displaying the issue. The blue hexagon has a normal blue material and then the purple hexagon has a different material, which is causing issues. This is just a side by side comparison. The blue hexagon, which is not translucent behaves normally, while the purple one, with a different material behaves oddly.

Video:
2024-01-05 00-37-53.mkv (9.5 MB)

Purple Material Blueprint:

I just started Unreal and am clueless about how rendering works so any help is much appreciated! :slight_smile:

UPDATE: The cause of the issue is changing the “Blend Mode” property from “Opaque” to “Translucent.” I still don’t know how to fix it though…

1 Like

Is the mesh just placed in the scene? ( no code controlling it’s placement )

Also, try removing this for the moment

Hi! Sorry for the delayed response. I’ve figured out the issue but am unsure how to fix it. So basically in the material properties panel, there is a property called “Blend Mode” which is “Opaque” by default. If you change this property to “Translucent”, this causes the issue seen in the video. You can’t change the opacity of a material (make it see-through) unless you have it set to “Translucent”, so I’m not quite sure what to do…

And to answer your question, removing the code you boxed in doesn’t change anything. The source of the issue is the Blend Mode property. And there is not any code controlling the mesh.

1 Like

The only reason I ask, is that strange sort of flickering is usually associated with moving the object every frame. Do you have physics enabled, or something else?

Otherwise, no, you can’t set opacity unless the mode is translucent. But it is an expensive mode, so maybe it’s not a good idea to have a lot of plaforms with that material anyway…

Up to you :slight_smile:

1 Like

My whole game is based around jumping on translucent platforms, so it’s necessary. The object doesn’t have physics enabled either. I still don’t know how to fix the glitch though

This occurs because translucent materials do not normally generate motion vectors, so Anti Aliasing cannot correctly compensate for them. There is a setting in the material called “render depth and velocity” or something like that, which will force it to be drawn in the velocity buffer and fix the blurring.

However, since there is only one velocity buffer, if you fix the blurring on the hexagon you will cause blurring on the elements behind the hexagon instead.

Another option is to use opacity masked dithering to fake opacity. This is a common technique that allows an opaque material to appear translucent, but like the method above, it often causes some degree of blurring of the background.

2 Likes

Considering Unreal Engine is the leader of the game engine industry, I find this incredibly disappointing… How can such a huge game engine be incapable of adding simple translucency to an object? People always talk about how good the graphics of UE games are, but you can’t even make windows?! Even Roblox’s game engine is capable of this. What is the point of having opacity if it doesn’t even work? I’m so disappointed right now, as my game was going to be heavily reliant on opacity. :frowning:

This is the standard way any deferred renderer handles translucency. Read up on deferred rendering if you want to understand why, but this is a small price to pay for the other advantages deferred rendering offers.

You can make windows, you just need to approach transparent assets with the understanding of limitations of the technology and design around them.
This is a large part of why most modern games fake the illusion of windows and glass (like Sony spiderman windows). Look closely at windows in most modern games and you’ll see the compromises they make and how they are hidden.

1 Like

So I used the DitherAA node but it still caused the glitch. The glitch occurs the very second you change the Blend Mode from “Opaque” to “Translucent.” Opacity is disabled unless you switch it to Translucent. If you switch to Translucent mode, even if you set the opacity to 1 (completely visible), the glitch still occurs. I can’t connect the Dither node to opacity unless Translucent mode is selected.

There are two pins, “opacity” and “opacity mask”
Opacity is for translucent, Opacity Mask is for masked opacity and will function with dither.

Again, there is only one velocity buffer. So when the renderer attempts to compensate for motion (such as when using TAA, motion blur, or any other effect that relies on motion vectors), it can only correctly compensate each pixel for one amount of motion. The glass up close will move only a small amount, while the background moves a lot. This is why the blurry artifact occurs - it is attempting to compensate for large, distant motion when in fact the glass is much closer.
No output of velocity:


Note that the amount of blur is equal to the very distant background. Correct for the mountains, but excessive for the sphere.

By drawing the glass into the velocity buffer as mentioned previously, the opposite will occur. The engine will correctly compensate the motion of the glass, but the motion of the distant background will be undercompensated. However, I think you will find this artifact far less offensive.
Outputting glass velocity:


Note that the background is no longer blurred as much as it should be, because the sphere’s velocity relative to the camera is very low. While technically wrong, this is much less noticeable.

The artifact can also be dramatically reduced by limiting the distance between the glass and it’s background. Your example is a worst case scenario, as the background is essentially infinitely far from the glass pane. Here’s an example:

image

Above you can see the artifact is much smaller against the nearby cube vs the distant background. This is because the relative motion vectors of these surfaces are much closer to each other.

Alternatively, you could set the translucency pass setting to “after motion blur”
This will cause the material to render after temporal effects. While this will fix all blurring, it will also cause the material to lack any motion blur or anti aliasing. This is usually a better option than disabling those features completely.
Here’s what that looks like:


Note the correct amount of background blur, but lack of any blur on the sphere. Unfortunately, no antialiasing is a pretty big and obvious downside to this method, as you can clearly see the stair stepping artifacts on the edge of the object.

Dithered Opacity with DLAA/DLSS:


The result here is pretty similar to translucent with velocity output with too little blur in the background, but the correct blur on the sphere. The main advantage of dithering is it is less expensive than translucent materials.
Dithered Opacity with TAA:

This tends to result in ugly smearing if there are large depth differences between the object and background.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.