在 RGBA 纹理中编码浮点数据 [英] Encode floating point data in a RGBA texture

问题描述

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

I wrote some WebGL code that is based on floating point textures. But while testing it on a few more devices I found that support for the OES_texture_float extension isn't as widespread as I had thought. So I'm looking for a fallback.

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

I have currently a luminance floating point texture with values between -1.0 and 1.0. I'd like to encode this data in a texture format that is available in WebGL without any extensions, so probably a simple RGBA unsigned byte texture.

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

I'm a bit worried about the potential performance overhead because the cases where this fallback is needed are older smartphones or tablets which already have much weaker GPUs than a modern desktop computer.

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

How can I emulate floating point textures on a device that doesn't support them in WebGL?

推荐答案

如果您知道范围是 -1 到 +1，最简单的方法就是将其转换为某个整数范围，然后再转换回来.使用来自这个答案 将一个从 0 到 1 的值打包成 32 位颜色

If you know your range is -1 to +1 the simplest way is to just to convert that to some integer range and then convert back. Using the code from this answer which packs a value that goes from 0 to 1 into a 32bit color

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

这篇关于在 RGBA 纹理中编码浮点数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！