Chapter 9. Materials

This chapter will explain the basics of creating a material. We'll build some basic (but extremely useful) materials from scratch, and in the process learn how the material editor works.

In this chapter we shall be looking at the following topics:

• Creating a new material

• Adding textures to a material

• Creating a shiny metal surface

• Adding a normal map

• Seeing your material in the world

• Giving a perfect texture to your material

• Color specular highlight

• Adding a tint to the diffuse color

• Making your material easy to read

So let's begin...

What is a material?

A material, in essence, is a small computer program that describes how a surface looks. There's a lot we can do with our surfaces. Look around you; the world isn't just covered with flat paint.

Effects are easy to achieve with the Unreal material system, for instance, here's the material for a metal barrel. You can see in the preview on the left that it has a base color, shiny highlights, and ridges and bumps that bring out details in the surface. The node network in the middle is what describes how the surface looks, and that's what you're going to learn to build.

Time for action – creating a new material

Before you create a new material you'll need a place to test it.

1. Create a new level that's a simple BSP room with a light in it, build lighting, and save it as DM-MaterialTest.udk.

2. Open the generic browser, right-click in the blank gray space of the browser window to the right, and select New Material. Name your new material BasicMaterial and fill in a package name (either create a new package or fill in an existing one). Hit OK.

   

3. The material editor opens up. We haven't hooked up any nodes yet, so our material preview on the left is black. Let's fix that.

   

What just happened?

So, we have everything set up to create our first material. Let's start by finding a texture and applying that texture to our material.

Time for action – adding textures to a material

Practically every material you see in UDK gets its look from texture maps. Let's add one now.

1. Leave your Material Editor window open and switch to the generic browser.

2. Find the package labeled HU_Deco, right-click, and fully load it. Look for a texture labeled M_HU_Deco_SM_Vent. Look for it alphabetically, or you can filter by type to make your job easier.

   

3. Select the texture and switch back to your material editor. What we want to do is create a node representing the texture. In the Material Expressions list on the right, scroll down until you see Texture Sample. Select it, then click-drag it into the gray viewport to the left, and a Texture Sample node should appear. If the node turns out black, you may not have had the texture selected in the generic browser. Delete it and try again.

   

4. Now let's hook the texture node up so that it shows up on the surface. The black dot at the top-left of the texture node is the output. If you click-and-drag on...

Time for action – creating a shiny metal surface

This texture is supposed to represent a metal surface, so let's make the material shiny. There are a couple ways to do it, but let's use this opportunity to learn about a new node type—a Constant.

1. Find the word Constant in the Material Expressions list, and drag it into the editor viewport.

   

2. Connect the new Constant node to the Specular rendering terminology for shininess input on the left.

   

3. It didn't seem to have any effect. Right now, the constant has a value of 0, which means no specularity. Select the constant, and then at the bottom of the window, in the properties window, you'll see it has an R value of 0.000000. Change it to 2.000000:

   

4. Rotate the Preview cube around and you'll see that now it's much shinier.

   

What just happened?

So, as you can see, we have applied Specular map to our material, which will give the texture a glossy finish, but as you can see in the previous image, it still doesn't look great. So what can we do to improve the quality...

Time for action – adding a normal map

Right now, lighting affects the surface as if it were completely flat. We can add a normal map to make the material appear to have depth. You've probably noticed that for almost every diffuse texture, there's a pale blue texture with similar sorts of details. Those are normal maps.

1. Go back to the generic browser and search for T_HU_Deco_SM_Vent_N.

   

2. Select it, go back to your Material Editor, and drag another Texture Sample node into the editor. Hook it up to the Normal input of the box on the left.

   

3. Now there's a lot more depth to the lighting and reflections.

   

4. Your node network should now look as shown in the following screenshot:

   

What just happened?

So, we have now added a normal map to our material, and as you can see from the images, it stands out a lot more than without the normal map. So what does it look like when we import it into our world; why not have a look. Let's now go ahead and apply the material to our map, and see what the results are.

