对 RGBA 纹理中的浮点数据进行编码

Question

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

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

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

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

Answer 1

如果您知道您的范围是 -1 到 +1，最简单的方法是将其转换为某个整数范围，然后转换回来。使用此答案中的代码，该代码将从 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，但应该可以直接重新映射到所需的范围。