Tiling Textures | Maintaining the Illusion

Maintaining the Illusion

Let's finish our first tiling texture with a little 3D testing.
As I mentioned in Lecture One, technical considerations will affect the way you make textures for any game. What resolution should your textures be? How many textures can you use? Although there are no single, simple answers to these questions, this lecture will give you some insight into the technical issues you must consider.

In this lecture, you'll also learn to identify conspicuous details that make it very obvious that a tiling texture is being used to texture a surface. Conspicuous details result in patterns on a textured surface. Since the purpose of tiling textures is to make your flat, computer-generated surfaces look more realistic, any obvious and inappropriate patterns on your surfaces will undermine the illusion.

Once you learn to identify the details that cause such patterns, you will learn steps that you can take to remove or correct them. Since these details can remove much of the character from your textures, we'll discuss how to deal with the tradeoff between retaining the character of the texture and creating a successful tiling effect.

In this lecture, you can expect to:
Learn about technical issues that affect texture development.
Learn what kinds of features are included in texture tiles.
Learn to identify and remove conspicuous or extreme detail that gives away the tiling of your textures.
Learn techniques used for correcting textures.
Learn about the tradeoff between effective tiling and authenticity of textures.





In each game engine, a certain amount of memory is allocated towards the display of textures. This is called texture memory.






Some texture memory is used by objects that are always present, like heads up displays or interface elements. The rest goes to object textures.












Establish the base resolution for textures at the beginning of a game development project.







Textures can be different sizes and shapes, but should generally be saved at a resolution (pixel size) in powers of two.








Textures may include simulated 3D objects such as ground-hugging plants, painted into the texture.


Technical Overview


Texture Memory

Let's begin by examining some technical issues that affect texture artists.

Game engines today generally offer texture artists a great deal of flexibility in the use of available texture memory. Most games on the PC will require 3D video cards to run, and such cards make use of their own video memory. Each console will also have a certain amount of hardware memory dedicated to texture storage.

Sometimes it's possible to use more textures than will fit into this memory, but since they have to be moved into video memory before they are displayed, it will slow your game considerably to do so.

Some of the available texture memory will usually be used by things that are always present, like the heads up display and other parts of the interface, for example. What is left can be filled with textures of nearly any size and shape (subject to certain limitations as discussed in the next section).

This screenshot from Metroid Prime shows heads up display information such as available energy. Special effects graphics, in the form of exploding blue shards, are also visible. These graphical components must share available texture memory with tiling textures for the environment.

Working with Resolution

In a game development team, the designer will generally decide on a base texture resolution early in a game development project. It's helpful to have a guide like this when making textures, a commonly accessed frame of reference that answers the question: How big should our textures be? Working with a guideline like this also helps avoid having some textures in a game looking more or less pixelated than others.

Many games still use a base texture resolution of 256x256. This is true of games such as Quake III Arena and Unreal Tournament 2004. In UT 2004 however, some texture maps are 1024x1024 in resolution. These are used to texture very large parts of the game world.

Another consideration is that some textures will most likely not be square. It's common, for example, to use "trim" textures at the bottom of a wall next to the floor, or at the top or even the middle of a wall. In a texture set with a base size of 256x256, you are likely to have textures of 256x128, 256x64, 256x32, and 64x256, just to mention a few examples.

The example below left is 256x256. Three trim textures in the set are shown on the right. One is 256x128, the other two are 256x64.

Powers of Two: Game Engine Constraints

Many game engines and 3D cards require that textures be powers of two in resolution. As I mentioned, typically, textures are square, but they don't need to be. The powers of two are 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, and 2048... and so on. 3D cards will resize a texture to such a resolution, if necessary, before storing it in memory.

A texture resized by a 3D card or game engine will typically not look as good as one resized in Photoshop—so it is well worth your time to be sure all of your textures have a resolution of a power of two in each axis.

Size of Textures vs. Resolution of Textures

As I mentioned in Lecture One, game artists have their own way of thinking about the term "resolution."

Here's another whammy. If someone mentions the "size" of a texture, you could be forgiven for thinking they meant the resolution or dimensions of the image. In most 3D applications, a texture of any resolution can be applied to a surface of any size, and it can be made to fit, no matter how much it may have to stretch to do so. However, in game engines, there is often a default mapping that means that pixels have a specific size in the game world, by default.

For example, if you apply a 256x256 texture map to a 128x128 unit piece of geometry, it may fit perfectly. In such a case the same texture applied to a 256x256 piece of geometry will tile twice in each axis. In this situation a single pixel could be said to have a size of 0.5 units.

If a texture map is not proportional to the dimensions of the object, the texture will stretch.

