This sample deals with distance field rendering, which is a technique by Valve to render glyphs, like decalls and text. The major benefits of this approach are that these distance fields are very efficient to store (128x128 is already quite big) and they still look great at huge magnifications, so no more blurry pixelated artifacts even when the player looks at them from really, really up close.
The technique itself is explained quite thoroughly by the original paper, so we won't be going into much detail about that here. Instead you can find a sample below which you can use to toy with the parameters of the shader used to render the distance field. You can of course make your own distance fields with the tool linked below as well.
About the tool & demo
The tool converts a high resolution input image to a low resolution depth field image based on the supplied parameters. The Block Size parameter determines how many source pixels go into a destination pixel. A block size of 32 for example will convert a 1024x1024 source image to a 32x32 distance field. The Scan Size parameter controls how much of the source image is scanned to construct each pixel in the distance field. Bigger numbers means more processing is required, but it allows for fatter outlines and softer shadows.Please note that the tool currently examines the red color channel only to construct the distance field, so you probably want to use a greyscale source image. The tool outputs white as the color (rgb) and the distance field is stored in the alpha channel. Outputting the original color may sound appealing, but this would re-introduce severe pixelation when viewed up close. Instead you'd typically adjust the shader to colorize the texture at runtime or to use it as a mask for a high-resolution detail map.
The computation of the distance field is done brute-force and pixel access hasn't been optimized, so the tool may take a while for the conversion. Start with a small source image, larger block sizes and a conservative scan size. The default settings (32 block size, 200 scan size) work nicely for a 1024x1024 image, which should be done in under a minute.
To cut a long tale short, the demo shown above is pretty self-explainatory. Just move the sliders to change the effect parameters and find out what they do. I've tried to convert the most interesting magic numbers to shader constants, which worked out quite well. I had to tinker a bit with the outlines code, but that seems quite servicable too now. Don't forget to scroll your mouse to zoom, since that's where this technique really shines. The default texture is a 128x128 distance field, which I think already looks quite amazing at the default 800x600 resolution.
Acknowledgements
This code is heavily inspired by (if not blatantly ported from) the Java code published by OrangyTang.If it wasn't for his kind sharing, I'd probably still be looking at the Valve paper in bewilderment.
Files for this resource
| Filename | Size |
Distance Field Renderer (demo).zip
|
41.2 KB |
|
Distance Field Calculator.zip
|
24.8 KB |
Further reading