Image processing 在WebGL/Javascript中，有没有一种快速的方法可以从几个帧缓冲区获得平均颜色？

我对WebGL这门学科很陌生。 我想做的是计算6个不同帧缓冲区的平均颜色，如下图所示。现在我想知道最好的办法是什么？ 我试着去做

gl.readPixels(0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);

但这似乎很慢。。。 有没有一种方法可以在图形卡上实现这一点

this is how the FBO is set up - I have this from a tutorial:

...

你有两个选择

编写一个片段着色器，通过渲染四边形（1 x textureheight）每行（每个纹理）运行一次，并遍历行中的所有像素并对其进行平均。对平均的行重复此过程，将获得整个图像的平均值。这叫做

调用您的FBO，然后访问最高级别的mipmap（通过获取此mipmap的参数）。现在，您可以在大幅缩小的平均mip图像上使用ReadPixels方法，也可以使用GLSL，这应该会快得多

从我的头顶上

制作6个FBO

确保每个fbo都使用纹理附件，而不是渲染缓冲

将6个场景渲染到6个FBO

对于每个纹理调用gl.generateMipmap（…）

编写一个着色器，使用带有“偏移”选项的texture2D获取6个纹理并平均它们。将“偏移”设置为纹理中的级别数。这是告诉GPU使用最小级别

使用该着色器将单位四边形渲染为1像素fbo（或Backuffer中的1像素）

在该1像素上调用gl.readpixels

我认为着色器会像这样

--片段着色器--

---

太好了，非常感谢。我将对此进行研究。你能举个例子说明如何从FBO获取最小的mipmap吗？你可以简单地调用glGetTexImage（GL_TEXTURE_2D，pixelValues）（）这个问题是关于WebGL的。WebGL中没有glGetTexImage或glGetTexLevelParameter。啊，我的错-我想的是OpenGL而不是构建WebGL的OpenGL ES。您可以做的一个更改是不使用6个FBO-您可以在不同的纹理单位上设置6个纹理，并首先平均每个像素，然后对FBO进行1x1像素四元渲染。那样的话，你只需要两个FBO。

precision mediump float;

uniform sampler2D u_textures[6];
uniform float u_bias;

void main() {
   // since we know we are rendering only with the last mip
   // then there is only 1 texel.
   vec2 center = vec2(0.5, 0.5);
   vec4 sum = 
     texture2D(u_textures[0], center, u_bias) +
     texture2D(u_textures[1], center, u_bias) +
     texture2D(u_textures[2], center, u_bias) +
     texture2D(u_textures[3], center, u_bias) +
     texture2D(u_textures[4], center, u_bias) +
     texture2D(u_textures[5], center, u_bias);
   gl_FragColor = sum / 6.0;
}