home

Post-processing Outline Effect

This outline effect is done by using sobel edge detection on the normal and depth textures of the scene to produce outlines around geometry. The code for sobel edge is simple and many improved methods exist.

fragment.glsl
void make_kernel_depth( inout vec4 n[9], sampler2D tex, vec2 coord ) {


  float w =  1.0 / ( resolution.x );
  float h =  1.0 / ( resolution.y );


  n[0] = vec4( readDepth( tex, coord + vec2( -w, -h ) ) );
  n[1] = vec4( readDepth( tex, coord + vec2( 0.0, -h ) ) );
  n[2] = vec4( readDepth( tex, coord + vec2( w, -h) ) );
  n[3] = vec4( readDepth( tex, coord + vec2( -w, 0.0 ) ) );
  n[4] = vec4( readDepth( tex, coord ) );
  n[5] = vec4( readDepth( tex, coord + vec2( w, 0.0 ) ) );
  n[6] = vec4( readDepth( tex, coord + vec2( -w, h ) ) );
  n[7] = vec4( readDepth( tex, coord + vec2( 0.0, h ) ) );
  n[8] = vec4( readDepth( tex, coord + vec2( w, h ) ) );


}


void make_kernel_normal( inout vec4 n[9], sampler2D tex, vec2 coord ) {


  float w =  1.0 / ( resolution.x );
  float h =  1.0 / ( resolution.y );


  n[0] = texture2D( tex, coord + vec2( -w, -h ) );
  n[1] = texture2D( tex, coord + vec2( 0.0, -h ) );
  n[2] = texture2D( tex, coord + vec2( w, -h) );
  n[3] = texture2D( tex, coord + vec2( -w, 0.0 ) );
  n[4] = texture2D( tex, coord );
  n[5] = texture2D( tex, coord + vec2( w, 0.0 ) );
  n[6] = texture2D( tex, coord + vec2( -w, h ) );
  n[7] = texture2D( tex, coord + vec2( 0.0, h ) );
  n[8] = texture2D( tex, coord + vec2( w, h ) );


}


vec4 computeSobelEdges ( vec4 m[9] ) {


    vec4 sobel_edge_h = m[2] + ( 2.0 * m[5] ) + m[8] - ( m[0] + ( 2.0 * m[3] ) + m[6]);
    vec4 sobel_edge_v = m[0] + ( 2.0 * m[1] ) + m[2] - ( m[6] + ( 2.0 * m[7] ) + m[8]);
  return sqrt((sobel_edge_h * sobel_edge_h) + (sobel_edge_v * sobel_edge_v));


}