opengl-es - 在 RGBA 纹理中编码 float 据

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);
}