This is a UE5 shader that I've been making for my game Ballistic.exe.
The game uses a retro, dithered aesthetic. I still wanted to have a cool glass surface for a certain prop in the game's hub, so I made this stylized version.
The final result:
Geometry
For this prop, the geometry is divided into three parts:
- The receptacle with the outer shell of the glass surface
- The inner shell of the glass surface for refraction
- The creature
They are all created inside of Blender:
Reflection shader
The outer shell of the receptacle geometry will have the reflections shader.
The first step of the shader is to define two "light vectors", which will determine the direction of the fake reflections.
By taking the dot product of these vectors and the reflection normal, we can obtain stylized "hotspots".
We can add them together to combine them, but don't forget to saturate (clamp) before adding, since the result of the dot product is in the range -1 to 1.
If we round and saturate the result, and feed it into the opacity mask of the material (material uses masked blending), we obtain the following result:
Then we can add an offset to control the width of the reflection:
Notice above how adding the two dot products together after clamping actually gives us a third dot for "free" where they combine to be above 0.5 before rounding.
The next step is to add the outer edge to the reflection.
For this, very simple, we add (or max, like here) a fresnel effect with the parameters exposed.
For this, very simple, we add (or max, like here) a fresnel effect with the parameters exposed.
Note that the fresnel is actually overkill here and should be replaced with a simple dot product of the vertex normal and camera vector to achieve the same effect for cheaper.
You can stop here for the reflections, but I decided to add another layer using a small texture to add more detail to the reflection.
The setup is very simple: Use the ViewAlignedReflection to map the texture, and then add it (or max it) with the previous result.
The texture is just scribbled at random in Photoshop until getting the desired look:
Refraction shader
The refraction shader is even more simple, really.
The refraction shell is a mesh that copies the reflection shell, with a simplified geometry.
We apply a transparent material, because it will need to sample the scene color.
Here is the whole of the shader:
We just use the fresnel (once again, a dot product of normal and camera vector would actually suffice) to offset the UVs of the scene color, feeding the result into the Base Color.
If you look closely, you'll notice that my outline post process isn't applied inside of the glass, because the transparent material can't read the post processed buffer. But I don't think it shows that much.
About the post process
Of course you'll notice that the scene is heavily post processed, not looking much like Unreal.
The post process itself is actually quite simple, and a lot of the logic is in the material shaders themselves.
But the outline is a post process, and I think it works very well here with this approach.
In particular, since the reflections are in a masked material and not in the transparent shell, they can have outlines which I like a lot, looking like a comic book effect:
But the outline is a post process, and I think it works very well here with this approach.
In particular, since the reflections are in a masked material and not in the transparent shell, they can have outlines which I like a lot, looking like a comic book effect:
Overall this approach is quite performant and meets my needs for the game!
If you find this interesting, consider checking out the game on Steam!
If you find this interesting, consider checking out the game on Steam!
Cheers!
