Overview
Distance field textures are suitable for representing vector art such as fonts or other contour shapes. This article describes how such textures can be generated using simple Adobe Photoshop layer effects.
Requirements:
- Basic knowledge of Adobe Photoshop.
Generating the distance field
1. Create a new high resolution image that will hold the distance field (I used 1024x1024 in my example)
1. Use a black background
2. Put your high resolution shape in a layer above the black background. The shape needs to be transparent on the outside and a solid color on the inside.
3. Apply these layer effects to your shape layer:
- Color overlay (#808080, normal blend mode)
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150)
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150)
4. You can adjust the inner and outer glow size, but they must have the same value for best effect.
5. (optional) Use Image->Reveal All to resize the canvas to show all the glow parts.
6. Use Image->Canvas Size to make the image square (just copy the larger number over the smaller one and click ok)
At this point you can save this high resolution version of the distance field for archiving.
7. Use Layer->Flatten Image to bake all the effects in.
8. Resize the image down to something much smaller (preferably power of two size)
9. (optional) Use Image->Mode->Grayscale (flatten if prompted) to reduce file size.
That's it! Save a copy of this small distance field and enjoy.
Preview
You can get a preview of what the rendered distance field looks like inside photoshop:
1. Use Layer->New Adjustment Layer->Threshold and accept the default threshold value 128.
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath.
Simply toggle that new adjustment layer's visibility to turn the preview on/off.
3. Use Image->Image Size to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result.
How to use it
The low resolution distance field texture retains the contour features as it is scaled. It suffices to discard texels with a value below 0.5 while rendering the texture with a pixel shader or fixed function renderer with alpha testing enabled.
Advanced Usage
Todo...
Pictures
64x64 distance field:
512x512 blowup of distance field, alpha tested:
To-Do List for this Article
- Provide a simple shader that performs the alpha testing
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing
|
