UE4 Intro To Materials - Page 4


Index



Texture Coordinate


  1. Double click the Material to go back to the editor and right click in the menu and type TextureCoordinate
Create new sprite with button

  1. Click on the new Texture Coordinate node and look at the U Tiling and V Tiling. This represents coordinates of the texture with U being the horizontal and V the vertical. The number 1 represents one texture per set of polygons. Now hook up the node coming from Texture Coordinate to the UV input in Texture.
Create new sprite with button

  1. With the Texture Coordinate node selected change the UV to .25. You can see on the object that it is scaled even more.
Create new sprite with button

  1. Press Apply and go to the game to see the new scale:
Create new sprite with button

  1. Now change the UV’s to 4 in the material so that it scales the UV’s and the repeat happens more frequently (liike you are further away from the object).
Create new sprite with button

  1. Set the UV’s back to 1 as I photographed it from eye height (the same position as the player in game). Press the Apply button. Play the game and look at the texture. In my case I am happy with the tiling:
Create new sprite with button

  1. Now lets look at how Unreal handles colors. In photoshop in the color picker we can see four representations of color, but the most important to computer graphics are RGB and Hexadecimal. We also care about a 4th Alpha channel but we do not have any alphas in this texture so we will deal with it later. All colors are derived from 256 values of Red, Green and Blue. They are represented in Photoshop by 0 through 255. White is 255, 255, 255 and black is 0, 0, 0. In this example we see pure Red 255, 0 0:
Create new sprite with button

  1. Now in Unreal it represents each channel with a number from 0 to 1. So if we want to convert from Photoshop style RGB to Unreal we need to divide the value by /255. So the same representation of pure Red in UE4 is 255/255, 0/255, 0/255. This ends up with 1,0,0. So UE4 normalizes each range of each color channel between 0 and 1.
Create new sprite with button

  1. The reason to normalize the value is that we can add and multiply the color and get consistent predictable results. Lets take a look at this. Open up M_OfficeCarpet and right click on the empty graph and add a Constant Vector 3 node.
Create new sprite with button

  1. Lets make this color mid gray. Set the RGB channel to 0.5.
Create new sprite with button

  1. Right click on the Constant Vector 3 node and select Duplicate:
Create new sprite with button

  1. Add an Add node by right clicking on the empty graph. This will add the two vectors together:
Create new sprite with button

  1. Connect the two Constant Vector 3 nodes to the Add node then add a Multiply node that multiplies the two vectors.
Create new sprite with button

  1. Now when we add both vectors we should get 0.5 + 0.5 on each color channel. This should make a white value of 1,1,1. To see this right click on the Add node then press Start Previewing Node.
Create new sprite with button

  1. The color in the preview looks white.
Create new sprite with button

  1. If we multiply the channel we will get a different result. .5 * .5, .5 * .5, .5 * .5 will result in .25, .25, .25 darkening the color:
Create new sprite with button

  1. Flip between viewing the mid gray on its own and then the two added and multiplied. Think about what the add and multiply node are doing.
Create new sprite with button

  1. Now lets look at some colors. If you have pure green (0, 1, 0) and multiply it by the grey you have .5 * 0, .5 * 1, .5 * 0 or 0,.5,0. Preview the multiply node tp see what it looks like:
Create new sprite with button

  1. If we add them we get 0 + .5, 1 + .5, 0 + .5. This gives us .5, 1.5, .5. Be careful not all nodes will handle normalized ranges whena color channel goes above 1. Sometimes clamping the value might be safer for future nodes. Add a clamp node and preview the various nodes to see how the adding and multiplying works.
Create new sprite with button

  1. OK, lets delete these nodes and now look at adding color to the carpet. Lets add a color node and multiply it on the carpet so we can change the color. Right click and type Constant 3 Vector. A shortcut for this is to hold the 3 key and left click in the main area:
Create new sprite with button

  1. Double click on the black square and you will get a color picker. Pick a nice color for the carpet. I picked .537862, .299251, .109385:
Create new sprite with button

  1. Now right click in the main area and select the Multiply node. The shortcut is to hold the M key and left click:
Create new sprite with button

  1. Connect the new color to the B channel of the multiply node:
Create new sprite with button

  1. Connect the top right RGBA node of the Texture Sample to the A channel of the multiply node:
Create new sprite with button

  1. Connect the output of the Multiply node into the Base Color of the main Material node:
Create new sprite with button

  1. Now you can see it replaced the old pin. This now just has the multiply of the two textures which tints the colors. Now we can press the Apply button so that it renders the material and Save to save the material and not lose any work. Now go into the game and run it (you might want to build the lighting if it asks for it). You should now see a colored carpet like so:
Create new sprite with button

Normal Mapping


  1. Open photoshop and load the previous PSD file of the carpet. Select Filter | 3D | Generate Normal Map:
Create new sprite with button

  1. This brings up the normal map editor. You can rotate the sphere and see that it is adding depth to your texture. This map is a cheap way of faking detail in geometry that is not there. The map represents the angle that the light reflects of the surface. So even though it is a flat plane, light is reflecting off of it like there are small pits i the carpet. You can read more about it here. You can mess with the settings to change the effect to your liking but I am sticking with the defaults and pressing OK:
Create new sprite with button

  1. Hit Save As from the File menu and name the file T_OfficeCarpet_N. You see we added a _N at the end to represent normal. Select TGA as file type and press Save:
Create new sprite with button

  1. A Menu comes up with the bit depth and I am not sure what the best setting for a normal map is. I just accept the default:
Create new sprite with button

  1. Press the Import button and import the newly created T_Office_Carpet_N normal map. Double click the newly imported image. You can see that Unreal recognized the file type and applied a different compression optimized for Normal Maps.
Create new sprite with button

  1. Open the M_OfficeCarpet material and lets do some house cleaning. Highlight all the nodes except the main one.
Create new sprite with button

  1. Press the C key to add a comment. Type in Diffuse Color to describe what these nodes are doing:
Create new sprite with button

  1. Right click and add another Texture Sample node (or press the T button and left click).
Create new sprite with button

  1. In the details panel select the Texture and add the newly imported normal map.
Create new sprite with button

  1. Hook up the right hand side and connect it to the Normal Map node. Press the Apply and Save and look at what happens to the material. There is a bit more detail in the texture and it looks like small bumps in the carpet.
Create new sprite with button

  1. Plug the UV output from the Texture Coordinate into the Normal Map. This will mean that the normal and diffuse will line up and tile the same way. Highlight the normal map Texture Sample node and press the C key on your keyboard. Type in the comment Normal Map:
Create new sprite with button

  1. Go to the game and run it. Take a look at the carpet! It is a bit shiny and reflective though. Our final step in this first room is to add Metallic and Roughness then we will move on.
Create new sprite with button



<- Previous   Home    Continue ->