片段着色器深度的半浮点值编码 (WebGL 1.0)答案

【问题标题】：Half Float Value Encoding for Depth in Fragment Shader (WebGL 1.0)片段着色器深度的半浮点值编码 (WebGL 1.0)
【发布时间】：2015-09-29 09:35:22
【问题描述】：

我目前有一个工作实现，允许我将深度值编码为浮点纹理。

这里是编码/解码函数：

"vec4 EncodeFloatRGBA( float v ) {",
              "float remainder = v;",
              "vec4 res, r;",

              "res[0] = floor(remainder * 255.0) / 255.0;",
              "remainder -= res[0];",
              "res[1] = floor(remainder * 65535.0) / 65535.0;",
              "remainder -= res[1];",
              "res[2] = floor(remainder * 16777215.0) / 16777215.0;",
              "remainder -= res[2];",
              "res[3] = floor(remainder * 4294967295.0) / 4294967295.0;",

              "r[0] = clamp(floor((v) * 255.0),0.,255.);",
              "r[1] = clamp(floor((v - res[0]) * 65535.0),0.,255.);",
              "r[2] = clamp(floor((v - res[0] - res[1]) * 16777215.0),0.,255.);",
              "r[3] = clamp(floor((v - res[0] - res[1] - res[2]) * 4294967295.0),0.,255.);",

              "r[0] = r[0] / 255.0;",
              "r[1] = r[1] / 255.0;",
              "r[2] = r[2] / 255.0;",
              "r[3] = r[3] / 255.0;",
              "return r;",
  "}",
  
"float DecodeFloatRGBA( vec4 rgba ) {",
              "return dot( rgba, vec4(1.0, 0.003921568627450980392156862745098, 1.5259021896696421759365224689097e-5, 5.9604648328104515558750364705942e-8) );",
"}",

我是这样使用它们的：

//Encoding in depth pass
"vec4 depth = EncodeFloatRGBA(1.0 - gl_FragCoord.z);",
"depth = floor(depth * 255.) * 0.003921568627450980392156862745098;",//simulate 32-bit encoding
"gl_FragColor = depth;",
  
  
//Decoding in color pass  
"loc = vec2(gl_FragCoord.x/canvas_size.x, gl_FragCoord.y/canvas_size.y);",
"float z = DecodeFloatRGBA(EncodeFloatRGBA(1.0 - gl_FragCoord.z));",//current fragment depth
"float z_tex = DecodeFloatRGBA(texture2D(DX2RT, loc));",//depth in texture
//...do some stuff using z and z_tex

但是当涉及到使用半浮点纹理（ipad、ipod）时，这种技术不再适用，我最好完全不使用编码。但在后一种情况下，我仍然会损失一些精度。

是否有人为半浮点纹理设置了类似的技术？

提前谢谢你。

【问题讨论】：

遇到同样的问题，你解决了吗？

标签： webgl precision fragment-shader color-depth

【解决方案1】：

对于某些设备，我禁用了深度编码，对于其他设备，我使用了以下代码：

 "vec4 EncodeFloatRGBA( float v ) {",
    "float remainder = v;",
    "vec4 res, r;",

    "res[0] = floor(remainder * 127.0) / 127.0;",
    "remainder -= res[0];",
    "res[1] = floor(remainder * 16383.0) / 16383.0;",
    "remainder -= res[1];",
    "res[2] = floor(remainder * 2097151.0) / 2097151.0;",

    "r[0] = clamp(floor((v) * 127.0),0.,127.);",
    "r[1] = clamp(floor((v - res[0]) * 16383.0),0.,127.);",
    "r[2] = clamp(floor((v - res[0] - res[1]) * 2097151.0),0.,127.);",

    "r.r = r[0] / 127.0;",
    "r.g = r[1] / 127.0;",
    "r.b = r[2] / 127.0;",
    "r.a = 1.;",
    "return r;",
 "}",


 "float DecodeFloatRGBA( vec4 rgba ) {",
     "return rgba.r + rgba.g/127. + rgba.b/16383.;",
 "}"

【讨论】：