In most cases, any inherent size is a default only, and settings can be adjusted. Sizing a texture to exactly fit any size surface is done in a level editor, usually at the time the texture is applied to a surface.

What to Include in a Texture

A great many things might be included in a texture. Cracks and stains may be found on a wall, for example. Footprints, pebbles, and maybe even litter may be found on a ground texture. A door or window might be included in a texture, although these things will look better if you can use the geometry required to make such things in 3D, so that windows and doorways are at least inset slightly from the wall.

One limitation on what can be included in a texture has to do with depth—although you might include small ground-hugging plants in a ground texture, a tree would obviously not look very convincing.

Consider the example below. In the still image on the left, the lamps on either side of the doorway don't look especially flat. In a game, however, the viewer moves about relative to the textured surfaces, as in the movie on the right. As the angle of view changes, it becomes clear that the lamps are not three-dimensional, but merely painted on the surface.

Click the image above to see the movie.

Generally speaking, anything can be included in a texture as long as it looks believable. Beyond that there are many possibilities, and many things to consider such as the manner in which your textures will be used, the amount of geometry you can use (a function of the number of polygons your game engine can draw each second), and the technical features and limitations of your game engine.

Our discussion of what to include in a texture set will continue over the next two lectures, with examples. For now, let's return to our discussion of how to make our texture tiles convincing.










Any part of the texture that has conspicuous detail may draw your attention when the texture is tiled.










































When editing a tiled texture, make sure to avoid painting over the edges of the texture.




































































A game artist will always be able to see where a texture tiles. What matters is that the illusion is effective for the average game player.

























Always test your textures in 3D to determine whether they are ready.



























































Turning the grid on can help you precisely locate a problem area.

















The Clone Stamp and Dodge tools are helpful for correcting conspicuous or extreme details.










Removing extreme detail often means removing some of the most characteristic parts of the texture.


































The more regular and uniform a surface, the less natural it looks. The texture artist must manage the tradeoff between illusion and authenticity.


Maintaining the Illusion
Conspicuous Detail

A common problem that you'll need to address when creating a tiling texture is conspicuous detail that draws unwanted attention to the fact that the texture is tiling. Tiling textures is an efficient way to decorate large surfaces in games, but we don't want it to be obvious.

The image below shows our texture from Lecture One tiled three times horizontally and three times vertically. In this case a pattern can be seen clearly in this image in Photoshop: a diagonal line of a darker color.

With the grid turned on, we can see that this darker color lies just below a line that runs from the upper left corner of the texture to the lower right corner. There is also a bit of it in the upper right corner of the texture (remember, the image below shows nine copies of the texture).

If we edit the image, it will be important to avoid painting over the edges of the texture, since we've gone to such trouble to be sure those tile.

Removing Conspicuous Detail

Working on a single copy of the texture, you might want to use the grid to select the texture, then use Select > Modify > Contract to protect the edges of the texture. I would recommend contracting by at least 1 pixel, and also feathering the selection by at least 1 pixel.

Working with the Dodge tool, it should be a simple matter to lighten up the darker areas of the texture so that they more closely match the rest of the image.

Tiling the texture 3x3 again shows us the results. It should be no surprise that noticeable dark areas remain around the edges of the texture (check the location by turning on the grid).

Because we avoided lightening the edges, they are still darker than the rest, and this is visible. But had we lightened the edges, there would have been no way to guarantee that the lightening we did on the right edge of the image, for example, would match the lightening we did on the left edge.

We've dealt with a very similar problem before by moving the edges of the texture to the center.

Since the total image is made of nine copies of a single 512x512 texture that tiles seamlessly, any 512x512 piece of this image will likewise tile. That means that we can use the dotted grid lines to make a selection like that shown below, copy and paste the selected area into a new layer, and that selection will tile.

What used to be the edges of the tiling texture, where the darker areas lie, are now in the middle of the texture where we can lighten them without disrupting the tiling.

Tiled 3x3 again, you can see the improvements below.

This is much better, but the critical eye will point out that we can still tell that this is a tiled texture. Actually, a game artist will almost always be able to tell. Looking at the image in Photoshop, you may or may not see detail that draws your eye, and that you would like to remove. But looking at the texture in Photoshop may not be enough. Some problems will become more apparent when the texture is viewed on a 3D surface and seen in perspective.

Testing Your Texture in 3D

Since your tiling textures will be viewed on 3D surfaces in a game, it is best to see them that way in order to decide if they are ready, or need more work.

Usually, the simplest approach will be to apply the texture to a plane in your favorite 3D package, and make the texture tile or repeat across the surface. It is best to make sure that the texture is displayed on each quad of the plane, and then to be sure that the plane is made up of at least four quads in each axis. There will be situations where you will see problems when the texture is displayed this way that you would not see in Photoshop.

