attribute float pickingId;

varying float v_pickingId;
varying vec4 v_pickingColor;

varying vec2 v_uv;

// source: https://skytiger.wordpress.com/2010/12/01/packing-depth-into-color/
vec4 packDepth24(in float depth)
{
    // Constants
    const vec3 scale  = vec3(1.0, 256.0, 65536.0);
    const vec2 ogb    = vec2(65536.0, 256.0) / 16777215.0;
    const float normal  = 256.0 / 255.0;

    // Avoid Precision Errors
    vec3 unit         = vec3 (depth, depth, depth);
    unit.gb             -= floor(unit.gb / ogb) * ogb;

    // Scale Up
    vec3 color        = unit * scale;

    // Use Fraction to emulate Modulo
    color               = fract(color);

    // Normalize Range
    color               *= normal;

    // Mask Noise
    color.rg            -= color.gb / 256.0;

    return vec4(color,1.0);
}

void main()
{
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

  v_pickingId = pickingId;

  // note: if you will be inspecting picking framebuffer, bear in mind that the difference between colors may not be visible to a naked eye,
  //       i.e. one object may have color RGB (0,0,1), the other RGB (0,0,2) and guess what? It will appear as if there is absolutely nothing on the image.
  //       Try filling the image with some color in an image editor, e.g. with red red to see if there is anything.
  v_pickingColor = packDepth24 (pickingId);

  v_uv = uv;
}