View source for Preprocessing Technique - Distance Field Vector Textures

{|  border="0" 
| {{ContentBlock|width=800|color=white
|content={{!!}}

== 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:'''<br/>
- 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)<br />
1.  Use a black background<br />
2.  Put your high resolution shape in a layer above the black background. The shape must be transparent on the outside and a solid color on the inside.<br />
3. Apply these layer effects to your shape layer:<br />
- Color overlay (#808080, normal blend mode)<br />
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150)<br />
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150)<br />
4. You can adjust the inner and outer glow size, but they must have the same value for best effect.<br />
5. (optional) Use '''Image->Reveal All''' to resize the canvas to show all the glow parts (necessary for effects like drop shadow).<br />
6. Use '''Image->Canvas Size''' to make the image square (just copy the larger number over the smaller one and click ok)<br />

At this point you can save this high resolution version of the distance field for archiving.<br />

7. Use '''Layer->Flatten Image''' to bake all the effects in.<br />
8. Resize the image down to something much smaller (preferably power of two size)<br />
9. (optional) Use '''Image->Mode->Grayscale''' (flatten if prompted) to reduce file size.<br />

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:<br />
1. Use '''Layer->New Adjustment Layer->Threshold''' and accept the default threshold value 128.<br />
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath.<br />
Simply toggle that new adjustment layer's visibility to turn the preview on/off.<br />
3. Use '''Image->Image Size''' to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result.<br />

== 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:<br />
http://lh6.ggpht.com/_fBoewYrxMFA/SWmUXCSQMcI/AAAAAAAAAPs/73jH7qmFiuQ/s144/smiley-dist2.png


512x512 blowup of distance field, alpha tested:<br />
http://lh3.ggpht.com/_fBoewYrxMFA/SWmUXHZ5_cI/AAAAAAAAAP0/EkwufndXZeM/s800/smiley-blowup2.png

== To-Do List for this Article ==
- Provide a simple shader that performs the alpha testing<br />
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing<br />

== References ==
[http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Improved Alpha-Tested Magniﬁcation for Vector Textures and Special Effects, Valve Software]

}}
|  valign="top" | {{Extension_Summary
|name = Technique - Distance Field Vector Textures
|screenshot = 
|description = Using Adobe Photoshop to generate textures suitable for efficient vector art rendering
|version = 1.0
|horde3dversion = 1.0 beta
|released = 2009-01-11
|author = [http://www.horde3d.org/forums/memberlist.php?mode=viewprofile&u=173 Vurlix]|
}}
|}
[[category: Technique]]