在 RGBA 纹理中编码浮点数据

Question

我编写了一些基于浮点纹理的 WebGL 代码。但是在更多设备上对其进行测试时，我发现对 OES_texture_float 扩展的支持并不像我想象的那么普遍。所以我正在寻找一个后备。

我目前有一个亮度浮点纹理，其值在 -1.0 和 1.0 之间。我想将此数据编码为 WebGL 中可用的纹理格式，无需任何扩展，因此可能是一个简单的 RGBA 无符号字节纹理。

我有点担心潜在的性能开销，因为需要这种回退的情况是较旧的智能手机或平板电脑，它们的 GPU 已经比现代台式电脑弱得多。

如何在不支持 WebGL 的设备上模拟浮点纹理？

Answer 1

如果您知道您的范围是 -1 到 +1，最简单的方法是将其转换为某个整数范围，然后再转换回来。 Using the code from this answer 将一个从 0 到 1 的值打包成 32 位颜色

const vec4 bitSh = vec4(256. * 256. * 256., 256. * 256., 256., 1.);
const vec4 bitMsk = vec4(0.,vec3(1./256.0));
const vec4 bitShifts = vec4(1.) / bitSh;

vec4 pack (float value) {
    vec4 comp = fract(value * bitSh);
    comp -= comp.xxyz * bitMsk;
    return comp;
}

float unpack (vec4 color) {
    return dot(color , bitShifts);
}

然后

const float rangeMin = -1.;
const float rangeMax = -1.;

vec4 convertFromRangeToColor(float value) {
   float zeroToOne = (value - rangeMin) / (rangeMax - rangeMin);
   return pack(value);
}

float convertFromColorToRange(vec4 color) {
   float zeroToOne = unpack(color);
   return rangeMin + zeroToOne * (rangeMax - rangeMin);
}

Answer 2

这应该是一个很好的起点：http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/

它用于编码到 0.0 到 1.0，但应该可以直接重新映射到您所需的范围。