WebGL着色器保存多个32位值

Question

我需要在每个WebGL片段着色器调用中保存多达8个32位值（包括没有OES_texture_float或OES_texture_half_float扩展可用时）。似乎我只能通过将其打包成4x8bits RGBA gl_FragColor来存储单个32位值。 有没有办法存储8个值？

Answer 1

在片段着色器中每次调用绘制多个vec4值数据的唯一方法是使用WEBGL_draw_buffers，它允许您将多个颜色附件绑定到帧缓冲区，然后在单个片段中渲染到所有这些颜色附件使用

进行着色器调用

gl_FragData[constAttachmentIndex] = result;

如果WEBGL_draw_buffers不可用，我能想到的唯一解决方法是

1. 在多个绘制调用中进行渲染。

   调用gl.drawArrays呈现第一个vec4，然后再使用不同的参数或不同的着色器呈现第二个vec4。

2. 基于gl_FragCoord渲染，您可以在其中更改每个像素的输出。

   换句话说，第一个像素获得第一个vec4，第二个像素获得第二个vec4，等等。例如

   float mode = mod(gl_Fragcoord.x, 2.);
   gl_FragColor = mix(result1, result2, mode);
   

   这样结果就像这样存储

   1212121212
   1212121212
   1212121212
   

   成一个纹理。对于更多的vec4s，你可以做到这一点

   float mode = mod(gl_Fragcoord.x, 4.); // 4 vec4s
   if (mode < 0.5) {
     gl_FragColor = result1;
   } else if (mode < 1.5) {
     gl_FragColor = result2;
   } else if (mode < 2.5) {
     gl_FragColor = result3;
   } else {
     gl_FragColor = result4;
   }
   

   这可能比方法＃1快，也可能不快。您的着色器更复杂，因为它可能会为每个像素计算result1和result2，但根据GPU和流水线操作，您可以免费获得一些。

至于获得32位值，即使没有OES_texture_float，你基本上也不得不使用上述3种技术中的一种来写出更多的8位值。

在WebGL2中，绘制缓冲区是必需的功能，因为它在WebGL1中是可选的。在WebGL2中，还有转换反馈，它将顶点着色器的输出（变化）写入缓冲区。