Well we’re on number 7 and it’s time to start using the fields for some more interesting rendering. This post will focus exclusively on adding to the signed distance field shader some exciting new modes with which to render the field! All the code can be found on github here.
Soft Borders
The first and arguably one of the most useful tools in the SDF toolkit is the ability to render soft borders to your geometry. Thus far the most advanced aspect of our SDF shader is the ability to render a solid shape with coloured borders and a coloured background. However, zooming in on our cat:
You can see that even though this is rendered using a 512×512 pixel field, we still get jaggy edges. This is no longer down to a quality issue with the field – we’ve simply hit the resolution of the screen, and, unable to blend, have had to choose for each pixel 1 of 3 colours (background, border or fill). Naturally we’ll see ‘stepping’ occurring along the edges, otherwise known as aliasing.
To address it, we’ll add a new mode to the sdffunc function in SignedDistanceField.shader:
else if (_Mode == 7) //SoftBorder
{
float d = sdf.r + _Offset;
if (d < -_BorderWidth)
{
//if inside shape by more than _BorderWidth, use pure fill
res = _Fill;
}
else if (d < 0)
{
//if inside shape but within range of border, lerp from border to fill colour
float t = -d / _BorderWidth;
t = t * t;
res = lerp(_Border, _Fill, t);
}
else if (d < _BorderWidth)
{
//if outside shape but within range of border, lerp from border to background colour
float t = d / _BorderWidth;
t = t * t;
res = lerp(_Border, _Background, t);
}
}
Here the distance is calculated as normal. Just like the ‘solid with border’ mode, we take the fill colour if d < -_BorderWidth, and stick with the background colour if d > _BorderWidth. However, within the border region we:
- Calculate a value (t) between 0 and 1 based on signed distance (d) from the geometry
- Multiply t by itself to get a curvy blend instead of a linear blend
- Use t to lerp from the border colour to either the fill or background depending on whether inside or outside or the geometry
The result is a gentle blend from Background to Border to Fill at the edge of the field:
And of course, as usual, we can play with the border width and offset variables to make thinner/fatter the border or the whole cat:
Neon (aka bloom)
Our human brains assume something is emitting or reflecting bright light if it appears ‘saturated’, turning from coloured to white at the brightest point. A classic example of this is a neon sign, which appears coloured around the edges but almost-white at the centre:
This fun effect was produced with some very simple code:
else if (_Mode == 8) //Neon
{
float d = sdf.r + _Offset;
//only do something if within range of border
if (d > -_BorderWidth && d < _BorderWidth) { //calculate a value of 't' that goes from 0->1->0
//around the edge of the geometry
float t = d / _BorderWidth; //[-1:0:1]
t = 1 - abs(t); //[0:1:0]
//lerp between background and border using t
res = lerp(_Background, _Border, t);
//raise t to a high power and add in as white
//to give bloom effect
res.rgb += pow(t, _NeonPower)*_NeonBrightness;
}
}
As with the soft border effect earlier, we utilise the distance value and the border with to get a value (t) called the interpolator. In this case we manipulate it mathematically to be a value that goes from 0 to 1 to 0 around the edge of the geometry. Again, similar to the soft border, we then use ‘t’ to interpolate from background colour to border colour.
The extra ingredient, using 2 new parameters, raises ‘t’ to a high power (make it a ‘sharp curve’), then simply adds it to the output colour. This is in effect adding some whiteness into the output which sharply curves up in brightness close to the edge of the geometry.
Technically speaking this is a simulation of the common ‘bloom’ effect, usually applied as a post effect in games to highlight bright areas of the screen. Whilst good quality bloom can be tricky to achieve on low end devices, if you just want some neon looking text or objects, the SDF approach can be extremely effective with no real GPU overhead.
Edge Textures
Up until now we’ve used some simple maths to blend between various colours at the edge of the field – first to provide simple softened edges, then to get a neon style effect that simulates bloom. However, to get a more flexible (and art driven) effect, we can use ‘edge textures’. Note: these are often referred to as ‘gradient textures’, but ‘gradient’ is an important term with different meanings in SDFs, so I’m reserving it for later!
Here a similar algorithm to the earlier ones has been used, however the ‘t’ value calculated from distance-to-edge has been used to sample the following texture, created in Paint.Net:
The code is relatively simple, and very similar to the earlier effects
else if (_Mode == 9) //Edge Texture
{
float d = sdf.r + _Offset;
if (d < -_BorderWidth)
{
//if inside shape by more than _BorderWidth, use pure fill
res = _Fill;
}
else if (d < _BorderWidth)
{
//if inside shape but within range of border, calculate a
//'t' from 0 to 1
float t = d / _BorderWidth; //[-1:0:1]
t = (t+1)*0.5; //[0:1]
//now use 't' as the 'u' coordinate in sampling _EdgeTex
res = tex2D(_EdgeTex, float2(t,0.5));
}
}
Just as with the soft border we’re taking the _Fill colour if inside the geometry by more than _BorderWidth, or sticking with the background colour if outside the geometry by more than _BorderWidth. Within the border, we calculate an interpolator (t), and use it to sample the new _EdgeTex texture parameter.
Note that this arguably only needs a ‘1D’ edge texture, but as they don’t really exist, the shader simply samples horizontally along the centre of a 2D texture (i.e. at v = 0.5).
One of the benefits of this effect is that with little effort we can get stylistic colouring that’d be a pain to reproduce mathematically. For example, using this edge texture:
We get this rather stylish kitty:
Drop shadows
This classic effect is incredibly useful for HUDs in games, as it helps deal with the fact that you can’t rely on your in game UI elements always being drawn on top of the same coloured background. Score text in the top left will be over a dark background in a night scene, and a bright background in a day scene. The solution is generally to add a ‘shadow’ to your text or HUD elements, so their outline can be made out whatever the background:
The basic effect is often achieved without SDFs by simply rendering the geometry twice, first the shadow at a slight offset, then the fill over the top. Our SDF version takes pretty much the same approach:
else if (_Mode == 10) //Drop shadow (Blog post 7)
{
//sample distance as normal
float d = sdf.r + _Offset;
//take another sample, _ShadowDist texels up/right from the first
float d2 = tex2D(_MainTex, uv+_ShadowDist*_MainTex_TexelSize.xy).r + _Offset;
//calculate interpolators (go from 0 to 1 across border)
float fill_t = 1-saturate((d-_BorderWidth)/_BorderWidth);
float shadow_t = 1-saturate((d2-_ShadowBorderWidth)/_ShadowBorderWidth);
//apply the shadow colour, then over the top apply fill colour
res = lerp(res,_Border,shadow_t);
res = lerp(res,_Fill,fill_t);
}
The sdffunc function is now being passed an extra argument- the uv from which it was read. We use this combined with the new _ShadowDist parameter and the texel size of the signed distance field to take a 2nd sample from the field, offset diagonally from the 1st. Note that unity sets things up such that _MainTex_TexelSize.xy = [1/_MainTex.width,1/_MainTex.height].
Next, some simple maths is applied to each of the distance samples to give an interpolator (t) that starts at 1 ‘inside’ the geometry, and transitions to 0 over the border. These are calculated for the fill as normal, and then for the shadow using the new _ShadowBorderWidth parameter. The purpose of these interpolators is to allow us to create soft transitions, as with the earlier soft border effect.
Finally, the shadow is applied using our _Border parameter for the colour, then the fill on top of it. The basic result with a small border width and identical shadow border width looks like this:
Nice! However this basic setup has 2 key issues that none SDF based approaches also suffer from. Firstly, a shadow only shows in one direction, meaning the full geometry wont always be outlined (sometimes but not always desirable). Secondly, too large a shadow distance shows ugly areas that highlight we’re just rendering 1 image on top of another:
Fortunately, with the SDF approach, our ability to adjust the size of the shadow’s border means we can address both these issue at once, fattening the shadow to hide concave areas and give some subtle outline all round the shape:
Morphing
The final basic effect for this section is the ability to morph between different fields very easily. Here, for example, is a circle morphing into a cat:
First up, we’ll add a simple function into the shader that evaluates the field for a centered circle:
float4 centeredcirclesdf(float2 uv, float radius)
{
//calculate offset from [0.5,0.5] in uv space, then multiply
//by _MainTex_TexelSize.zw to get offset in texels
float2 offset_from_centre = (uv - 0.5) * _MainTex_TexelSize.zw;
//signed distance for a circle is |offset| - radius
float signeddist = length(offset_from_centre) - radius;
//build result: [signeddist,0,0,1]
float4 res = 0;
res.x = signeddist;
res.yz = 0;
res.w = 1;
return res;
}
Any field could be used, but for the sake of the demo, this saves us generating the field texture for a circle and passing it through as a parameter (call that an exercise for the reader!).
Next, we’ll create a new function called samplesdf. This will be a wrapper that replaces our existing tex2D calls:
float4 samplesdf(float2 uv)
{
//sample distance field
float4 sdf = tex2D(_MainTex, uv);
//if we want to do the 'circle morph' effect, lerp from the sampled
//value to a circle value here
if(_CircleMorphAmount > 0)
{
float4 circlesdf = centeredcirclesdf(uv,_CircleMorphRadius);
sdf = lerp(sdf, circlesdf, _CircleMorphAmount);
}
return sdf;
}
The first line simply samples the input distance field at the given uv as normal. If _CircleMorphAmount > 0 we then go on to sample the circle distance field. The 2 distance samples are then combined with a lerp to get a result, which is returned.
Finally, existing calls to tex2D, such as that in the core fragment shader are replaced with calls to samplesdf:
//sample distance field
float4 sdf = samplesdf(i.uv);
All we are doing here is sampling the distance for 2 fields (in this case a cat and a circle) and lerping between them. The result can be fed into any of the existing effects and it just works:
Whilst you may not find many opportunities in games to morph between cats and circles, this simple effect can be a very efficient way of creating elegant UI transitions such as dialog boxes appearing / disappearing. In the past I’ve also made more creative use of it to animate lightning and particle based effects (shameless No Stick Shooter plug)!
Summary
This section has covered a variety of ways to use the distance sampled from a field to achieve simple effects, generally falling into a few categories:
- Avoiding aliasing with soft borders
- Creating border effects
- Creating drop shadows
- Transitions (aka morphing)
By combining and tweaking these in different ways, simple low resolution distance fields can create a huge range of effects, all of which can of course be animated and used either in game (if the style is right) or for very flexible UI elements.
However, an issue thus far is that all the effects above have been pretty ‘1 dimensional’. All they’ve really used is the distance, and as such the type of effects is fairly limited. In the next blog I’ll get on to how field gradients and noise can make things more interesting.
Shader Fun 