Using Refraction

When light passes from one medium to another, say from air to water, the direction that the light was traveling will be altered where the two mediums meet. This lighting phenomenon is referred to as Refraction and happens because the speed at which light travels can be altered by the different types of materials light come in contact with. Inside Unreal Engine 4, you can simulate this lighting phenomena in your Materials by using Refraction.

Refraction

Refraction is the term used to describe the change in direction of a light wave due to a change in its transmission medium. In other words, when light comes in contact with certain surfaces, like water or glass, the light will get slightly bent because those surfaces affect the speed at which light travels through them. The best example of Refraction can be seen by placing part of a pencil in water. The part of the pencil that is placed in the water will appear bent where the pencil and water meet due to Refraction. Here is a very simple example showing how Refraction works.

The part of the pencil that is under the water will appear bent when viewed from the camera due to Refraction. This happens because the light waves from X, the original pencil position, are being affected by the waters refraction and appear to actually be coming from Y when viewed from the camera. This is happening because the speed at which light travels changes as it hits the water and then changes again as it hits the air.

Index of Refraction or IOR

Index of Refraction or IOR is an optical measurement that can be used to tell you exactly how much light will be bent when light propagates from one medium to another. Since this lighting phenomenon can be measured, we can use these measurements inside UE4 to affect how the Refraction will look giving a better sense of realism to our 3D world. Here are some IOR values for objects that you might interact with every day.

Material

IOR Value

Air

1.00

Water

1.33

Ice

1.31

Glass

1.52

Diamond

2.42

Using Refraction in Materials

Setting up a Material that makes use of Refraction can be accomplished by following the directions below.

This tutorial was written assuming that you included the Starter Content with your project. If you did not, please look into how to Migrate the Starter Content from another project into this one.

  1. First create a new Material by using the mouse and Right-Clicking in the Content Browser and then selecting Material from the Basic Asset List and name the Material Refraction_Material. When completed, the Content Browser should look like this.

  2. Open up the Material created above by using the Left Mouse Button and Double-Clicking on the Material in the Content Browser. Once opened, change the Blend Mode from Opaque to Translucent and change the Lighting Model from Volumetric Non Directional to Surface Translucency Volume. When completed, your Material Details panel should look like this.

  3. Now that the Material has the correct properties, we can now start adding the required Material Expression nodes. For this Material, we are going to need the following type and amount of Material Expression nodes.

    • Constant x 5

    • Lerp x 1

    • Fresnel x 1

  4. With the all the required Material Expression nodes added to the Material Graph, it is now time to start to connect everything together. When completed, your Material Graph should look like this.

  5. For easier testing later on, select the Constant Material Expression node going into the B input of the Lerp and Right-Click on it. From the menu that comes up, select the Convert to Parameter option. Once this is completed, make sure to name the input. For this example, we will use IOR as the name. When completed, your Material Graph should look like this.

  6. Now that the Material is setup, make sure to press the Apply and Save buttons and close down the Material.

  7. Once the Material has been closed, locate the Material in the Content Browser. When you find it, use the mouse to Right-Click on the Material and then choose the Create Material Instance option from the menu. When completed, your Content Browser should look like this.

  8. With the Material Instance now created, lets add some objects to the world so that we can better preview our Material. If you have included the Starter Content with your project, you can find a bunch of different shape meshes located inside the Shapes folder. For this example, the Cube, Cone, and Sphere have been added to the world.

    If you cannot find the Cube, Cone, or Sphere, this could mean that you did not include the Starter Content with your project. If you did not include the Starter Content, you can either create a new project, this time make sure to include the Starter Content, or you can Migrate the Starter Content from another project into this one.

  9. Now that there are some testing shapes, apply the Refraction Material Instance to the shapes by first selecting the Material Instance with the Left Mouse Button in the Content Browser and then dragging the Material Instance over a shape and releasing the Left Mouse Button. When completed, you should have something that looks like this in your level.

  10. Open up the Refraction Material Instance by Double-Clicking on it with the Left Mouse Button in the Content Browser. Once open, enable the IOR parameter by clicking on the check mark box with the Left Mouse Button. Once active, you can set the IOR to different values to simulate different surface interaction. Here is an example of changing the IOR from the default of 1.33, the IOR of Water, to 1.52, Glass, and finally 2.42, Diamond.

Refraction Tips & Tricks

In the following section, we will take a look at some other ways that you can use Refraction in combination with other aspects of the Material Editor to yield some very interesting results.

Refraction & Normal Maps

Adding the option for the Refractive Material to use a Normal map will yield some very interesting results, especially in areas where the Normal map has lots of interesting detail. Modifying the Material created above in the following manner will allow it to work with Normal maps.

  1. First find a Normal map to use. For this example, the T_Brick_Clay_Old_N was used, however any Normal will work. Once the Normal is located, open up the Refraction_Material and then Drag the Normal map from the Content Browser into the Material Graph.

  2. Once the Normal map has been placed in the Material Graph, connect it to the Normal input. After it is connected, select the Normal map Texture Sampler node and Right-Click on it with the mouse. From the Menu that is displayed, select the Convert to Parameter option and give it a name of Normal_Map.

  3. Make sure to press both the Apply and Save buttons and then close the Material.

  4. With the Material now compiled and saved, open up the Material Instance and look under the Parameter Groups in the Texture Parameters Values section. Here you should see the Normal map as an editable parameter. To change the Normal map, all you have to do is first enable it by clicking on the grey-out checkmark box. Once enabled, you can change the Normal map by finding a new Normal map in the Content Browser, selecting it, and then using the Use Selected Assets from the Content Browser button to assign the selected Normal map to the Material Instance.

  5. By changing the Normal map, you can affect the way the Refraction looks in interesting ways. Here are some examples using only the Normal maps you can find in the Textures folder of the Starter Content.

Refraction and Movement

If you add a Panner Material Expression node to the Material Graph and plug it into the UV's of the Normal map texture, you will get some very interesting results. While this method might be useful for a glass window, it would be very useful for Visual Effects such as heat haze or distortion from a huge explosion.

Refraction Depth Bias

Refraction depth bias is a way to prevent closer objects from rendering into the distorted surface at acute viewing angles. However this can increases the disconnect between the surface and where the refraction starts. You can adjust the Refraction Depth Bias in the following two places inside UE4.

  • Material Editor - You can find the Refraction Depth Bias in the Details panel under the Material section. You will need to press the white triangle (Highlighted in Green) to expose this property.

  • Material Instance - You can find the Refraction Depth Bias in the General section of the Details panel.

Conclusion

Adding Refraction to your Materials, especially glass and water, is a great way to get very realistic looking results. Remember to use the correct IOR value for the type of surface you are trying to simulate. You also might be tempted to push the IOR value past what is used for the surface type, resist this urge. IOR values come from real world measured values so pushing the IOR higher or lower than what it is supposed to be will not make it look better.