Single component texture with float

Question

Is there way to create only a texture having single component float value each pixel? I want to draw shadow map into texture, I don't want to use the extension for depth format because it is not good for multi buffer drawing.

I know I can use UBYTE RGBA texture and split float value for each colors, but I afraid of performance effect of that solution.

I know there is a texture format gl.RED in OpenGL 4, if there was such texture format it is suitable for this situation.But It seems WebGL don't have such feature. First I thought gl.ALPHA is that, but it seems different thing. gl.LUMINANCE also seems different thing.

Is there any way to achive single component of float texture in WebGL?

Answer 1

Pack the float into rgba channels. Just use a standard 8 bit per channel rgba texture.

    "vec4 pack_float(float f){",
    "   const vec4 bit_shift = vec4(256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0);",
    "   const vec4 bit_mask = vec4(0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0);",
    "   vec4 res = fract(f * bit_shift);",
    "   res -= res.xxyz * bit_mask;",
    "   return res;",
    "}",

and

    "float unpack_float(vec4 rgba){",
    "   const vec4 bit_shift = vec4(1.0/(256.0*256.0*256.0), 1.0/(256.0*256.0), 1.0/256.0, 1.0);",
    "   float res = dot(rgba, bit_shift);",
    "   return res;",
    "}",