ArticlesBlog

Intro to Materials: Adding Textures to a Material | 03 | v4.0 Tutorial Series | Unreal Engine

Intro to Materials: Adding Textures to a Material | 03 | v4.0 Tutorial Series | Unreal Engine


♪♪♪ Zak Parrish: Greetings and welcome back. In the last video, we saw how to create a material, how to work with some of the basic properties of a material. We started connecting a few nodes together. Now we are going to push things just a little bit further and we are going to add some textures to our material. I am going to close the Material Editor. If we look in the Content Browser, we see a lot of different materials that come with the Starter Content. I am going to grab one of the more visually interesting ones like the M_BrickWall. Double-click M_BrickWall to open up its Material Editor. At the end of the day, this is a very, very simple material. However, you will see it is using some textures to define the surface. Instead of just using color like we did in the last video, we have a texture that is defining the color of some bricks. We have what is called a Normal map that determines how lumpy the surface is. This gives the surface the impression the grout actually indents into the surface. I am going to hold down the L key, and drag my mouse around. If you take a look, it actually looks like there are some shadows being cast inside those crevices. If you are new to Normal maps, you are suddenly wowed and amazed. If you are familiar with Normal maps, you are probably staring at the screen like “So what?”. Let’s go ahead and start applying some textures to our new material we have been creating. Close the Material Editor. Scroll back down to the bottom of the Materials list and select MyMaterial. Double-click to open it. With Starter Content enabled, we have several textures we can choose from to make our own materials. Let’s go into the Textures folder and scroll around. Under Props, that is just the Materials folder. Go into the Textures folder. Let’s make some wood. Wood is a nice generic material that you may need at some point. We have a few textures to help define wood; we are going to use two (2) of them. We have T_Wood_a_d, which are just some abbreviations for diffuse or like a base color. It is just a naming convention. Then, we have a Normal map that defines wood. Let’s drag both of these into our Material’s graph. You can add textures to a material from the Content Browser by dragging-and-dropping. We have two (2) textures already available. Let’s go ahead and make our Material Editor nice and large again. We are not going to use this color anymore. Select the node and press Delete. Drag off the Texture Sample, and plug the white pin into Base Color. Do that first, and then we will talk about what we just did. Now you can see our sample actually looks like very glossy wood. As I mentioned in the first introductory video, every pixel is broken up into a series of channels: Red, Green, Blue, and Alpha. Those are actually shown on this node. We can use the information from any one of those channels that we like. In this case, we are using the result of all the channels. This is Red, Green, and Blue all combined together. Alpha is left separate in case you want to do something with the information later. The white pin at the top is the combination of the Red, Green, and Blue channels to give you a final mixed result. If we wanted to, we could just plug the result of the Red channel in here. What we get is a grayscale texture that is literally showing us how much red information is on this texture. An easy way to visualize this is within the Texture Editor. With this Texture Sample node created, I am going to come over to the Details panel in the Material Editor and double-click on the materials swatch. This opens up the Texture Editor inside of UE4. I can scroll the mouse wheel back so we can see the entire texture. While I am not really all that interested in going through all of the nuances of how to edit a texture because that is kind of outside the scope of this video, I do want to point something out. If you go in the View menu inside the viewport, you will notice you can see each one of these color channels. You can turn them off if you want to. If we turn on Alpha and we turn off the rest of them, here is what the Alpha channel looks like. It is basically a white texture with black where all the wood grain exists. Then, we can turn on the other channels one by one to see what they look like. Here is what the Red channel looks like. That is all the red information you have. If you are wondering why it is gray and not red, it is just a grayscale value where 0 equals no red information and 0 is equal to black. A value of 1.0 or white, would be full red information. You are using all of the red information you can possibly stuff into a single pixel. This texture has a fair amount of red. Click the Green channel. It is a little bit darker. There is not as much green information as red. Finally, select the Blue channel. Blue is the darkest of all, so there is not a lot of blue information either. There is a little bit of all of them to give you the final wood color. Close the Texture Editor and go back over to the Material Editor. Let’s take our final RGB result, and plug that into Base Color. There you go. Now we have the result of a very, very shiny wood. The next value we are interested in is Metallic. Is wood made of metal? You should have answered no. If you didn’t, well then you have a great imagination. We will just move on from there. We have a Metallic value of 0. For Roughness, we can start doing some interesting things, but we are going to save that. I will come back to what we are going to do with Roughness in just a moment. For now, let’s get Normal hooked up. Drag off the RGB value of the Normal map and plug that into Normal. A Normal map gives the illusion of lumps and bumps in a surface by simulating the actual pixels changing the angle they are facing. It is kind of like rotating pixels around. You can already see the result right here. It looks like we have very shiny wood, but you actually get indentations at the location at all of the wood grain, which is very cool and fun to look at. I am going to slide the Material Editor kind of out of the way, but I still want to be able to see the Apply button. Click the Apply button. Take a look in the view. It is going to take just a moment to process. As soon as it is done, now you can see we have a very pretty wooden surface that is all nice and shiny. You can see the indentation of all the wood grain. Now, let’s do something a little bit more interesting. We are going to control that Roughness. Let’s just assume this is just too shiny. We don’t want our wood to look like we have just lacquered it for weeks on end. We could just take the Roughness value that is plugged in here and set it to something higher like 0.5. Once that processes and we take a look, you see that muted things significantly. What if we want more control? What if we want for the wood grain indentations to have one Roughness value, and everything else have a different value? Earlier when I was showing you the wood in the Texture Editor, you might remember we took a look at the Alpha channel. Within the Alpha channel, you saw we basically have a black and white image where white represents the main surface of the wood, and black represents the location of the wood grain. We can use this as a way to create different Roughness values for black areas and white areas on this image. We are going to do that with a Linear Interpolate node. Linear interpolation is a fun thing to try to teach; it is actually very easy to understand. I am going to hook it up first, and then I will show you how it works. We will graph it out on the chalkboard. For now I want you to do is take the Alpha output, which is the pin on the bottom of the wood Texture Sample, and drag the wire into space. This is another way to create nodes that we haven’t explored yet. If you drag a wire out freely and then let go, you get the same thing as when you right-click the mouse. What I want is a Linear Interpolate node. You can start typing “linear” and you should see it listed. Also, I believe you can just type “lerp” and you should see it as well because lerp is actually the programmer’s term for a Linear Interpolate node. You should also be able to hold down the L key on your keyboard and click, and that will make a Linear Interpolate node as well. A lerp is a very common thing to use when you are creating materials. The trick here is to determine what Roughness values we want in each location. Just as one quick reminder, we will look at the Texture Editor and then move away. Select the Alpha channel. We have black for the wood grain and white for everything else. Remember that. A is going to be equal to black. B is going to be equal to white. That is how a Linear Interpolate works. It is going to take a value between 0 and 1, where 0 is black and 1 is white, and it is going to blend between whatever is plugged into A and B. We don’t have to plug anything in though. We can just select the Linear Interpolate node and change the values of those numbers in the Details panel. Let’s say the wood grain has a fairly high Roughness value like 0.7. Let’s go all the way to 0.8. I don’t know what it is going to look like yet, so I am just guessing. The rest of the surface will be driven by the white color and will have a much lower Roughness value. Let’s say something like 0.3. Then, we will take the Alpha channel from our Texture and plug that into the Alpha, which will in turn drive the Linear Interpolate. We will take the result of the Linear Interpolate node and plug that into Roughness. Notice how that replaces that wire. Also, you can remove wires at will by pressing Alt and clicking on any of the pins. Hold the Alt key and click on either connection and that cuts the wire out. I wanted to make you aware of that. Now if you take a look, our reflection has a little bit more character. We are not getting anywhere as much shininess down inside the wood grain. The shininess is only on the outermost surface of the wood, very much like if you were to polish it. When you are buffing wood with a rag, you can’t really get into all those little nooks and crannies. You end up with a much more realistic result. At this point, we have nodes that we don’t need. You could just select these nodes and delete them. One nice thing about the Material Editor is it will help you with that. If you click the Clean Up button in the toolbar, that is going to remove any nodes that are not connected anywhere into your network. Let’s slide the Material Editor out of the way. Click the Apply button. You can see the result here. One last thing I want to do is talk a little bit about texture tiling and adjusting the texture coordinates along a surface. If you take a look at these two (2) Texture Sample nodes that were created when we dragged our textures into our Material graph, they each have a UVs input. Without getting too technical in the world of 3D modeling, UVs are texture coordinates that exist along the surface of a 3D model. If you are unfamiliar with what they are then for the sake of this video, it would probably be best to do a little bit of research into UVs and how they are created for a 3D surface. In the case of the Material Editor, UVs are how we can adjust coordinates of a texture to cause it to tile more often. We do that with a special node called a Texture Coordinate node. We can create that by right-clicking and typing, “Texture Coordinate”. You will see it start to appear as you type enough. You can also drag a wire backwards off the Texture Sample, and type the same thing, and it will automatically be connected. If you select a texture coordinate (TexCoord), in the Details panel it will say UTiling and VTiling. I am going to set both UTiling and VTiling to 2.0. We should have twice as much of the texture. I am also going to plug the exact same node into my Normal map. That means both of these textures will tile accordingly. They will both tile the same way so that they are still nicely aligned. Let’s increase the UTiling to 3.0, and the VTiling to 3.0. I am going to slide the Material Editor out of the way. Watch what happens in the main view when I click Apply. We get a much tighter wood grain that actually looks pretty realistic, depending on the type of surface you coated it with to make it nice and shiny. With that, we have augmented our material to actually use some texture information. We have added a Normal map. We have a Linear Interpolate node to create a custom Roughness value. I did say I would explain how a Linear Interpolate works and I don’t want to go back on my word on that. Let’s jump back over to my chalkboard for just a minute and let’s talk about this. A Linear Interpolate works kind of like this. It is convenient I already have graph paper that I am working on. We have value A and value B. Those correspond to the two (2) inputs on the Linear Interpolate node. Then we have Alpha, which goes from 0 to 1. As the name suggests, the relationship is just a linear one along this graph. I can make a line just like this. If Alpha is 0, you are actually looking at whatever the result of A is. To kind of drive this home if you are using a texture, 0 is the same as black, and 1 is the same as white. At a value of 1, you are seeing the result of B. At a value of 0.5, which would be gray, you would see something that was 50% of both results. If A was red and B was blue, then a value of 0.5 would give you something kind of like purple. That is how Linear Interpolate works. I just wanted to mention that because I promised that I would. That is going to wrap things up for this video. In the next video, we are going to go a little bit crazy with our material and do some fun things to it, showing off a few more of the material properties. Thank you very much.
♪♪♪ ♪♪♪ ♪♪♪