Time for action – seeing your material in the world

1. You'll see that the material's thumbnail in the generic browser has updated.

   

2. You can apply it to a surface in the world—you can see here that the floor is reflecting the light in the middle of the room.

   

What just happened?

As you can see from the image above, this is what the material will look like when imported into our level, but it still doesn't look like metal; so how can we improve this? Let's go ahead and add some more maps to create the perfect material.

Time for action – giving a perfect texture to your material

1. So, as you can see from the image above, the material really doesn't look like metal. It's too bright for one thing, but it's also too uniformly shiny. The diffuse texture has lots of darker rusty areas that shouldn't be as shiny. You can hook the diffuse texture sample directly into the Specular input, and the color of the texture will control the specularity. Do that now.

   

   The highlight definitely looks better, but now it's probably too subtle. Let's look at how to brighten it up.

   We can multiply the colors in the texture by a larger value so that they appear brighter.

2. Find a Multiply node in the Material Expressions list and drag it into the window.

   

   The Material node (as you'd expect) multiplies two numbers together (the inputs A and B) and outputs the result on the left. What do we want for inputs? How about our texture, and that constant with a value of 2 that we created earlier?

3. Connect up your network as follows. You may have to...

Time for action – color specular highlight

Often times, reflections in metal take on a slightly bluish tone. So let's look at a new node type—a Constant3Vector, which is essentially a node that allows us to specify a color.

1. Click-and-drag a Constant3Vector into the Material Editor window. While a Constant has only one value that we can edit, a Constant3Vector has three values, R, G, and B (for red, green, and blue). By combining R, G, and B, we can make any color that your monitor can display.

   

2. Here you will see a box with R, G, B, and Desc options, and numbers opposite each option:

   

3. Type in a value of 1 for R; this will make the output of our node pure red. You can click the little black box at the top of the node to get a real-time. preview; notice the box turns yellow when the real-time preview is turned on.

   

4. Alright, let's hook this up to our specularity. We currently have a Constant multiplied against our texture. Let's replace it with this Constant3Vector.

   

5. Ok, the highlight is definitely red...

Time for action – adding a tint to the diffuse color

Let's go through one more exercise, just to make sure you've got the basics. I won't walk you through it this time, but let's add a tint to the diffuse color.

1. Create a new Multiply node and a Constant3Vector node, and hook them up just like you did for the Specular color. Pick a nice rusty orange color for the tint (1, 2). You should end up with something that looks like the following screenshot:

   

What just happened?

So, as you can see from the image above, we have added an orange tint diffuse color to our material, which is the finishing touch and now our material is ready to be used in our environment. The final section is to make our material easier to read in the Material Editor. So let's go ahead and polish things up.

Time for action – making your material easy to read

Almost over, but we've got one very important topic to cover—clean-up and commenting. You may be able to read your material just fine now, but when you come back in a week, or a month, an organized material with some useful comments will be a lot easier to understand.

1. The first step is good organization. As we've seen, data in the Material Editor flows right to left (the inputs of our nodes are on the right, and the spit out data to the left). Take some time now and organize your nodes so that there's no backtracking (the Texture and Constant nodes should be on the right, and the Multiply nodes should be to their left). Also organize things to minimize crisscrossing lines—the nodes controlling Diffuse should go on top, with the ones controlling Specular below. Try to get a network that looks like the following screenshot:

   

2. The next thing we can do to organize our network is label the nodes. For instance, what if you decided at some point that...

Summary

We learned a lot in this chapter. Specifically, we covered the following:

• How to create a material

• How to add textures to our material

• How to create a shiny metal surface

• How to add normal mapping

• Seeing our material in our world

• How to use the perfect texture for our material

• How to create color specular highlights

• How to add a tint to our diffuse

• Making the material easy to read

So we have learnt how the Material Editor works, and how to create a material from scratch.