带浮动的单组分纹理

Question

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

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

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

有什么方法可以在 WebGL 中实现浮动纹理的单个组件？

Answer 1

将浮点数打包到 rgba 通道中。只需使用标准的每通道 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;",
    "}",

带浮动的单组分纹理

Single component texture with float

webgl