Material Study: Glass - https://www.artstation.com/artwork/5voJWP
I decided to explore the world of glass materials for a segment of my graduation project. The idea was to explore different ways to render glass for realtime usage in video games. Somehow, I was pulled into rendering techniques and shader optimization, which allowed me to learn much more than just material graph workflow.
Rendering Glass in Video Games
Glass is such a fascinating element in video games. It offers sight in thrilling environments, information in critical PvP matches and contributes to the dynamism of game environments in the most visually compelling ways.
Glass panel in Doom 2016
Unreal Engine Glass
Unreal Engine's capability to make anything look good with minimal effort is commendable. I decided to leverage this as a learning opportunity to familiarize myself with the tools of the material graph. I set out with the follow objectives:
- Find different ways to create glass shaders inside the engine
- Understand optimization and resources for various materials
- Explore the possibility of a master material creation
- Come up with creative usage of glass material
I started by combining the wealth of resources on the internet, and my pre-existing knowledge of shaders to come up with a handful ways of producing glass in the game engine. I will be providing some of the helpful resources at the end.
Testing creation of glass shaders with different variants
I began looking for different ways to create a glass shader in the engine. There are simpler ways of making glass shader. It's as easy as plugging in a low value to the Opacity channel in the material graph, after you have set the material to be shaded translucent. This provides the translucency output in the easiest possible way.
Fresnel
Another common way is to create the illusion of refraction using Fresnel function, which allows the manipulation of the material based on where the viewer is situated. This means that essentially anything in front of the view is rendered with a value of 0, and transitions to the value of 1 in the periphery. This can be used to mask and blend between two values, i.e. how much refraction is perceived at the centre of the material, versus, what is observed around the edges. The fresnel can be modified to update these values, and also tweak how strong the refraction is.
Fresnel-based glass shader
Real-time glass rendering is notoriously heavy on computing, due to the complexity of light calculation. Below is the Shader Complexity of the tested materials, as viewed in Unreal Engine. B2 material falls closer to the end of the spectrum, indicating high complexity. This is due to the fact that the shader is two-sided, and thus require calculations that is reproduced twice for each side. A2 on the other hand is the simplest material - it is essentially an Alpha Cutout Mask, rendering only features outside of the mask.
Instruction count is another useful metric to see how many instructions are being sent to the assembly shader to render the graphic. While it is just an approximation in Unreal Engine, generally speaking, the higher the count means the more expensive the material is. Interestingly, merely enabling the material to be translucent balloons the instruction count to over 200. This is why A2, being a masked material draws the lowest instructions.
Shader Complexity and Shader Instruction Count Overview
Alpha Masking
Alpha Cutout Glass in Minecraft
This can be taken a step further with a technique known as dithering. It allows the material to create an illusion of varying translucency while still being opaque, through the means of a masking layer to eliminate some pixels. Imagine something like halftone printing technique.
Dithering Gradient
Dithered Alpha Masking - Note the "Noise" in the Material, which is the Dithering Effect
Unreal Engine's material graph provides a material function to replicate the alpha dithering effect easily. I tried it with the Fresnel node to mimic a refractive surface.
Flat Surfaces
There are several reasons why a shader, especially common ones, should be tested across different surfaces. Rendering surfaces in sphere make for an ideal overview as it demonstrates how the curvature interacts with the lighting conditions, however it may not dictate the final use case of a material. The same glass shaders when added to flat surfaces yield completely different output. Interestingly, the glass shader that will ever come into use for gameplay will likely be used for flat surfaces such as windows or a car's windshield, both with little or no curvature. Surfaces like fish bowls or glass orbs are not as frequently encountered in games. The materials do not work in isolation and consideration for the use case needs to determined.
Shader Test Flat Surface
Master Material
When I started with the Glass Master Material, I had to make sure all the components are taken care of - Base Color, Refraction, Roughness, Specularity, and Opacity. On top of that, it should account for other aspects like fresnel-based input, masking where needed and ability to tile textures.
Early Glass Material Test
After the initial setup, I went on adding further enhancements like having the ability to enable and control fogginess, and also a raindrop effect for outdoor scenes.
Master Material Instance Showcase with Parameters
Advanced Glass Master Material Graph
Material Test with Surface Variations
I wanted to test the material for several use cases and came up with some variations that demonstrate different applications using several instances of the master material.
Material Instance Variations
Advanced Glass Material Showcase
Further Explorations
After creating the master material, I wanted to explore the idea of coming up with creative ways to use glass shaders. I began toying around with the generation of a glass blowing shader - something that mimics the real world process. It's intriguing because the process of shaping glass begins from the material being partly solid to completed rigid. Naturally, the material in engine would also need to follow this rule and heat up and cool down.
The final scene was rendered in a workshop environment, and illustrates the process where the material heats up, deforms slightly and goes completely opaque before returning to refractive translucency.
Glass Blowing Shader
