Choose your operating system:
Windows
macOS
Linux
Bump Offset mapping give a surface the illusion of depth by modifying the UV coordinates in a creative way to help further displace the texels from the surface of the object, giving the illusion that the surface has more details than it really does. In this How To example, we will be covering not only how you can find the Bump Offset Material Expression, we will also be covering how you can utilize the Bump Offset node in your Materials.
Bump Offset
BumpOffset is the Unreal Engine 4 term for what is commonly known as 'Parallax Mapping'. The Bump Offset expression allows a material to give the illusion of depth without the need for additional geometry. BumpOffset materials use a grayscale heightmap to give depth information. The brighter the value in the heightmap, the more 'popped out' the material will be; these areas will parallax (shift) as a camera moves across the surface. Darker areas in the heightmap are 'further away' and will shift the least.
Finding the Bump Offset Material Expression
You can find the Bump Offset Material Expression by searching for it in the Palette search box.
Or by Right-Clicking in the Material Graph and searching for it.
When searching for the Bump Offset Material Expression, you will see another Material Expression called Bump Offset Advanced . Bump Offset Advanced is a Material Function that was created to add some extra controls that are not available in the regular Bump Offset Material Expression. Despite the two nodes having different inputs, they both work in the same manner by manipulating the UV's of the object that it is placed on to help give the illusion that the object's surface has more detail than it really does.
Once you locate the Bump Offset Material Expression, you can bring it into the Material Graph like any other Material Expression by first selecting it with your Left Mouse Button and then dragging it into the Material Graph. When you release your Left Mouse Button , the Bump Offset Material Expression will be placed in the Material Graph.
Using the Bump Offset Material Expression
Setting up a Material to use the Bump Offset Material Expression can be accomplished in the following steps.
This tutorial will make use of content that can be found if you included the Starter Content with your project. If you have not included the Starter Content in your project, you can look into the
-
First use the mouse to Right-Click in the Content Browser and then from the Create Basic Asset section of the pop-up Menu, select Material and name the Material Bump_Offset_Example . Once named, Double-Click on the Material in the Content Browser to open it up.
-
Because the Bump Offset Material Expression works using UV coordinates, we need to have a Material that utilizes Textures for the Base Color, Roughness, Ambient Occlusion, and Normal inputs. For this example, we are going to be using the following textures that can be found in the Textures folder if you include the Starter Content in your project.
-
T_Brick_Clay_New_D
-
T_Brick_Clay_New_M
-
T_Brick_Clay_New_N
Once you locate the textures, open up your Material and then bring the textures into your Material Graph by selecting the Texture in Content Browser with the Left Mouse Button and then dragging the Texture to the Material Graph. Release the Left Mouse Button when your mouse is over the Material Graph to place the Texture in the graph. After you add the first texture, repeat the above process for the other two textures. When completed, you should have something that looks like this.
![BumpOffset_Adding_Textures.png]()
-
-
With the Textures now placed in the Material Graph, it is now time to start connecting the Textures to the correct inputs. First connect the T_Brick_Clay_New_D to the Base Color input. Next connect the T_Brick_Clay_New_N to the Normal input. Then connect the Red channel of the T_Brick_Clay_New_M texture to the Roughness input. Finally connect the Green channel of the T_Brick_Clay_New_M to the Ambient Occlusion input. When completed, you should have something that looks like this.
![BumpOffset_Making_Connections.png]()
-
Now with all the textures connected, it is now time to add the Bump Offset Material Expression to the Material Graph. To find the Bump Offset Material Expression, search for it in the Palette using Bump Offset as the search term. Once it has been found, you can add it into the Material Graph like any other Material Expression by first selecting it with your Left Mouse Button and then dragging it into the Material Graph. Once you are over the Material Graph, release the Left Mouse Button to place the expression in the Material Graph. When completed, you should have something that looks like the following.
![BumpOffset_Adding_BumpOffset_Node.png]()
-
Once the Bump Offset Material Expression has been placed in the Material Graph, it needs to be connected to the UV inputs of the three Textures in order to work. To connect the Bump Offset Material Expression to the Textures, use your Left Mouse Button and click on the output circle that is on the right side of the Bump Offset Material Expression. With the Left Mouse Button still held down, drag your mouse over to the input on the Texture Sample that says UV and release when you see a green checkmark. Once you have done this with one Texture, make sure to do it to the rest. When completed, you should have something that looks like this.
![BumpOffset_Connecting_BumpOffset.png]()
When you first connect from the Bump Offset Material Expression to the UV input on any of the three textures, you will notice a red warning placed at the bottom of the Bump Offset Material Expression. The Bump Offset Material Expression needs a Height Map in order to work correctly and currently one has not been provided. Once an input to the Height has been entered, this error will go away.
-
Once the Bump Offset Material Expression has been connected to the UV input of all the Textures, it now needs to be setup so that it can work. The first thing that needs to be done is that we need to give it a Height input. To do this, grab the Texture we are using for the Base Color input, T_Brick_Clay_New_D , and duplicate it by first selecting it with the mouse and then pressing CRTL + W on the keyboard. Once the node is duplicated, move it so that it is in front of the Bump Offset Material Expression and the connect the Alpha output of the Texture into the Height input of the Bump Offset Material Expression. When completed, you should have something that looks like this.
-
Now the settings for the Bump Offset Material Expression need to be set so that we do not get what is commonly called UV swimming. To adjust the settings of the Bump Offset Material Expression, select the Bump Offset Material Expression in the Material Graph by clicking on it with the Left Mouse Button and then in the Details panel, set the Height Ratio to 0.005 . When completed, you should have something that looks like this.
![BumpOffset_Setting_Up_BO_Node.png]()
-
Once the Height Ratio is set, make sure to compile your Material by pressing the green Apply button. After the Material has been compiled, it is now able to be used for in your game.
Here is an example of the new created Material in action.
![BumpOffset_Setting_Results.png]()
Conclusion
Using the Bump Offset Material Expression is a cheap and very effective way to add extra depth information to your Materials without having to add extra 3D Geometry. However keep in mind that the Bump Offset Material Expression only gives the illusion of extra depth information and because of this the effect could break down / not work in situations where the player / user can move their camera in such a way that it is parallel to the surface that has the Bump Offset effect applied to.