將浮點數據編碼爲RGBA紋理

Question

我編寫了一些基於浮點紋理的WebGL代碼。但是，在多個設備上測試時，我發現對OES_texture_float擴展的支持並不像我想象的那樣廣泛。所以我正在尋找回退。

我目前有一個亮度浮點紋理值介於-1.0和1.0之間。我想用沒有任何擴展名的WebGL中可用的紋理格式編碼這些數據，所以可能是一個簡單的RGBA無符號字節紋理。

我有點擔心潛在的性能開銷，因爲需要這種回退的情況是舊的智能手機或平板電腦已經比現代臺式電腦有更弱的GPU。

如何在不支持WebGL的設備上模擬浮點紋理？

Answer 1

這應該是一個很好的起點：http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/

它適用於編碼0.0到1.0，但應該很容易重新映射到你的要求的範圍內。

Answer 2

如果您知道您的範圍是-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); 
}