UE4 Transparency - OpenGL Research and Investigation
This post takes a look at the transparency investigations I worked on at Ascent Robotics and highlights some of the challenges when implementing transparent materials using OpenGL in UE4. Using OpenGL was a requirement at the time of this investigation due to the fact that the final images were captured on a Linux machine so DirextX11/12 was not available. The research and implementation here ultimately allowed the team to train AI on transparent objects for the first time. It also exposed a major shortcoming of the deprecated OpenGL renderer and eventually served as a basis for switching to the Vulkan renderer, which significantly improved the overall visual quality of the simulation.
This initial image image shows various transparency tests within UE4. The main goal was to build out a library which covered a wide variety of transparency types and could be easily updated to represent new real-world objects supplied to the simulator.
These objects served as our initial test batch. The variations shown here represent the final implementation that was used for the simulator. Control over individual parameters was available in-editor.
This is the final material graph. Using a custom depth pass allowed specific control over transparent components viewed through other transparent components. The notes in the graph describe removing unwanted refractions and controlling draw order.
On the left you can see examples of unwanted refraction. The table is showing in the material even though it should be blocked by the black plastic.
The right side shows incorrect draw order with internal components drawn on top of external ones.
Here is a better visualization of the draw order issues illustrated by toggling the custom depth pass on and off. When off, the transparent elements within the object are drawn on top of the external ones.
Objects with correct refraction and draw order for comparison. (Additional material instances show variations of the transparent material but use the same underlying logic.)
I also tested out the transparency with a grunge overlay applied. This made the draw order issues substantially worse.
Details on the grunge overlay: https://aldenpedulla.artstation.com/projects/EvvoZA
Grunge on the far side of transparent objects would consistently draw out of order. Flickering was also common when multiple objects were involved.
These issues eventually led us to adopt the Vulkan renderer which significantly increased visual fidelity.
Test view of the initial set of objects we wanted to support with variations of the material implementation and other properties.
Some under-the-hood material settings used to achieve the final result.