Applying Edge Padding to Alpha Textures

Why do I need to apply edge padding?

Unity renders a scene using a process known as downsampling which uses texture filtering to smoothly render the textures. If the ‘gutters’ (blank areas between UV’s) have colors/transparencies that are very different from the colors inside the UV’d areas, then those colors can ‘bleed’ together which creates seams on the model. This problem will also occur when neighbouring UV shells have different colors; as the texture is downsampled eventually those colors start to mix.

To avoid this problem, edge padding should be added to the empty spaces around each UV shell. Edge padding is the process of dilating the pixels along the inside of the UV edge to spread the colors outward, forming a border of similar colors around the UV shell.

When the UV layout is created, the spacing between the shells should be done with edge padding in mind. If the gutters between the UV shells aren’t at least double the width of the edge padding, neighboring shells will tend to bleed together more quickly.

Unity uses straight Alpha Blending by default. This means that the RGB channels are considered separately from the alpha channel, all the transparency information is stored in the alpha channel.

This example shows how this technique of edge padding can be achieved using Photoshop. Bear in mind that the alpha channel in Unity will be read from the first alpha channel in the Photoshop file.

This technique can be achieved in other software however this example is specifically using Photoshop.

Setting Up

Before doing this, install these alpha utility Photoshop actions: AlphaUtility.atn.zip

After installing these actions, your Action Palette should contain a folder called AlphaUtility:

Applying the Padding

Let’s assume you have your alpha texture with a transparent background inside Photoshop. Something like this:

You will need to duplicate the layer by right-clicking on it in the Layers Palette and selecting ‘Duplicate’. Select the lowest layer in your Layers Palette; this will be source for the dilation of the background. Now select Layer->Matting->Defringe and click OK with the default properties. This blends the pixels along the edge of your image to merge it with the transparent background.

In your actions window run the “Dilate Many” action a couple of times by clicking on the play button. This will expand the background into a new layer.

Now Select all the dilation layers including the original layer selected for dilation and merge all the layers into one using Command-E on a mac and Ctrl-E on windows.

Now we need to copy the transparency into the alpha layer.

To do this set the selection to be the contents of your main layer by Command-clicking on the layer thumbnail in the Layer Palette. Switch to the Channels Palette and select ‘save selection from channel’ from the bottom of the /Channels Palette.

The below image demonstrates how your alpha layer should look. The white area of your alpha layer is the only part of your image that will be visible, the black areas are hiding everything else.

Note that if your image contains transparency (after merging layers), then Unity will take alpha from merged transparency of all layers and it will ignore Alpha masks. A workaround for this is to create a solid color layer at the bottom of your image stack. This should match the general color of your document (in this case, greenish).

Finally save your PSD file and you are now ready to go.