UE4 Intro To Materials - Page 4
- Double click the Material to go back to the editor and right click in the menu and type TextureCoordinate
- 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.
- With the Texture Coordinate node selected change the UV to
.25. You can see on the object that it is scaled even more.
- Press Apply and go to the game to see the new scale:
- 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).
- 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:
- 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:
- Now in Unreal it represents each channel with a number from
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
0/255. This ends up with
1,0,0. So UE4 normalizes each range of each color channel between
- 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.
- Lets make this color mid gray. Set the RGB channel to
- Right click on the Constant Vector 3 node and select Duplicate:
- Add an Add node by right clicking on the empty graph. This will add the two vectors together:
- Connect the two Constant Vector 3 nodes to the Add node then add a Multiply node that multiplies the two vectors.
- 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.
- The color in the preview looks white.
- 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:
- 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.
- 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:
- 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.
- 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:
- 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:
- Now right click in the main area and select the Multiply node. The shortcut is to hold the M key and left click:
- Connect the new color to the B channel of the multiply node:
- Connect the top right RGBA node of the Texture Sample to the A channel of the multiply node:
- Connect the output of the Multiply node into the Base Color of the main Material node:
- 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:
- Open photoshop and load the previous PSD file of the carpet. Select Filter | 3D | Generate Normal Map:
- 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:
- 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:
- 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:
- 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.
- Open the M_OfficeCarpet material and lets do some house cleaning. Highlight all the nodes except the main one.
- Press the C key to add a comment. Type in
Diffuse Color to describe what these nodes are doing:
- Right click and add another Texture Sample node (or press the T button and left click).
- In the details panel select the Texture and add the newly imported normal map.
- 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.
- 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
- 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.
<- Previous Home Continue ->