Stone Textures For Terrain Materials, From Scratch -Part I

This is a start to finish affair so its a bit long, so I'll just jump into it.

If you want to see what our little stone will look like in-game, I've placed some screen shots of it These are screen shots of the diffuse and detail maps only; this is because this part
of the instructional only covers the detail and diffuse channels -looks rather nice just those two together. The normal and height maps will give it some depth and dimension.
If you're new to Photoshop, don't panic -you're going to learn many things about how the program works and how to navigate through it quickly and efficiently. This instructional is very detailed. There are several images to help explain the techniques that I'm going to lay out below. If you have a slow connection, my apologies but they help clarify things greatly. They're jpg's so they should load fairly quickly.

What I'm going to cover in this part:

1. The creation of the Diffuse, Detail, Normal and Height maps for a stone material entirely in photoshop.

2. Understanding Layer Blending Modes.

3. Working with Layer Styles.

4. Utilizing the Histogram.

5. Creating and manipulating an alpha channel.

6. Organization of Layers via Grouping and Sub-grouping.

7. Working with the Levels dialog.

8. Working with the Curves dialog.

9. Working with the Hue and Saturation dialog.

10. Using nVidia's Normal map plug-in.

11. Using nVidia's DDS plug-in.



What you need to know:
Nothing.

What you need to have:
Adobe Photoshop CS 6. Any version will do, but the lighting model in CS6 is much different than in prior versions. I give some suggested settings for the older and newer lighting models. In the newer version, Photoshop can create an .obj file, pop it off to a new layer even.

nVidia DDS plug-in. Get it (and the one below) in their Photoshop package.

nVidia normal map filter -free and available at their website. Some say this plug-in sucks,

but I disagree. Typing in numbers rather than using sliders is, admittedly, a bit of a drag but I do have absolute control over every parameter of light and shadow in Photoshop. I simply adjust a duplicate of the image itself to enhance the features of the stone for normal map that I want accented and spin it through the nVidia filter -no fuss no muss, just an enhanced normal that has massive or intricate features -my choice. If you dink around with the normal map filter, you'll find there is tremendous power under that innocuous interface and irritating lack of meaningful sliders.
The point of all this is to encourage you to use what you have available to you as best you can and wield it to its maximum potential. �Know Thy Tools.� Constraint can oftentimes give an artist more freedom for creativity: someone who is able to create great art from very little is more impressive to me than one who has all the �right programs� and uses the automated features to produce a slick-looking pile. Art is from the heart. There is no almighty DO MY JOB button no matter what tool you use. In other words, I think it's best if we do our best with what we've got.

I've separated the construction of the maps into separate parts. Each is a highly detailed description of a process that goes into the creation of a stone texture and related maps from a blank canvas. I've decided to go the extra mile and try to create an instructional that is detailed, meaningful, and most importantly, something you can actually use in your game by the end of the series; yes, it will be game ready by the time we're through.
I'm doing this stone the Wilde Way so this instructional may appear fairly intricate but I assure you
that all these steps should only take about 2 to 15 minutes, to do once you become proficient with them. This
depends, of course, on how intricate you need the stone to be. If a player can't see it close up, don't waste your time on it is my thought. Bottom line though: If you wish to produce quality, then you have no recourse other than taking the time to do it right. Something to think about. So, without further ado, let's begin.


1. Creating the Stone.

In brief we are going to create two noise layers, using clouds filters, and an alpha channel that is also filled with a second cloud noise. Using lighting and other channels we'll create some depth to the noise and then we'll have some layers and an alpha to create a stone texture from scratch. Just so you know, most people's tutorials will stop at step 12 and call it good (if you can find one about it at all). The extra steps will take about 5 min. or so longer at the very most, but taking the time is worth it -you're
using keyboard shortcuts so you're saving lots of time anyway, right? This enhanced method gives you more control and flexibility and delivers the power to generate several different texture variations in a snap. If you find that you do a great deal of painting stones and other textures from scratch, you may want to look into mapZone by Allegorithmic, it's one amazing program -and FREE. I prefer photos for source as they look more natural to me but mapZone delivers in spades.

And now the steps:

1. Ctrl+N and name the new document something creative and descriptive like stone 01.
Make the document size 1024x1024x1024, background:transparent.



2. Alt+T and select render>clouds.


3. Alt+T and select noise>add noise. Set the amount to 2.6 or so and choose Gaussian and
monochromatic. OPTIONAL. For this exercise, please do not do this step.
4. Select Channels Tab.
5. Create New Channel. This step creates an alpha channel.


