Friday, April 11, 2014

Experiments with Textures - Part II

Well this is a continuation of my last post. By the end of my last post, I had managed to bake a normal map, a height map and an A.O. map. I intend to use that normal map in UDK's material editor. As for the A.O. map, UDK already has it's own ambient occlusion scene going on. So I decided to take my A.O. map and merge it with my original diffuse map in GIMP. Currently I'm using DirectX 9 to render the game, and so that means I do not have access to the Tessellation features in DirectX 11 version. I'm doing this for two reasons. One is that seams in UV mesh tend to tear up the mesh when Tessellation is enabled. The second is the performance drop it would cause for the small increase in the detail of my meshes. A height map will also have to be added thus increasing the memory footprint. I might enable Tessellation later on for Landscape objects and objects like rocks which actually benefit a lot from displacement maps and Tessellation. In that case I could probably hide the area where UV seams occur so that mesh tearing isn't evident to the player. Anyways for my current situation, I decided to merge my height map with my diffuse texture as well. All this can be done pretty easily using GIMP. Below I've shown a detailed description with screenshots of how to set this up in GIMP. So this post is basically like a tutorial for people who are starting out with GIMP and game development. First open up the diffuse texture in GIMP. You'll get a screen like what's shown below. Nothing fancy, just the image that you've opened. 

Now similarly open up the Height map as well as the A.O. map in GIMP as well. So basically there'll be three windows: one for diffuse, one for height map and one for A.O. map. What we need to do is to have all this in the same scene. But directly copying it into another will just put the second image on top of the first. So first go to the diffuse map window, in the menu bar, go to Windows menu and click on new ToolBox. So now you can see a basic Toolbox with all the different types of tools you can use in GIMP. Press M to select the Move tool.

Now we need to add layers. Layers enable different textures to be merged together based on a set of factors like opacity and blend types. This way you can add more textures on top of the diffuse without losing it's detail. For that, a layers toolbar has to be added. This can be done by again going to the Windows menu >> Dockable Dialogues >> Layers. Simple Ctrl + L would suffice, but if you're a beginner like me, it helps to know where to find all the toolbars.

The layers toolbar can be added to the main toolbox in order to keep it clean while working with multiple windows. Just click on the layers tab in the toolbox like you would for a tab in google chrome, then move it into the the main toolbox. 

Once that's done, we need to add a new layer so that the other images can be added on top of the diffuse. Currently there'll be one default layer in the toolbox, which you can rename by right clicking on layer and clicking on 'Edit Layer Attributes'. Now onto adding a new layer. Click on the extreme left button at the bottom of the layer toolbar.

A pop-up window will appear. Give some name to the new layer and ensure that the resolution matches the resolution of the original image. Now go to the A.O. map window, press Ctrl + A to select the image and Ctrl + C to copy. Go back to the diffuse window, click on the second layer in the layer toolbar. Then click on the image and Ctrl + V to paste. As soon as you do this, a new floating layer gets added on the layer toolbar as well as a new image on top of the existing image. Now in order to merge these two images, right click on the floating layer in the layers toolbar, and click on Anchor Layer. It gets anchored to the new layer that you just added before. 

Now as you can notice, the original image is lost behind this current image. This is because the layer mode is set to normal. This can be seen in the mode option under the layers toolbar. Change it to Overlay or Multiply and you have that problem solved. Also try changing the opacity to see what fits your description. In my case, I set the mode to Multiply and an Opacity of 60.00 %.

Do the same process for you height map. Try playing around with the different layer modes as well as the opacity settings until you get the desired look. Make sure the original diffuse image doesn't lose too much color, as that is the texture we intend to use in UDK. For height map, I set the layer mode to Overlay and an opacity of 40.00 %. 

So basically that's all you have to do inside GIMP. We need the normal map inside UDK, so no point in adding it here anyways. Just to show the difference between the original diffuse texture and the one we get after adding the A.O. and height maps, I will post the images below. You can see that the texture starts to develop more features as the other two are added to it.

Original Diffuse Texture

Diffuse + A.O.

Diffuse + A.O. + Height Map

From the last image, it can be seen that the various features ranging from the small slopes along the bricks to the gaps in-between them are more visible now. After checking in UDK, I then reduced all the images from 2048x2048 to 1024x1024 as it hardly made any difference in-game. But the memory footprint can be reduced by a pretty good amount by doing so. Also you need to make sure that the textures are in power of 2 resolution before importing it into UDK. UDK also doesn't accept all image types, so I use PNG format for all my textures. Now that we have a game-ready texture available, it can be added to the UDK for use in the game. I'll have that in a different post. Lots of images to load in a single page already. So goodbye till then.

Thursday, April 10, 2014

Experiments with Textures - Part I

As mentioned in my previous post, the development on my game is going through an almost complete overhaul. Everything from textures to models are getting changed or optimized. However the level layout remains pretty much the same for now. Moreover I've taken a liking to the 3rd person view, so I'll most probably end up using that as the default view in the game. I feel that it kind of gives a better sense of the scale of the level. I may add an optional 1st person view later on.

Anyways my initial search for a new texture for the walls from some of the popular free texture sites ended up in vain, as I didn't get anything satisfactory. But somehow after almost a day of searching, I ended up in deviant art. And there I found the perfect texture in the gallery of the user AGF81. It was a seamless texture and had a pretty good variation in the size of bricks. Plus it came in a power of two resolution, which means I didn't have to do any cropping or resizing in order to import it into UDK. Also AGF81 was kind enough to let everyone use his textures for their personal uses. A thousand thanks to him. You can find his page in the link given below. He has lots of good textures in his gallery.

So basically this is the texture that I've selected for the walls. The color doesn't match the one I want, but I've already managed to change it in UDK's Material Editor. So that's not a problem.

Stone Texture from DeviantArt

The texture is pretty good by itself, it has some good details that can be extracted into normal and height maps. But as I realized during my previous iterations, when you directly apply it to a static mesh in UDK, it will look like some poster that is stuck on top of some rock rather than actual bricks. I didn't want to make the same mistake again. So I thought about ways to make it more realistic, and then the idea struck me. I could get the normal and height map from it using CrazyBump and rather than directly using it in UDK, I could first use it on a plane mesh in Blender. I could then amplify the details on the plane using the displacement modifier. Of course the mesh had to be a very high-poly in order to get the fine details right. I could then bake the details onto a low-poly version of the mesh using xNormal. Below are the original normal and height maps that I made using CrazyBump.

Original Normal Map

Original Height Map
Using them on the high poly plane mesh in Blender, and then baking the textures into the low poly version using xNromal, I was able to generate my new normal map, height map and ambient occlusion map.

Enhanced Normal Map

Enhanced Height Map

Enhanced A.O. map

I tested out these new textures on a plane mesh in Blender to see the rendered results before proceeding any further. Both using the default Blender Render as well as the Cycles Render. 

Blender Render 

Cycles Render (Used A.O. map and controller specular effects, hence less concentrated reflection)

I was pretty satisfied with the results. But just out of curiosity, I applied the same process once more to see if it would provide better results.

Another pass in Blender Render

There seems to be a noticeable increase in depth, but it kind of became overkill. There were just too many unnecessarily amplified distortions. So I just decided to stick with previous version. It had the right amount of beauty. This one seemed like it had an obvious layer of additional make-up. So basically I got my normal map, height map and A.O. map ready for use in the game. I made some changes to the original diffuse texture as well, but I'll give a detailed description about that in the next post. This post has already become a bit lengthy. Alright so that's it for now. Goodbye.