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，但应该可以直接重新映射到您所需的范围。

在RGBA纹理中编码浮点数据

2 个答案: