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 

   变成一种纹理。 对于更多vec4，您可以执行此操作

    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和流水线的不同，您可能会免费获得其中的一部分。

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

在WebGL2中，绘图缓冲区是一项必需功能，在WebGL1中它是可选功能。 在WebGL2中，还存在转换反馈，该反馈将顶点着色器（变量）的输出写入缓冲区。