opengl-es - WebGl 将 float 打包到 v4 中

Question

我有来自 threejs 示例的代码示例 [ http://threejs.org/examples/#webgl_animation_cloth]其中浮点值被转换为 vec4。我在其他几个论坛上看到过这种逻辑，但没有解释。

1. 有人可以解释一下这个逻辑在做什么以及 256 的用途吗？我理解按位掩码和移位。

我也看过这个链接Packing float into vec4 - how does this code work?

1. 它说vec4最终会被存储在一个32位的RGBA8缓冲区中。
   由于我们将深度值传递到颜色缓冲区，opengl 如何知道如何处理它？

2. 此外，由于 vec4 有 4 个组件，每个组件有 4 个字节，所以它有 16 个字节，也就是 16 * 8 位，这如何适合 32 位 RGBA8？

        vec4 pack_depth( const in float depth ) {
          const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 *   
          256.0,256.0,1.0);
          const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 /  
          256.0);
          vec4 res = fract( depth * bit_shift );
          res -= res.xxyz * bit_mask;
          return res;
          }
   
       void main() {
           vec4 pixel = texture2D( texture, vUV );
           if ( pixel.a < 0.5 ) discard;
           gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
       }
   

Answer 1

与@WaclawJasper 的回答一起，此代码将浮点值(32 位)“深度”打包为 4 个 8 位值。

gl_FragData[ 0 ] 呈现纹理中的单个像素，在本例中为每个 channel 8 位的纹理(总共 32 位)。如果我写

gl_FragData[0] = vec4(0.25, 0.5, 0.75, 1.0);

被写入的纹理(假设它是一个 8 位纹理)将实际获取值

r = Math.floor(0.25 * 255) = 63;
g = Math.floor(0.5  * 255) = 127;
b = Math.floor(0.75 * 255) = 191;
a = Math.floor(1.0  * 255) = 255;

规范中的实际公式是有效的

unsignedIntValue = floor(clamp(floatValue, 0., 1.) * (pow(2., numberOfBits) - 1.));

所以即使 pack_depth 返回一个 floats 的 vec4 并且 gl_FragData 被定义为 vec4 它最终会在写入任何 WebGL 时被转换当前正在写入( Canvas 、渲染缓冲区、纹理)。

如果写入浮点纹理 pack_depth 将是不必要的。由于 pack_depth 正在做的事情，我们可以推断它正在写入 8 位 RGBA 纹理。

为什么会有这种需求？因为在 WebGL 中对浮点纹理的支持是可选的。因此，如果用户的机器不支持浮点纹理，而您需要类似浮点的数据(例如阴影贴图的深度缓冲区)，那么将数据打包到 8 位纹理中是一种解决方案。