为什么gl.readPixels从Firefox中获得全部0？

2023年5月23日 348次阅读

我正在使用WebGL运行一些图像处理(类似于Brad Larson的
GPUImage或教程
WebGL Fundamentals),然后是消耗像素的CPU步骤.不幸的是,当我调用gl.readPixels时,Firefox中的缓冲区全黑.为什么？

这是一个独立的例子：http://jsfiddle.net/yonran/8C3n5/在Chrome中,结果是,“在帧缓冲区内,有924个黑色像素和100个蓝色像素”,而在Firefox中,结果是,“在帧缓冲区内,有1024个黑色像素和0个蓝色像素.”

这就是我设置帧缓冲的方法：

function createTextureAndFramebuffer(gl, width, height) {
  var outputTexture = createAndSetupTexture(gl);
  // Make the texture the same size as the image.
  gl.bindTexture(gl.TEXTURE_2D, outputTexture);
  gl.texImage2D(
      gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
      gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.bindTexture(gl.TEXTURE_2D, null);

  // create a framebuffer
  var fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  // attach a texture to it.
  gl.framebufferTexture2D(
      gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, outputTexture, 0);
  return {texture: outputTexture, framebuffer: fbo};
}
function createAndSetupTexture(gl) {
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set up texture so we can render any size image and so we are
  // working with pixels.
    // This is necessary for non-power-of-two textures
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  return texture;
}

这是我绘制帧缓冲的方式：

ImageFilter.prototype = {
  ...,
  draw: function() {
    var gl = this.gl;
    // Use the texture
    gl.bindTexture(gl.TEXTURE_2D, this.texture);

    // make this the framebuffer we are rendering to.
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Tell webgl the viewport setting needed for framebuffer.
    gl.viewport(0, 0, this.outputWidth, this.outputHeight);

    gl.useProgram(this.program);
    this.applyUniforms();

    // Draw the rectangle.
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    gl.flush();
  },
  vertexShaderString:
      "attribute vec4 position;\n" +
      "attribute vec4 inputTextureCoordinate;\n" +
      "\n" +
      "varying vec2 textureCoordinate;\n" +
      "\n" +
      "void main()\n" +
      "{\n" +
      "     gl_Position = position;\n" +
      "     textureCoordinate = inputTextureCoordinate.xy;\n" +
      "}\n",
  fragmentShaderString:
      "varying highp vec2 textureCoordinate;\n" +
      "\n" +
      "uniform sampler2D inputImageTexture;\n" +
      "\n" +
      "void main()\n" +
      "{\n" +
      "  gl_FragColor = texture2D(inputImageTexture, textureCoordinate);\n" +
      "}\n"
};

然后我从framebuffer中读取这样的：

gl.bindFramebuffer(gl.FRAMEBUFFER, imageFilter.framebuffer);
var width = imageFilter.outputWidth, height = imageFilter.outputHeight;
var array = new Uint8ClampedArray(width * height * 4);
gl.finish();
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, array);
var blackPixels = 0, bluePixels = 0;
var firstBlueX, firstBlueY;
for (var y = 0; y < height; y++) {
  for (var x = 0; x < width; x++) {
    var idx = 4*(x + y*width);
    var r = array[idx], g = array[idx+1], b = array[idx+2], a = array[idx+3];
    if (r === 0 && g === 0 && b === 0)
      blackPixels++;
    else if (b === 255) {
      bluePixels++;
      if (firstBlueX == null) {
        firstBlueX = x;
        firstBlueY = y;
      }
    }
  }
}
var el = document.createElement("div");
document.body.appendChild(el);
el.textContent = "The first canvas is drawn to a framebuffer and then drawn again on the second canvas. " +
  "Within the framebuffer, there are " + blackPixels + " black pixels and " +
  bluePixels + " blue pixels The first blue pixel is at (" + firstBlueX+ "," + firstBlueY + ") " +
  "(origin is at bottom left).";

我认为这可能是同步问题,但在阅读之前添加gl.finish()或setTimeout并没有帮助.在搜索时,我发现多重采样可能导致帧缓冲为0,但在canvas.getContext调用中设置antialias：false没有帮助.

编辑：我刚试过在readPixels之前设置一个像素,Firefox没有取消设置像素.也许readPixels还没有实现,从14.0.1开始是无操作？

最佳答案 违规行在这里：

var array = new Uint8ClampedArray(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, array);

将类型指定为GL_UNSIGNED_BYTE时,必须传入正确类型的数组或FF失败.这里正确的类型是Uint8Array,而不是Uint8ClampedArray.

如果您检查FF控制台日志,您将看到这是错误消息,通过交换这些数组类型解决：

Error: WebGL: readPixels: Mismatched type/pixels types
点赞