webgl - 带 float 的单组分纹理

Question

有没有办法只创建一个纹理，每个像素只有一个分量浮点值？我想将阴影贴图绘制到纹理中，我不想使用深度格式的扩展，因为它不适合多缓冲区绘制。

我知道我可以使用 UBYTE RGBA 纹理并为每种颜色拆分浮点值，但我担心该解决方案的性能影响。

我知道OpenGL 4中有一种纹理格式gl.RED，如果有这样的纹理格式就适合这种情况。但是WebGL好像没有这个功能。首先我以为 gl.ALPHA 就是那个，但它似乎是不同的东西。 gl.LUMINANCE 似乎也不同。

有没有办法在 WebGL 中实现 float 纹理的单个组件？

Answer 1

将 float 打包到 rgba channel 中。只需使用标准的每 channel 8 位 rgba 纹理。

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

和

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