Comments (77)

  1. Dat "gray" color on the chalkboard lol.

  2. haha if your are familiar with normal maps you are staring at the screen and like so what, hehe u are the best man

  3. Is wood made of metal? Oh, oh it is, huh? Alright, alright… moving on…

    You really made me laugh there.

    Thanks a lot for these – I'm incredibly excited for UE4 and will start using it shortly, I'm sure!

  4. no parralax mapping why?

  5. I haven't watched it yet but I'm excited to see textures being placed on objects in the Unreal Engine 4:)

  6. Nice wood texture. I am very excited to see how far you go with textures.

  7. Does anyone know what the name of the program is where he draws all these concept things on?

  8. Love Zach he's an awesome teacher

  9. any tutorials for displacement?. thanks for this 🙂

  10. Why did you change from 0-255 to 0-1?  Did you not see the need for 256 levels?

  11. This is so useful for me since I have been using 3ds max as my primary software for years and I am very unfamiliar with physically based shading. This part just hits the right spot and after watching this, I understand much better and get deeper into UE4.

  12. Does anybody know when you have your materialEditorWindow open and you  goto your Texture folder (to pick texture)  it closes my MaterialEdiorWindow. Its doest stay open. This way I cant dragg in a texture.

  13. Thanks for doing these! They're a big help.

  14. So is the Alpha channel sort of like a separate channel that stores colour bias (red to blue – colour temperature) and power law (gamma)? I'm sorry if this is completely not what it is, it looks very similar to me. Can someone clarify to me what exactly the Alpha channel stores and if I was close.

  15. Thanks you !!! 🙂

  16. the alpha channel wouldn't be supposed to be full white in this case? 

  17. Can we get a parallax mapping, displacement tutorial

  18. Thanks for taking the time to make the graph at the end. I was struggling with understanding how the linear interpolate achieved making the grain rougher, but you cleared it up for me with the graph.

  19. hmm… my wood texture alpha is not the same as in this video. May be it's bug.

  20. These tutorials are so incredibly helpful and well produced, can't thank you enough!  Cheers from a fellow Carolinian!

  21. Hey can someone help me out with the multiply node? When i look at the materials in the starter map i see alot of use with the multiply node, especially in the macro texture variation part of the materials. it goes a little like this… they'll use a textcoord-multiply-sampletext- then a add node followed by another multiply to what im understanding from it, to blen the two texture to break up the tiling effect in the texture. but im not really understanding how its working really…. is the first multiply node to dictate how much of the black (cause its plugged into constant A) there gonna use out of that texture? Example: both of the same textures plugged into multiply nodes with different values in each of the a channels to get different black levels, followed by a add node, then use another multiply, to combine those same textures black values into one to break up tiling? please help

  22. These tutorials are the best, this engine is the best, Epic Games is the best!

  23. I still don't understand. why color is grey when turn red channel on and turn green, blue channel off.

  24. linear interpolate very poorly covered. still confused as fuck.

  25. Any good tutorials for generating a normal map?

  26. These shaders shit on unity so hard.

  27. excellent teacher

  28. Best UE4 tutorial on the web!

  29. How do you reduce the bump of the normal map? That wasn't covered in this video. Thanks!

  30. from where do you get those textures
    ?

  31. Great tutorials with great explanation on every thing you do and what each one you do on what it is 🙂 you .. are gonna save me a lot lot of time friend

  32. The narrator has a great sense of humor, these tutorials are really lively and make me look forward to using the engine, instead of making me fall asleep like some people do.  I want to say THANKS, from all of us, the amount of manhours your effort has saved all of the viewers is incredible.   Great job, I will recommend UE to all my friends that are into this kinda thing.                                             It is always visible when a man does something from their heart 😉

  33. I can't find the particular textures that he chooses for the example. I figured that it wouldn't matter as long as I got something similar, but none of the other textures are delivering the same result. Does anyone know where to find the textures he uses?

  34. Who knows the graph paper software he was using near the end of the video?

  35. I love your tutorials, so clear!

  36. Q: Can some explain what I'm seeing at minute 4:30 – where the alpha channel of the wood png 'highlights' the crevices of the wood.

    Why does this wood png have alpha values? I would have thought the alpha channel would of the wood would be all 1's. completely black, aka not transparent anywhere. The way it is highlighting the crevices makes me think the png is semi-transparent, mostly see-through where there is not a crevice and more solid along wood-cracks. Clearly it doesn't work like that tho…

    Has the artist who packed additional information in the alpha channel knowing it will not be used by the "Base Color" — maybe the alpha channel alone will be used as a height map or something in a different texture field?

    TY

  37. Best narrator ever. cool work. is impresive how is fun to watch these videos just for his witty coments. Congratulations.

  38. Just what I needed thanks 🙂

  39. First of all thanks for the tutorial! This guy is awesome!! Does somebody know if I can change the scale on the preview sphere with out changing anything on the materials?

  40. If this guy were teaching at my university, I don't think I would think twice about the university fees in the UK xD

  41. I have some serious problems trying to match the results that you achieve in your version of the editor to what I see in my version.

    In fact, I will go as far as to say that very few changes to the various settings that control what I should see, have any affect on what I actually see.

    I am including (if I can, but maybe not) screenshots of both what your video shows and what is shown on my screen, and an image of the version dialog from my 'Help' menu.

    My UE4 view..:
    http://i216.photobucket.com/albums/cc88/GrumpyBum_photos/MyMaterial_30_08_2016_zps0c7xuqqm.png

    Your UE4 view (a capture of your video [I hope you don't mind]):
    http://i216.photobucket.com/albums/cc88/GrumpyBum_photos/YourMaterial_30_08_2016_zpscoxccglu.png

    My UE4 version:
    http://i216.photobucket.com/albums/cc88/GrumpyBum_photos/Unreal%20Version_zpswfpqv0fp.png

    I hope you can throw some on light on this. I have just started using the Unreal Engine on a trial basis, and so far it has been a dream to install and get up and running. But I am extremely concerned about the differences that I am seeing in the versions of the engines! i.e. As above, the materials don't seem to render with anywhere near the quality of the previous engines.

    I have noticed a very marked difference in the alpha channel of the images supplied with the downloaded version of the editor, and the images presented in the tutorial videos of the same media supplied.

    i.e. the tutorial on materials uses a wood material that looks like the 'Pine' material, but seems to be a fore-runner of that. And the Alpha channel of 'that' material is very different to what is presented within the 'current' editor when the 'Pine' material is used, and hence may very well be the reason for the difference in the look of the texture.

    I would appreciate some feedback on this.

    Bumbles..

  42. Addendum: I discovered why I had the problems I mentioned in my previous comment.

    It turns out that the version of the Epic Editor that I'm using has an extra button on the toolbar that you need to press so that the sample you see if automatically updated each time you make a change. I expected my version to act in the same way as in the tutorials, but it doesn't. Therefore, I was not seeing the ongoing changes I was making to my material.

    These are really well made tutes. Well thought out (except maybe for the few bits of adhoc lol). But very well made, spoken, funny, entertaining, and most importantly informative, and I thank you for them.

  43. It would be better to remember, if B was Black, and A was White

  44. Why are the closed captions in this video Korean when the ones before it are in English?

  45. Wow this technology is awesome and so user friendly. We are heading for a very entertaining future.

  46. One thing I don't get:

    I'm thinking of it like in Photoshop the alpha channel designates whether its see thru and the mask is black/white to designate see through and non-see through areas…

    Why does the texture have a black to white (grayish) alpha channel for something that is completely opaque?

  47. I'm confused. Why doesn't the wood have a plain 'white' alpha channel? Doesn't alpha define transparency?

  48. I am a self taught coder,,, and this visual kinda makes it difficult to read what the language is saying, however it seems to be more efficient, once you get the hang of it. Good videos by the way.

  49. thank you so much for this tutorial, the tiling really helped me.

  50. This tutorial is great! It would be nice though if things were named more consistently for things like the lerp. I get confused so easily that it doesn't help.

  51. Isn't alpha transparency?

  52. Haha is wood metallic that part was funny also unity is very very bad

  53. umm sir can i use the restroom

  54. This is so much harder than Unity. It looks much better, though.

  55. Wood is made from metal?
    I'm suing every teacher I ever had for making me think wood was made out of wood or cellulose

  56. I think these tutorials is very good,because I can understand it easier…

  57. these tutorials are fantastic, thanks man! quick question, what is that chalk board software you use? that's pretty neat.

  58. seems like when i untick the colors to look for the alpha, the texture does not have any black lines to show depth, anyone know why is that? :/

  59. Wow the lero graph explanation was great, this is how math should be combined with programming and color

  60. im following all of this thank you so much, just wondering how did you get those objects? the objects where you imported the materials to? it says "Unreal Engine" on those objects

  61. 한국어 이득!

  62. Your sense of humour is so great..

  63. Helpful but Americans spell grey with an a?

  64. wow, i learned more in this tutorial than in Udemy.
    In Udemy is more talk and they extend too much the courses. hahaha

  65. Helpfully simple, but deep enough too. Thanks. And thanks for not explaining UVWs.

  66. only 1k likes.
    what the holy hell X_x.
    Thanks Buzz,Thanks Zack. 3dGoodTimes.

  67. U teach really well…thanks alot!!!👍

  68. Please keep doing tutorials for Unreal, they are great!

  69. Zak superb man..Explained everything in detailed..Also if anyhone wants to bring reflection to water.use specular easy!!

  70. He explained rgb in detail superb !!!

  71. The more I study, the more amazing I feel.

  72. 🐻🐸🐯🐶🐜🐪🐉🌻🌲☀🚁🚖💈🗿

  73. Thank you so much for making these videos!

  74. Very Educational Thank you so much!

  75. These tutorials are fantastic. Thank you.

  76. pls for me question ! did u can cloading texture in outside into ue4 ?

Comment here