Gamasutra: The Art & Business of Making Gamesspacer
Making Quality Game Textures

Printer-Friendly VersionPrinter-Friendly Version
arrowPress Releases
April 18, 2014
PR Newswire
View All





If you enjoy reading this site, you might also want to check out these UBM TechWeb sites:


 
Making Quality Game Textures

November 23, 2005 Article Start Page 1 of 2 Next
 

This article covers how we can achieve better visual textures for games while still keeping to low memory footprints, thanks to efficient management of the visual results of texture compression. We will learn in-depth what type of visual results we can expect, and examines the use of the hardware DXT compression method. [Please note that the example textures can be clicked on to see higher-resolution versions of each example.]

Handy tools for this study:
To view, load, and save DDS textures, the following tools and resources are handy.

Developer.Nvidia.com has a set of tools for Photoshop to create and save DDS / normal maps.
WTV Viewer
and DDS Thumbnail Viewer (provided by NVIDIA) are small and fast viewers that allows you to scroll through the folder images in explorer view and see the alpha of the DDS.
www.irfanview.com lets you quickly and easily read, scroll through and thumbnail the DDS images.

Figure 1.0

As we go through this article, we will be using NVIDIA's DDS Photoshop tool, as seen in Figure 1.0.

Please note that there are several other programs out there, including freeware, that will do the same task, perhaps with a better or worse result. As NVIDIA's DDS tool is commonly used within the industry, we will base the result from this article around its quality output.

DXT / Compression:
Throughout this article we will mainly concentrate on DXT1, as it the most useful format due to its effective memory size - a 1024*1024 texture is only 603KB in size. With a compression ratio of 1:8, DXT1 keeps the memory size low by using an algorithm that divides up the texture into 4x4 pixel blocks, where each block only stores 2 unique colors in the combined 3 channels from a 65k palette. If you careated a 16bit TGA texture with the same resolution, it would be 2.4MB in size.

Creating mods and games for PCs, we often have the fortune of large amounts of memory available, but creating art for low-spec machines, or even some next-gen consoles, is a whole different matter. We need to be more aware of how we use the memory available, and how we achieve the best quality for our textures. Knowing more about how DXT compression works, it can benefit you to use smaller-sized uncompressed textures, rather than increasing the texture size to compensate for the DXT compression and remaining within the same memory footprint.

As you most likely have seen, if you use a heavily compressed JPG, the texture becomes blurry, smeared and blocky. DXT has its similar blocky problems, as it will affect up the image in what can be seen as an uncontrolled way, something that can have devastating negative visual impact on our textures. We need to be aware and verify our output when saving out a normal black and white image as in Figure 1.1, where the original from Photoshop looks white and crisp the result after saving it as DDS could create something we see in Figure 1.2.


Figure 1.1
Figure 1.2

Seeing what happens with a small and simple texture like Figure 1.2, what result can we expect from a larger, more complex in-game texture?

Let us start by looking at some areas where the DXT (and especially DXT1) format have problems:

Sharp Edges:
Although not a true development example, this will still show how the compression can distort the result of your textures and alphas. When using heavily contrasted edges and lines within DXT, the variation in anti-aliasing can create blocks around the edges of the object. As we can see from Figure 1.3, there are two drawn circles. The left one has been antialiased by Photoshop while the right one has manually been adapted to retain its aliasing with a set of selective chosen gradients. We can then seeFigure 1.4, which shows the output from DXT1. To visualize the edge bleeding more clearly, we have intensified this image's saturation and brightness.



Figure 1.3 Figure 1.4

As we can see, the difference between the two circles are very obvious after the compression. The conclusion would be that using less anti-aliasing to smooth out high contrast edges and using reduced variation of colors can result in better remained visual sharpness in the texture.

Unique information in each channel:
Each 4x4 block within the texture shared by all channels can only withhold 2 unique colors. When trying to use each separate channel for unique information, the compression will distort the information of the combined result, resulting in almost unuseable information. Therefore, artists should refrain from using DXT in these occasions, due to its limitations for this purpose.

Blocky texture content:
If we study textures that rely heavily on gradient content, we can clearly start to notice the limitations of the 4x4 block compression method. Let's look at a light map, where the information is vital to define where the light is on the object, and how smooth the transition would be.


Figure 1.5


Figure 1.6


Comparing Figure 1.5 and 1.6, where Figure 1.5 is the original uncompressed data, we can clearly see that information gets distorted with the compressed DXT1 compression in Figure 1.6. To achieve higher quality, we can try various things:
  • Use DXT3 or 5, with increased memory footprint.
  • Increase the resolution of the textures, making each 4x4 block smaller.
  • Limit the colors from the available palette in the original image.
  • Choose an uncompressed format.

The concept and solution is very simple - the cleaner we keep the texture with the fewer variations, the better it's going to look. Let's take a closer look at an example where we will experience banding and pixelation, and see how we can improve on the final result.

16-bit Compression DXT1:
As mentioned earlier, DXT1 textures rely on 65k (16-bit) color information. Creating textures that involve large gradient variation will mean reduced quality and texture banding problems. Let's look at the result from a compressed gradient palette.


Figure 1.7
Figure 1.8

Comparing figure 1.7 and 1.8, we can see that the 16.8 million color gradient information from the original is fairly well-preserved in the compressed 65k texture version.

But let's take a look at a more practical development example. Using assets from Battlefield 2: Special Forces BFHQ, we will take a look at the visual quality when saved as DXT1 for minimal memory usage. The image is used in a menu screen, and it appears fairly up-close in an 800*600 resolution, so any large differences will be visible.

Figure 1.9 shows the original TGA from Photoshop where we have a smooth gradient of 256 colors in each channel. Comparing image 1.9 and 1.11 we can see what type of information we have lost from the original image.

To visualize the quality in further detail, let's zoom into part of the affected area, as seen in Figure 1.10. Take notice of the area under the foot, and the gradient fade on the right side from bottom to the top.

  Figure 1.9– Original Image Figure 1.10– Original Image Zoomed

Having saved the texture as DXT1 as seen in Figure 1.11, and zoomed in 1.12, it has become obvious that we lost some valuable information, and this is not the result we are looking for.

Looking at the same area in Figure 1.12 as in Figure 1.10, with the DXT compression the texture now appears crude. Banding has appeared within the image under the foot in Figure 1.12, where the gradients blend between the shadow and the ground.


Figure 1.11– DXT compressed image

Figure 1.12 - DXT compressed image, notice the banding under the foot.


Article Start Page 1 of 2 Next

Related Jobs

Fun Bits Interactive
Fun Bits Interactive — SEATTLE, Washington, United States
[04.18.14]

Technical Artist
TapZen
TapZen — Los Angeles, California, United States
[04.18.14]

Database Engineer
2K
2K — Novato, California, United States
[04.18.14]

Senior Graphics Engineer - Core Tech Team
2K Australia
2K Australia — Canberra, Australian Capital Territory, Australia
[04.18.14]

Senior Engine/Graphics Coder – Canberra, Australia






Comments



none
 
Comment: