The Power of the High Pass Filter

Introduction: Common Problems

If you're a graphic artist working in the game industry, it is almost certain that at least at some point of your career you have had to deal with tiling textures in Photoshop. Textures, that must not only tile seamlessly, but also look good even when tiled tens of times over. Ever too often, your brick wall may tile seamlessly at the edges, but something, just something there doesn't work: when the texture repeats many times over, you see annoying repetition, covering the distant hills with an unnatural raster-like pattern. You may realize that there's a cloudy, darker area that needs to be removed, try to Dodge it a little, and try again. Okay, the dark blotch is now gone-but wait, now there's a bright area in the other corner! And so it goes, driving you nuts.

More recently, using digital photo material for textures has also been an issue. Taking the pictures is an art in itself, but working textures out of them is often where the most hair-pulling takes place. Ever had to take pictures of a concrete wall in a dark underground garage, using a flash? The picture will end up with a prominent highlight in the middle, which may look good in a completely non-lit environment, but not when rendered with lightmaps. How do you deal with it? Creating gradual selections by using gradient tools in the Quick Mask mode may do the trick, but not perfectly, and not without a lot of trouble.

The third area that has traditionally been somewhat tricky, is making detail textures for today's 3D accelerators. These, if any, must tile perfectly unrepeated, or any surface using them may look even worse with one than without.

For all these problems, there is an incredibly handy little filter that most people seem to ignore. It is called the High Pass filter.

Underrated, Yet Powerful

If you've ever explored the secluded Other.. section in Photoshop's Filters menu, you may have seen the High Pass filter. You might have tried it, and seen how it pales and flattens the image. What possible use could there be for such a filter, except for some odd postmodern weathering effects? You may have looked at Photoshop's online help, or even some tutorial books on the subject, but none of them do much about explaining what the filter does beyond its conventional uses - that is, "extracting detail out of continuous-tone images prior to posterizing". This isn't something a graphic artist working in game industry often needs to do.

I once decided to experiment a bit further with High Pass, however, and realized its true potential - and nowadays, I couldn't live without it.

First, I am going to tell you something about the world of signals and waveforms. Strange it may sound, but pictures and sound have much more in common than many people think.

Some Facts about Waveforms

As every self-respecting sound engineer knows, an audio signal is a waveform which consists of multiple frequencies. These are often divided into Bass and Treble - low and high frequencies. The wavelength of the signal determines the frequency: low frequencies have long wavelengths, while high frequencies have short wavelengths.

Analogous to sound signals, images also consist of both low frequency and high frequency detail, and in this respect, act like waveforms: in pictures, large blurred details represent low frequencies, and small, sharp details represent high frequencies.

In audio world, without treble the signal sounds muffled, and without bass, it feels thin. Likewise, without high frequencies, that is, small details, images appear blurred. Without low frequencies, they seem flat.

Manipulating the Frequencies

To manipulate signals, sound engineers often use tools called Filters - just like us Photoshoppers. The most common ones, the Low Pass and the High Pass filters remove certain frequencies from the signal, while the rest of the signal passes through; this is where the part pass in the name comes from.

In the sound engineering world, the most rudimentary filter is the Low Pass filter: it filters out the high (treble) frequencies and leaves the low (bass) frequencies intact. The equivalent of this effect in Photoshop is the Gaussian Blur: small details disappear, and large ones remain.

Technically, the High Pass filter is the opposite of Gaussian Blur: it removes large, blurred low frequency details, while small sharp high frequency details remain. The quickest way to demonstrate the filter's effect in Photoshop, is to simply create a new image, Render Clouds with black and white, then apply a High Pass to it. Try changing the radius of the filter and see how the large black and white areas vanish, while the small ones remain (at this point, ignore the fact the image also loses a lot of contrast). With very small radii, the clouds begin to resemble noise - and you may notice that at zero it becomes gray. After applying the filter at a radius above zero, do Auto Levels (Shift-Ctrl-L) to restore the original contrast of the picture, and see the difference.

Why does the contrast drop so drastically that it must be restored afterwards? Well, because both High Pass and Low Pass (Gaussian Blur) remove parts of the original signal, using them reduces the contrast (or analogously, amplitude) of the image quite drastically - the sound gets quieter, and the histogrammatic pixel distribution of the picture is pushed towards the middle (gray). As in the previous example, this can be easily compensated by using the Brightness/Contrast or Levels tool to restore the crispness of the original image.

The histogrammatic shift towards middle is caused by a simple fact: for example if the original image is a lot darker than 50% gray, the signal inverse to it is naturally a lot brighter. This symmetrically centers the signal around center. In audio processing, this is a very handy way to remove DC offset from the signal. If the texture you're working on needs to be much darker or brighter than 50% gray, you need to manually adjust its brightness after filtering.

How Does It Do It?

Gaussian Blur and Low Pass filters are pretty basic: they reduce the sample rate of the original signal, and interpolate the results with weighed average. The case isn't quite as simple when you actually want to remove the low frequencies. Although the two filters have opposite effects, the High Pass filter is actually based on Low Pass - or Gaussian Blur. (In fact, the Unsharp Mask filter is also a part of the family, but that's not a part of this feature.)

The trick with High Pass is to take the signal, Low Pass it, invert it, and then mix it back to the original signal. The result is that the opposite low frequencies in the two signals cancel each other out, while the high frequencies, which are missing from the inverse signal, remain.

This is exactly what happens when you use the High Pass filter in Photoshop. To prove my point, you can try and do the same thing manually by using Gaussian Blur. The procedure goes as follows:

As you can see, the result looks exactly the same as when previewing the High Pass filter. This exercise simply demonstrates that Gaussian Blur and High Pass belong to the same family.

In the following sections I am going to explain how to put this powerful little tool into good use.

Using High Pass with Tiling Textures

If you've ever worked on textures, especially those needed for large, open 3D landscapes, you most certainly know how tedious it may be to get together a texture that not only tiles seamlessly, but also doesn't repeat very visibly. (Hayden Duvall shows some excellent tricks to break 3D scenes' repetitive textures in his "The Right Kind of Beauty" feature, but that ground has already been covered.) No matter how perfectly seamlessly you manage to tile the texture's edges, the problem often is that any larger dark or bright area in the texture (that is, low frequency detail) will repeat very visibly if the texture is tiled many times over.

Hunting these flaws in the texture is known to have driven many an aspiring texture artist crazy. It may have been necessary to Burn here, Dodge there, review the result, try again, over and over again, until you conclude you've spent too much time and must move onto the next texture. Or, you can save yourself a lot of work hours, gray hairs and headaches by simpy using the High Pass filter followed by the brightness/color restoration procedure.

It is actually recommended to apply the High Pass filter before you begin making the image edges tile seamlessly, since very often the large low frequency detail clips at the edges of the texture - which, if offset and wrapped around before high pass, creates high frequency detail the filter doesn't fix. High Pass filter ensures that all the edges of the texture are roughly of the same luminosity. This makes the wrap-around tiling process much easier.

Not only textures benefit from this, but also web page wallpapers. Every self-respecting web page designer knows that too repeating and high-contrast wallpaper makes the text on top difficult to read.

Also, if you've taken a photo of a very shiny surface head-on with a flash, no filter in the world can remove the blaring highlight.

Removing Flash Highlights from Texture Photos

Using digital cameras to grab textures from real life introduces a whole new set of problems. Let's say you find a wonderfully filthy concrete wall in a dark parking garage, which would work perfectly in the gritty urban setting of your game, and want to take a picture. The problem is, that due to the lack of light (and a tripod), you need to use the flash. Knowing that the flash may cause bright flaring reflections if you take the picture facing the wall straight, you shoot at a slightly odd angle. While the results are now bright and crisp, there is still a very visible gradient-like highlight in the middle of the picture, reducing the usable area of the texture.

What many people would think to do in this situation, would be to:

However, both these approaches mean a lot of work, and do not always provide perfect results unless you're willing to spend hours.

This is where the High Pass filter comes in handy. Simply run the filter on it, using a large radius. The rule of thumb is that the radius of the filter should be larger than any detail you want to preserve. Since in this case the detail to be removed (the highlight) is almost the size of the whole picture, feel free to use a radius well above 70. Note that the larger the radius, the longer it takes to process - just as with Gaussian Blur.

As you can see, the High Pass filter not only reduces brightness differences, it also reduces the contrast of the image, paling the colors (this is actually a side effect of filtering, as only part of the signal remains). This often undesired effect can easily be removed by selecting "Fade High Pass" from the Filters menu (or Edit menu in Photoshop 6), changing the layer mode of the fade to Luminosity, then clicking OK. This applies the brightness-changing effect of the filter while retaining the colors. Also at the same time, if you find the effect of the high pass filter too drastic, you can reduce its Opacity.

Since a lot of contrast was lost in the process, finalize the picture by increasing the contrast (or adjusting the Levels, depending on the case) until it looks good, then Fade the contrast effect once more with Luminosity to retain the coloring of the original image. See the difference? Feel the difference of not having had to do extra work?

Creating a texture out of this picture is much easier than the original.

Pattern Overlays and Detail Textures

Whether you were working on a normal texture, or a so-called detail texture, High Pass can greatly help you in creating patterns that can be overlaid on top of textures.

Sometimes it's a nice idea to mix several layers of gritty textures together with the Overlay blend mode. High Pass simply ensures that the small details overlay the underlying texture without larger details interfering, and that the overlay is centered around 50% gray, minimizing the overall luminosity-changing effect of the blend.

Or, let's imagine you're working on a photo-based leather jacket texture. To seam the different photos of the jacket taken from different angles together, you've had to smudge and fade the edges of the layers a lot. Smudging blends the colors nicely, but results in a lack of small detail.

To restore the leather pattern onto the texture, select a section of leather that contains an intact bump map, copy it to a new image, and desaturate, then High Pass it. This keeps the small detail you need, but removes the large ones that would make tiling the pattern difficult. You may also want to Offset the pattern with Wrap Around to bring the edges to the center, then use the Clone tool to make it tile seamlessly - however, you may notice that the smaller High Pass radius you've used, the less seam-sealing you have to do.

,br />

Nevertheless, when you're satisfied with the results, turn this image into a Pattern, and use the Pattern Stamp tool in "Overlay", "Soft Light" or "Hard Light" mode to paint the leather pattern right back on. If the pattern doesn't seem prominent enough, simply increase its contrast before turning it into a pattern.

Detail Textures

The same rules apply for so called detail textures (a fine example of them can be found in games that use the Unreal engine.) Since the very purpose of detail textures is to add small, sharp details to textures up close, they are obviously ideal targets for the High Pass filter. Because the details needed are indeed very small, feel free to use High Pass quite harshly with small radius values.

Multiplicative detail textures are a pretty straightforward case. Just make sure that they are mostly white, and only contain small crisp black details - otherwise they will darken the underlying textures too much when they get MIP-mapped. That, or you need to increase the brightness of all the underlying textures to compensate.

Some newer 3D accelerators support the Indexed Additive blend mode. This blend mode works the same way as the Hard Light blend mode in Photoshop: everything in the bitmap brighter than 50% gray, brightens the underlying bitmap, and everything darker than 50% gray, darkens it. This blend mode is ideal for detail textures and decals, but because not all the older hardware out there supports it, most games still use alpha blended detail textures. Since High Pass automatically shifts the image luminosity to around 50% gray, its results are immediately applicable.

Alpha blended detail textures are probably the most common application today. When working with alpha blended detail textures, it is best that the color map only contains black and white (no grays), and that the total average brightness of the bitmap when summed together is 50% gray. This ensures that the detail texture doesn't lighten or darken the underlying texture when it gets MIP-mapped.

How do you create an alpha blended detail texture that looks and behaves like an indexed additive one? First, start working on the texture as if it was indexed additive, creating a bump map on a 50% gray background. You can actually keep it in Hard Light mode in Photoshop while working, to see what the result will look like. Use the High Pass filter to remove any larger details. Make sure it tiles perfectly and everything.

When you're satisified with the results, turn the texture into a layer, and switch its mode to Difference. Create a new 50% grey Background behind it. As you can now see, all the pixels in the texture, that were either darker than gray, or lighter than gray, show bright against a black background this is the alpha map for the texture. Copy Merged the result into a new layer. As you can see, the more contrast the original detail texture has, the more opaque the alpha map will be. Make sure the contrast isn't too high, or the detail texture will be too prominent and may overrun the underlying textures.

Finally, take the original gray detail texture, switch its blend mode to Normal, and increase its contrast to maximum, so that all colors brighter than gray turn white, and all darker than gray turn black. This eliminates the grayness from the final result. Use this bitmap as the color map, and the "Difference bitmap" as the alpha map for it. The resulting texture behaves very much like an indexed additive detail texture.

And this concludes our feature. These were the primary uses I've come up with for the High Pass filter. Get creative, and you may invent something I never figured out. I sincerely hope these tips will help the texture artists in the industry. Now go impress your project lead.