6. Alt+T and select render>difference clouds.
7. Ctrl+F repeats the last filter used.
8. i.e. Hold Ctrl and press F repeatedly until the image is evenly balanced: no blobs or areas of significant light or dark patches, something that will tile well in other words. Something like the image below:


9. Switch to Layers Tab.
10.Alt+T and select render>Lighting Effects. Set the following in the Lighting Effects
dialog:

Photoshop CS6

select Dual ParallelUnder the Presets menu. It will be a strange color.
Change the offending color Use the image below as a guide. Better yet, change the colors to something useful to you, say, something to match the color scheme of your game for instance.
I say �approximate� because each different noise used will require different light and slider settings. Use your sliders to adjust them until you're happy with the results.


Change the Texture: setting to none (if it isn't already) and then change it to green. This resets the Texture Channel and then allows you to choose a different one, such as green. Photoshop recalls the last settings used, including the Texture Channel, so this is a way to �clear� that setting.
Note the yellow highlight, if something goes wrong, click that and a drop-down will give you some options, choose reset workspace.

Photoshop Legacy Versions My machine that has a legacy version is borked atm, sorry for the lack of images for you. Play with the settings and you're sure to sort out what to do; I describe it below.

Intensity: 59
Focus: 69
Material: 48
Exposure: 9
Ambiance: 8
Texture Channel: Green
Height: 86

Adjust the lighting. Play with the direction of the light, the size of the ring and other settings to make it somewhat interesting. Always keep in mind that you want even color/lighting and no significant patterns that are sure to look ugly when tiled.

By the way, there's a very simple way to check for patterns and hot spots that's very effective: zoom out until the image is about the size of a thumbnail. If you see a pattern, or areas of light/dark, you will see them amplified in-game -guaranteed. This simple little trick can save you a great deal of time as it eliminates or reduces the need to create a new document to test the tiling.
11. Alt+T and select Other>offset. Use the following settings:

Horizontal: 512
Vertical: 512
Undefined Areas: Wrap Around

We're taking this step because the Clouds filter normally delivers the noise in a seamless pattern but lighting can change that if you're not careful, so its best to check and correct it before we go any further, since doing so later will become much more difficult as more patterns and noises are added. No seams in this one.

Ctrl+F will return the image to its original state, by offsetting it again; this is because the offset filter was the last filter that was used (again, Ctrl+F's function is to repeat the most recently used filter).
12. Ctrl+L brings up the Levels dialog. the image too dark, so we need to lighten it a bit.


And the final first layer with the histogram (we'll get to that later).





13. Ctrl+Shift+N and name the new layer whatever you want.
13. Repeat steps 1-12 on the new layer with the following minimum changes: Omit the generation of the alpha channel/noise as we've already completed that. In step 11 replace the green channel with the alphachannel you created in step five -the point here is to create a similar surface that will blend well with the first. A completely different noise pattern can also enhance the first however. This is where the artist has free reign and control. Also feel free to dink around with the other settings; the more you do, the more unique your texture will become. Experimentation -and remembering the results thereof- is essential. Remember especially what doesn't work -so you don't waste your time repeating it.
After you create stones for awhile, you should be able to take a quick glance at some noise and see, with a fair degree of accuracy, what it will look like when it's lit; this gives you the power to use/repeat the cloud filter until you see something that you know will work for you at the time.
14. Select Top Layer
15. Alt+E and select Transform>Rotate 90 CCW and switch the blending mode to darken. Now
we're getting somewhere; not very far yet, but we're getting there. Two more minutes and we have Stone!


16. Open TIFF file (that came in the zip) and duplicate, via right-clicking on one or more of the �Cracks� images directly into the image area -this becomes a smart object and bears a transform marquee around it. Now center it and when you have it centered, press Enterto give the O.K.


There are several crack stencils to choose from, and each can be reused by transforming, flipping, chopping them to bits or some other interesting indignities. There can be many variations. Alt+E and selecting Transform>warp is something else that comes to mind. . .
17. Ctrl+J to duplicate the layer. This allows us to duplicate the layer without using the clipboard.
Right-clicking on the layer itself and selecting from the context menu will duplicate it in the clipboard
and also give you the option of renaming it and where to place the duplicate. We don't need it in the clipboard this time around.
18. Double Click On the layer that you just duplicated . This brings up the Layer Style Dialog. Click on Bevel & Emboss. This will tick the check box next to said style and use the following settings as a starting point:

Inner Bevel
Chisel Soft
Depth: 572
Direction: Down
Size: 125
Soften: 0
Angle: 124
Altitude14
Highlight Mode: Screen
Opacity: 71
Shadow Mode: Multiply




Try dinking around with the opacity slider of the Highlight Mode as this can help with
the illusion of depth, as can the size slider -none of these settings are sacred. When you're happy with the
results, press Enter. 19. Adjust the layer's fill adjustment slider to zero. You can find it right under the opacity adjustment in the section directly above the Layers Panel. What this does, is leave the layer style's effect while hiding the pixels of that layer. If you adjust the opacity adjustment
slider, everything will become transparent -we don't want that.

It's looking more like stone now but it's certainly not there yet, we need to make it look much more
natural. Before we do that however, I'd like to show you about the grouping features built into Photoshop as well as some ideas on using all of the available screen space that you can. 20. Grouping is a great organizational tool that I find indispensable. You can collapse/hide groups of layers in
the Layers Panel that you don't need to look at. You'll notice that I'm grouping mine according to the type of map that I'm creating. Its possible to have groups within groups. By using groups and a sensible naming scheme there is no need to have the Layers Panel open at all. In fact, you should strive to work in full screen mode (nothing but the image). You can access more screen space by using the following keys:

F enters Full Screen Mode. try pressing this one more than once.
Tab hides the �palette� or �panels� areas -the junk on either side of the image space leaving a nice big blank screen with rulers (if unhidden).

21. Ctrl+Click each layer. This selects multiple layers. You should have four layers selected:
stone 1, stone 2, cracks and cracks copy.
22. Ctrl+G to group the layers. Double-click on the group title and rename it �layers�
23. Right-click on the group title and select duplicate group from the context menu. In the pop up dialog name the group �diff.� and press Enter.
As an aside, in CS 6 you can simply Ctrl-J the group to duplicate it, I'm not certain about this behavior in other versions so I kept the �old fashioned� method.
24. Expand the �diff� group and select all four layers. Right-click on one of the selected layers and
select merge layers. Double-click on the layer's name and enter diffuse.
25. Duplicate the stone layer from tiff file into the image by right-clicking on it's layer and selecting duplicate. Make certain the new stone layer is above the diff layer.
26. Set Layer's Mode to Overlay. Adjust the opacity if you like. 27. Ctrl+Click both layers now, the diffuse and the overlay, and then Ctrl+J to duplicate them.
28. Right-click on one of the selected layers and select merge[i] to combine them.
29. Select the original layers by Ctrl+ Clicking each layer.
30. Ctrl+G to group them and name the group �base overlay.� you should have something that looks
somewhat like this:


31. Alt+T and select[i]Other>Offset. The settings should still be at 512x512 so just click O.K. I have an ugly seam right down the middle of the stone so I need to use the healing brush to fix it.



32. J invokes the healing brush press Tab +J to invoke the spot healing brush. I'll make short swipes across the offending seam and heal an ugly spot -the dots and the line near them.
33. Here's the finished seam:



34. Check for hot spots. I see one spot that might prove irksome, we'll see.





2. Taming the Stone.


Now that we have our diffuse texture, we need to beat it into submission so it will play nice with Torque. We're going to create our detail texture from this image as well. Before we do that however, we're going to kill two birds with one stone: We'll tame the diffuse first and duplicate it, saving us the hassle of taming two separate textures since they are very similar anyway.
First lets take a look at the Histogram in the image below. I've analyzed a great number of textures that ship with Torque and noticed what works and what doesn't with my own textures. What I've found is that the �ideal� top half to three quarters of the bell curve in the histogram should fall within the light-green center rectangle in the image. Notice how the amplitude of the image is higher than the �ideal� area. This is O.K. The image is of the final texture before tweaks so don't expect yours to look the same just yet.



1. Alt+W and select histogram. Looking at the diffuse texture's histogram and the levels dialog in the image below. You will notice that the image is way too dark. You don't even need to look at the image, you can tell by the histogram. The whole curve is too far to the left.
2. Ctrl+L This pulls up the Levels dialog. It shows the same histogram with a slider below it. Consider this slider a �global gamma� adjustment, or something that brightens or darkens the whole image's
spectrum. You can slide it to the left and the image will become lighter; slide it to the right and the image will become darker. If you �squeeze� the input sliders, the curve �widens.� If you squeeze the output sliders, the curve becomes more narrow and the amplitude oftentimes goes up. Adjust your levels similar to the ones shown and press Enter.



3. Ctrl+U brings up the Hue and Saturation dialog. By removing some of the color's intensity in this way, the stone doesn't �glow� as much. Darken it ever so slightly. Notice the histogram.


4. Ctrl+J to duplicate the layer. Drag the layer down and out of the diffuse group. Name it Detail (double-click on the name to rename it).



5. Select Diffuse layer and set the Layer Mode to Overlay. This gives us a fair
approximation of what it will look like in Torque. The terrain rendering system adds the textures together when it blends them. This will show up in Torque much too dark. We need to lighten the detail map.
6. Ctrl+M brings up the Curves dialog. This dialog is a more sophisticated version of the Levels dialog. Curves dialog also gives you the power to boost or cut frequencies with greater precision, thus it's not always necessary. You can see that I've cut the input and output of the lighter frequencies a great deal. Notice how little it affected the image. I reduced an area that, for the most part, could be reduced no more. This tightened up the histogram as you can see.


7. Ctrl+L to bring the Levels dialog once again. Lighten the image a bit. This is still the Detail layer.



8. Switch Layer Style to normal..
9. Ctrl+Shift+L to save as .dds and use nVidia's DDS utility to save it out. DDS stands for Direct Draw Surface. This file contains several images of increasingly smaller sizes down to one pixel square. This is the preferred format. These smaller �levels� of images are called mip maps. Mip stands for multum in parvo which is Latin for �many in a small space� and Microsoft coined it while creating directX. There's some trivia for you!



3. Testing the Stone In Torque 3D.


1. Launch Torque. DO NOT CLOSE PHOTOSHOP. We need to try out our new texture so we can make any final
adjustments. This is where two monitors are indispensable. I Highly Recommend that you work with two monitors. After you become used to having two, which won't take long, you'll wonder how you survived with only one.
2. f3 to enter terrain painting mode. At the very bottom of the materials list is a button to create a new material layer. Do so now. At this point, there are a few ways to create this new stone material: We can simply replace one of the existing materials -dirt grass for instance- with our new textures or we can create a new material from scratch using our new textures. The choice is yours.
For testing purposes in my �Break It� build, I like to see the material in the context of my project so, during
testing, I choose the former method and simply keep changing the textures in the same material.
Mine needs some adjustments. I need to desaturate it a bit and darken the detail a bit.
3. Alt+Tab to switch back to Photoshop. Since we're in Photoshop I thought of something else that you can do to give your stone some diffuse variations so you can alter the feeling of the stone when seen in game. We have gray as the diffuse, but I'd like to add a brownish hue so it will blend better with Pacifica's warm colors. Gray works just fine as well, it just has a different feel to it. so...
4. Ctrl+J[b] to duplicate the layer.
5. [b]Ctrl+i and select Adjustments>variations.... I clicked on the more yellow
and O.K.'d it with the settings as you see in the image below.




6. Ctrl+U and desaturate it a bit:


7. Ctrl+L and adjust the slider to darken it slightly.
8. Select Detail Layer.
9. Ctrl+L and adjust the levels.
10. Save and Check In Torque. Still needs some adjustments...
11. Ctrl+L and darken it a bit (this is the detail layer remember).
12. Select the DiffuseLayer.
13. Ctrl+L and lighten the diffuse layer a bit. You may want to desaturate it a bit more, but keep some color it's what helps gives the stone its far and near color.
Look at the histogram and if it matches the ones in the diagrams it should be just fine in Torque. If not,

lighten or darken the detail until you like it. Remember that I've been using settings that work with my monitor. I have no idea what color space or gamma level your monitor are set to. The histogram would indicate that it is somewhere within acceptable bounds.
14. Ctrl+Shift+S and save both tweaked maps. Congratulations on a job well done! You've created a stone texture from a blank canvas and dropped it into Torque. Not a trivial task if its your first few times.

I hope that this first part has been helpful to you. It may seem �fiddly� at first, but I assure you that it is a fairly simple and straightforward process. I've tried to show several different techniques so you can apply them to different types and styles of textures. In other words, don't limit these things to stone. The Emboss Layer Style is great for dents and scratches in metal. You can also paint channels into your metal floors and walls using a soft round brush with this style and so much more. It really is limited only by your creativity. The next part will cover the generation of a �deep� normal map and height map to be used for the terrain's parallax shader. It won't be as long since we'll only be generating maps from the image we just created; a much simpler task.
Some screen shots to show how different lighting and angles affect the stone in-game follow: