top of page
Search

Forcefield Shader

  • jamesghholt
  • Apr 26, 2022
  • 2 min read

Updated: Jun 8, 2022

Our game's core mechanic is the movement of the barrier, because of this the player needs to be aware of it's position at all times. But also be able to see the enemy player clearly on the other side. Taking inspiration from Winston's shield from Overwatch, I used similar visual aspects, as it plays a similar role within a competitive gameplay; to be visible, but not blocking visibility.



This look is achieved through: Fresnel, Depth Fade, Masking and Custom Textures. Fresnel defines the white edges of the sphere. Fresnel effect is the observation of the amount of reflectance, seen upon a surface, depending on the viewers viewing angle. This is primarily seen at a "grazing" angle (smaller angle of incidence, in reference to the geometrical optics). This shallow angle seemingly causes a stronger reflection upon the observed surface, an excellent example of this would be the surface of water.


Within 3D this is usually used to create a "rim light" around models, to achieve a specific look. In short, the more a surface faces away from the players viewport, the greater value it is assigned (between 0-1). Additionally, the intensity of said effect, usually referred to as "exponent", can be controlled; either increasing or decreasing the necessary angle for the mask to take effect, or the "sharpness" of said mask. This mask can then be further manipulated to create specific effects. A well known, unique use, of this effect, would be Mei's freeze from Overwatch, used to achieve an easily identifiable, believable, frozen look. This effect is usually achieved through taking in account difference in angle between face normal and player viewpoint. However, there are a multitude of various ways to achieve the same result, with a different method -- this is just the most common I know of.



Depth Fade is used to hide unsightly seams between translucent objects, when intersecting with opaque ones.

Frequently used with water shaders, or with deep fog - as assets lose opacity, and smoothly blend into one another. Simulating an effect of depth. However, this effect can be inverted, which it has for this specific shader. Therefore, exaggerating the silhouette of intersecting assets, as seen below by the cube. This simple effect allows the shield to seemingly interact with it's surroundings - important as it's shifting position through the map.



The hexagonal pattern is a simple tiling texture of said pattern, supplied by Unreal. As seen below, this pattern pans across the shield in a band -- adding brief moments of visibility, to what would be an easily missed asset, without greatly obstructing the players view. This simple effect, is just as simple to execute. Using "Generate Band" a mask, of a band, can be generated- with a plentiful array of modifiers for small adjustments; width, sharpness, offset, etc. Incorporating a "Panner" node allows this mask to pan the barrier, revealing the hexagonal pattern.



Here's the full material:


References




 
 
 

Comments


©2022 by James Holt. Proudly created with Wix.com

bottom of page