Creating effective textures is truly an art form and many of the most successful texture artists I have worked with had a serious painting background. There is much to effective texture design that is beyond the scope of this volume, but there are some techniques that are useful to most all 3D artists when creating interesting texture maps.
In this chapter we will cover two tutorials. The first two will focus on essentially Photoshop techniques with a smaller section within Maya that allows for the creation of seamless textures and dirty textures. Creating textures that really feel grimy and that tile well can give a scene an entirely new sense of history—as if people and the weather have actually been there before—and hold up under scrutiny.
In our game, we are largely working with photorealistic or photo-inspired textures. To accomplish this best, good resource material is critical. Generally, when working on a commercial game it's a good idea to go and take your own photographs of the surfaces you wish to use in your game. However, taking good photos and working out the lens distortion issues is nontrivial and beyond the scope of this book.
Luckily, for our purposes, there are quite a few places for surface resource on the web. My favorite is at http://www.cgtextures.com. Loads of great textures there, most of which have had some work done on them to compensate for lens distortion issues, and many that have had the issues of seamless edges worked out for you. However, even with these great textures as base, you will likely find that some manipulation of the images is required to make it match your research, or just to make the textures visually yours. So, as per the official licensing agreements of CG Textures: One or more textures on this 3D-model have been created with images from CGTextures.com. These images may not be redistributed by default. Please visitwww.cgtextures.comfor more information. (Note that CGTextures requires a quick registration and has a bandwidth limit per 24 hours. Still it's a great resource and worth the hassle.)
Tutorial 4.1: Seamless Tiled Textures
So before we get into the “hows” of creating seamless textures, we should chat a bit about the “whens.” In the UV layouts we did in the previous chapters, there were times when all the UVs for a shape fit within the top- right quadrant. In this case none of the UVs were sharing any texture space. This means that the texture that is applied to that surface is very linear; each
pixel in the texture will be shown once on the surface. In situations like this, there is no need for seamless texture. We can paint a custom texture that wraps around the form and add or include any specific crack, stain, or bullet hole. There are times when this works great and in some ways is preferable. It allows for very interesting and accurate textures and texture placement. However, there are other areas of the model, like the ground surface, where we did not make sure that the UVs were set within the top-right quadrant. Although having all the UVs not sharing any texture space allows for intricately painted textures, these textures can fall apart upon close-up inspection (unless HUGE texture files are used that slow your game to a crawl) because suddenly more and more of the screen is being filled with a smaller and smaller chunk of the texture file. Although a crate may be able to use a 512×512 texture since the crate takes up only a small section of the screen, if a 512×512 texture is stretched out over the entire floor surface of our dock, when the player looks at his feet and the floor takes up the whole screen, he'd see only one or two pixels of the texture file; it'd look terrible (Figure 4.1). This is where seamless textures become powerful. If a seamless texture is created at 512×512, but repeated many times over the same dock surface, when the player looks at his feet, he may be seeing all 512×512 or even more if the texture has tiles small enough. It means that as the player looks out on the scene and the floor takes up a lot of screen space, the fidelity of the texture holds up much better (Figure 4.1).
There are inherent problems with tiling a texture over a large surface. The first is that it can become pretty obvious that a texture is being tiled as it is easy to visually pick out the repeating pattern. This problem can sometimes be mitigated through picking a texture that doesn't have too many large defining visual elements (Figure 4.2). This can also be mitigated by developing a good lightmap (much more on this later).
The second problem with tiling textures is when the tiles don't match up. If a texture is not seamless, it is easy to see where one copy of the texture ends and the next begins. This tutorial is out to fix this problem. Interestingly, solving the seamless problem is not a 3D issue at all, and thus not solved in Maya. We'll solve it in Photoshop.
Figure 4.1 The image on the left is a huge (4096×4096) texture stretched across the entire ground plane. The image on the right uses only a 512×512 image, but tiles.
Select and Prepare a Raw Texture Image
Step 1: Find a raw texture file that would work well as the base of the dock
concrete surface. I'm using ConcreteBare0312_S (see the support web site,
http://cgtextures.com/texview.php?id=44665).
Why?
There are actually a few parts of the dock surface. One part is tiled, another is a sort of worn painted cement, and then there is a raw cement section. This is going to be for the raw cement section. My research photo shows a sort of brownish cement, but the exact choice is up to you.
Tips and Tricks
CGTextures allows for huge-sized textures. In a TV or film situation, using huge resource and piecing together a huge collection of big textures to create a massive texture that holds up on the big screen might be needed, but for a tileable texture, it hardly ever is. So download the smallest version of whatever texture you choose.
Step 2: In Photoshop, resize the image to 512×512. Select Image>Image
Size. Click off the Constrain Proportions option, and enter 512 into both the Width and Height (pixels) input fields.
Why?
512×512 is a power-of-two size and thus will create an image that will render quickly and import cleanly into Unity.
Offset and Clone Stamp
Step 3: Offset the image by 256 pixels in both horizontal and vertical.
Choose Filter>Other>Offset. Change the Horizontal and Vertical to both read 256. Be sure the Wrap Around radio box is checked. The results can be seen in Figure 4.3.
Warnings and Pitfalls
Generally it's not a good idea to resize an image; it can create some mushy stuff on resampling (Photoshop can't always decide which pixels to leave out as it reduces the total amount of information). In this case though we will be adjusting the UVs anyway to make the texture look right once it's applied to the dock, so we have a bit more tolerance.
Figure 4.2 Textures (even if seamless) that have a big easily identifiable element will produce output that the tiling is revealed too overtly.
Why?
The problem with any image and trying to make it seamless is getting to the seams. The seams are the edges of the image. The Offset with the Wrap Around option activated does some important things for us. First, it offsets or slides all the pixels over (and/or down) and then wraps the pixels that it slides off the edge of the canvas around to the other side of the image. This means two important things. First, after the Offset filter has been applied, the right edge of the image matches seamlessly to the left edge of the image and the top and the bottom match as well. Second, it takes the old edges (the old seams) and puts them right in the middle of the scene where we can deal with them.
Step 4: Clone Stamp out the seams. The Clone Stamp is an incredibly
powerful tool that allows for interactively painting the pixels from one part of an image to another. To use it, select it from the Photoshop tool bar, then hold the Alt (Option on a Mac) and click the area where the pixels are to be pulled from. Release the Alt and mouse, and then go and paint where the pixels are to be painted (in this case the seams in the middle of the image). The results are seen in Figure 4.4.
Figure 4.3 Offset and the results.
Tips and Tricks
The [ and ] keys will change the size of the brush (bigger and smaller). Often this is an important step in effective seam working. Make sure to have control of the brush size.
Tips and Tricks
The Clone Stamp tool has several options that (in CS5) show up at the top of the Photoshop interface. NEVER paint with Opacity and Flow both at 100 percent. The texture will become a blotchy mess very quickly, and will begin to show features too frequently, in effect reducing the visual information available in the texture. I like to paint with a Flow value of around 10 percent, which allows me to gently layer pixels onto a seam and through the combination with the pixels beneath, make an area that doesn't exist anywhere else on the texture. Think of the process as massaging the seam out, not painting it out.
Step 5: Save. File>Save and name the file EntryWay_DockColor. Be sure to save it in the sourceimages folder of the project file.
Tips and Tricks
The file format is not terribly important. Maya reads most image formats, although it can get pretty persnickety about .psd files if using Mental Ray. Unity, on the other hand, reads most anything. Since my original was a .jpg, I am saving it as a .jpg as well. But if there is a lot of layer action going on, don't shy away from .psd. Unity will keep the original multilayered .psd file, and import it as a flattened image.
Unify the Color Balance
Step 6: Run a High Pass filter on the image. Filter>Other>High Pass
will open a dialog box. Within this dialog box, drag the Radius slider to the far right (250 pixels). This will make the image look quite gray (Figure 4.5).
Why?
Often, when sampling an image or cropping, the image looks fine until it is offset. Then the gentle gradients that are often visible in textures becomes apparent. Suddenly, when the left side of the image lines up with the right side of the image, the colors there can be totally different. This process allows for the unification of the color fields. The High Pass filter desaturates much of the colors, but leaves a data set that will work well with the coming steps.
Warnings and Pitfalls
While working out seams, watch out for areas that might be too conspicuous when repeated. For instance look at Figure 4.4; notice the dark black splotch. When repeated 20 times across a surface, this splotch will be very problematic. Use the Clone Stamp tool to get rid of (or at least minimize) these sorts of blemishes.
Warnings and Pitfalls
This is not a trivial issue: Save this bad boy in the sourceimages folder. For further rantings on the importance of Maya projects see the previous chapters.
Step 7: With EntryWay_DockColor still open, choose File>Open and open
the original file used as the base texture (in my case ConcreteBare0312_S ). This will become our source image.
Step 8: Go back to EntryWay_DockColor (Window> EntryWay_DockColor). Step 9: Match color. Choose Image>Adjustments>Match Color. At the
bottom of the Match Color dialog box, choose ConcreteBare0312_S (or your image) in the Source drop-down menu. Press OK (Figure 4.6).
Step 10: Test the texture in Photoshop. Do this by again selecting
Filter>Other>Offset and moving the sliders around to all sorts of different values. The result should remain seamless; the seams that once were there should never be seen.
Step 11: When satisfied, save.
Apply the Texture
Step 12: Open Maya (make sure the project is appropriately set) and open
EntryWay.mb
Figure 4.5 Results of the High Pass filter.
Step 13: Open the Hypershade and graph the EntryWay_DockCement_
Mat material. Open the Hypershade with Window>Rendering
Editors>Hypershade. In the Hypershader choose the Materials tab, and then select the EntryWay_DockCement_Mat swatch. Select Graph>Input and Output Connections. This should appear like Figure 4.7.
Why?
What you're seeing here is how the nodes are connecting to create the material. The far left node indicates how the texture is placed within the UV space (by default 1:1), the second is actually the checkerboard texture, the third is the material, and the far right is the shading group. Once the material is graphed like this, it's easy to see how the material is assembled and how to make the desired changes.
Step 14: Rename the texture node. Still in the Hypershade, double-
click the texture node (the one with pink at the bottom). This will open the node in the Attributes Editor. There in the file: input field enter
EntryWay_DockCement_Color.
Why?
This is a bit of housecleaning that could have been done earlier. When a file node is created while creating a material, Maya automatically names it file##. In my case it was at file12. The problem is that this makes it hard to keep track of what nodes are where. Especially when there are so many checkerboards, it can become very difficult to see them visually. By taking a moment to rename, it becomes clear (especially to any other artists who may access this file later) what is going on.
Figure 4.7 Graphing the EntryWay_ DockCement_Mat material.
Step 15: Replace the checkerboard with the new EntryWay_DockColor. Still
in the Attributes Editor, look at the Image Name input field. It should read: sourceimages\Checkboard.psd. To change out the cement texture, click the folder icon to the right of the input field. Then, in the Open dialog box that comes up, choose EntryWay_DockColor.jpg. Click Open (Figure 4.8).
Why?
So what just happened? Notice that the entire dock didn't change; this is by design. In the previous chapter we assigned different materials to different parts of the dock. When we swapped out the checkerboard and defined a different image to describe the color attributes of the material, only the polygons with the EntryWay_DockCement material changed. Now we can adjust the UV sizes to make this texture the right size.
Step 16: Adjust the UVs to taste. Select the dock and choose Window>UV
Texture Editor. Select the UVs that define the part of the dock that is our cement and scale (in all directions by dragging on the yellow square in the middle) the UVs up so that they become larger (meanwhile, your texture will begin to tile in the View panel). Watch the View panel as the handles are dragged in the UV Texture Editor to see how the size of the texture changes on the surface (Figure 4.9).
Tips and Tricks
Within the UV Texture Editor notice that multiple textures can be displayed in the Textures drop-down menu. This is because (in this case) we have multiple materials assigned to a single mesh. Sometimes when working with UVs it will be important to see how the UVs align with a particular texture, so toggle through them here.
Warnings and Pitfalls
If you press the folder button and are not taken directly to the sourceimages folder of the project, or if EntryWay_DockColor isn't sitting there waiting, stop. It means you are either in the wrong project or you've saved the texture file to the wrong location. Take a moment and either reset your project or track down where you've errantly saved the file and get things in order.
Figure 4.8 Results of swapping out checkers for new cement texture.
Conclusion
And there you have it. This same technique will work for most any texture that needs to be tiled. Admittedly, it can get trickier for surfaces like (ironically) tile, where getting the ends to line up can take some deft handling. But, the work will pay off. As large surfaces become visible, the effective texture will pay visual dividends down the road.
Notice that there are some good things happening here. Zoom down and place the camera about where a player would be in the game; the texture should hold up pretty well. However, when the camera is way up (as in
Figure 4.9), the repeating pattern will be pretty clear. Some of this will become a nonissue once the scene is baked, and since we are never very high in relation to this dock, it's unlikely we'll notice the repeating pattern. If, in the game, we do have a distracting repeating pattern, we can go back and scale the texture a bit, or work with a larger sampling of texture, or both.