title: Outlining a font with a shader and using distance field
body: <p>I am using a BitmapFont generated by Hiero. I followed this great guide <a href="https://github.com/libgdx/libgdx/wiki/Distance-field-fonts" rel="nofollow">https://github.com/libgdx/libgdx/wiki/Distance-field-fonts</a> to use correctly distance field.
  I also use the shaders provided in the guide. Everything works great.</p>
  
  <p>Near the end, it is mentioned in the guide that on top of the distance field antialias, it should be easy to add an outline to the font from the shaders provided. It has something to do with tweaking the <strong>distance</strong> parameter. I am sure it is easy for somebody who knows how to deal with shaders. But I don't.</p>
  
  <p>Here is the frag code</p>
  
  <pre><code>#ifdef GL_ES
  precision mediump float;
  #endif
  
  uniform sampler2D u_texture;
  
  varying vec4 v_color;
  varying vec2 v_texCoord;
  
  const float smoothing = 1.0/16.0;
  
  void main() {
      float distance = texture2D(u_texture, v_texCoord).a;
      float alpha = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);
      gl_FragColor = vec4(v_color.rgb, alpha);
  }
  </code></pre>
  
  <p>And here is the vert code:</p>
  
  <pre><code>uniform mat4 u_projTrans;
  
  attribute vec4 a_position;
  attribute vec2 a_texCoord0;
  attribute vec4 a_color;
  
  varying vec4 v_color;
  varying vec2 v_texCoord;
  
  void main() {
      gl_Position = u_projTrans * a_position;
      v_texCoord = a_texCoord0;
      v_color = a_color;
  }
  </code></pre>
  
  <p>From here how to add an outline with the shader?</p>