To test your texture in Maya, create a polygon plane and orient it as shown below. Notice the size and subdivision inputs I used on the right.

Click the image to get a closer look.

In the Hypershade dialog (Window > Rendering Editors > Hypershade), press the middle mouse button (or Command key on a Mac) and drag a Lambert surface from the Create tab on the left into the Work Area, as shown below.

Now use the middle mouse button (or Command key) to drag the File icon from 2D Textures (in the Create tab), and drop it onto the Lambert icon in the Work Area. Recall that File enables you to load an external texture.

From the menu that appears when you drop it, choose the color option. Double-click the File icon in the Work Area to access File Attributes in the Attribute Editor, which displays in the main Maya window.

In the Attribute Editor, click the folder icon next to Image Name to load your texture image.

Click the image to get a closer look.

Double-click the place2dTexture icon in the Work Area to access the UV texture parameters in the Attribute Editor. Note: If the place2dTexture icon is not visible, right-click (PC) or Command-click (Mac) the Lambert material and choose Graph Network or middle-drag 2d Placement (from the General Utilities section of the Create Maya Nodes menu) onto the File icon and choose Default from the menu that appears.

In the Attribute Editor for place2dTexture, set U to 10 and V to 4 (in the Repeat UV fields), as shown below. I chose these settings because the plane has a width-to-height ratio of 10 to 4, and we want each tile to remain square.

Click the image to get a closer look.

To apply your texture to the plane, select the plane and right-click the Lambert in the Work Area, choosing "Assign Material to Selection" from the pop-up menu. Press the 6 key to see the texture on your model.

Move in close to the plane, as shown below, to check your texture for obvious patterns.

In the image below, an area that draws the eye is circled in red, and another area that attracts unwanted attention is circled in blue. These problems are much more subtle than the one we just fixed, but we will want to address these problems as well.

In order to get a better idea of the location of the problem areas it can be helpful to identify the edges of the texture. This is a matter of displaying the outlines of the faces, as shown below.

Comparing the two images above, and looking at the 3x3 tiled texture image in Photoshop, I can see that the problem area wraps from the right edge of the texture onto the left. So, I will once again move these edges to the middle of the texture, so that I can make the changes without having to work with the edges of the texture. I can do this by selecting and working with the area shown selected below (I used the grid to make this selection).

Correcting Issues

I will try to solve this problem two ways: First, I will take steps to eliminate the rather long horizontal cracks, and second, try to further lighten the area that appears darker than the rest of the texture.

I could try using the Clone Stamp tool to solve the first problem. But I think I'll have more control if I draw a selection around the area I want to change, and then move it around the image looking for a region that I can copy and paste to cover the problem area, using the Eraser tool to make it look natural. I will choose an area that does not have the kind of extreme detail that will draw the eye, such as areas containing larger or darker cracks.

I used the Dodge tool to lighten the darker areas. Below is the texture before adjustment and after.

Click each one for a larger version.

The image below reveals the changes much better:

At this point, the texture looks pretty good. There is one dark crack that draws the eye a bit. There are also a few areas of a slightly lighter color that seem to lie in nearly vertical and horizontal lines. You should now know how to go about fixing these problems. It will be common to do this many passes, or even one or two more, in order to arrive at a point where you have a texture that tiles seamlessly without unnecessarily attracting the eye to certain details, and to the fact that we are looking at a tiling texture.

The Big Texture Trade-off

As with all things in games, there is a trade-off here. As you work with the texture to reduce the extreme detail, you also remove some of the character. An organic surface like the one we have been working with will often have a wide variety of different shapes and colors, and not usually be very regular or uniform. What we have been doing is eliminating the things that stand out, and in doing so, we have made the texture more uniform in terms of color, and in terms of the size and shape of the cracks. If we go too far, we could end up with something that could look quite artificial.

Each artist will make his or her own choices in this regard. Some of you will think the texture looks just fine the way it is. Some of you may think that my next attempt still needs further work. In the game industry, you will have your peers to give you feedback on such considerations, and your art director as well, of course.

I gave it two more tries before arriving at this texture:

Click the image to get a closer look.

Explore the challenges of creating a tiling texture with a geometric pattern.
Learn tips for shooting source images of geometric patterns and correcting unwanted perspective issues.
Learn techniques for preparing a geometric tiling texture, correcting problems with perspective and conspicuous detail.

Apply the techniques you've learned to identify and remove conspicuous detail from your textures.

Share your thoughts on your experiences identifying and removing conspicuous detail from your texture with your fellow students.