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?

What leads you to believe that using the depth_texture extension is bad for multi buffer drawing?! — LJᛃ
If it was color texture type, it can be used for multiple targets. But, I don't think depth buffer can accept multiple texture. — kyasbal
You can enable OES_texture_float and then create gl.LUMINANCE, gl.FLOAT or gl.ALPHA, gl.FLOAT textures. Not OES_texture_float is pretty much only available on desktop machines not mobile. — gman

WacławJasper WacławJasper · Accepted Answer · 2015-09-14T21:16:34

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;",
    "}",

Single component texture with float

1 Answers