Packing ints into a vec4 in a shader does not currently work

[gkjohnson]

Apparently bitwise operations are not available in the current version of webgl (??!!!??), meaning ints and uints can't easily be packed into the vec4 color output and unpacked in javascript again.

It may be possible to use these functions to emulate bitwise operations.

[gkjohnson]

WebGL2 will come with bit-shift operators and higher-precision textures, both of which can fix this issue

[gkjohnson]

ThreeJS WebGL2Renderer Issue: mrdoob/three.js#9965

[DanielJoyce]

You can do it webgl you just need to do the shifting youtself via multiplies

/**
* Properly encoding 32 bit float in rgba from here:
* http://www.gamedev.net/topic/486847-encoding-16-and-32-bit-floating-point-value-into-rgba-byte-texture/
*/
vec4 pack( const in float depth ) {
    const float toFixed = 255.0/256.0;
    vec4 result = vec4(0);
    result.r = fract(depth*toFixed*1.0);
    result.g = fract(depth*toFixed*255.0);
    result.b = fract(depth*toFixed*255.0*255.0);
    result.a = fract(depth*toFixed*255.0*255.0*255.0);
    return result;
}

void main() {
  gl_FragColor = pack(gl_FragCoord.z);
}

[gkjohnson]

Thanks @DanielJoyce!

I'd considered packing the values manually -- I'll probably get around to it at some point!