Glass/Transparent Blur UI Material Help!

Hi! We are trying to create a menu panel (for VR) that is in a glassmorphic style. We created a prototype on Figma (shown above) and wanted to implement this design into UE. We ran into some issues regarding the material and shadow depth in UE VR:

  • The dark blur material disappears when looking at it from the side (this happens to the icons as well)
  • Despite being a 3D object, the material does not show the ‘3D-ness’ - the panel appears flat. Ideally, we want the panel to look 3D (and be affected by in-game lighting), which is why we aren’t using UMG widgets. (eg, the user should be able to see that the area around the slider bars has been extruded inwards)
  • There is a glow to the text when being placed in front of the blur materials

Although there are several tutorials on this UI style for Unity, there don’t seem to be any for Unreal. We are somewhat beginners at Unreal, so thank you for your patience!

UE_SC_Clipping1

UE_SC_Clipping2