Colors 帧缓冲区和渲染缓冲区的Webgl绑定

我想从帧缓冲区中获取像素颜色。 我尝试绑定一个帧缓冲区，但收到消息“此附件组合不起作用”

}

---

更新#1 我像这样修改了代码。但我总是得到黑色（[0,0,0,0]）。你能说现在怎么了吗

RenderingEngine.prototype.getPixel = function(x, y, drawObject){
var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
framebuffer.width = this.canvas.width;
framebuffer.height = this.canvas.height;

var depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);


// allocate renderbuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, framebuffer.width, framebuffer.height);  

// attach renderebuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

var colorBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
// allocate colorBuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebuffer.width, framebuffer.height);  

// attach colorbuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer);

if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
   alert("this combination of attachments does not work");
}

renderingEngine.draw(drawObject);

var pixel = new Uint8Array(4);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
console.log(pixel);
return pixel;

}

---

更新#2 我的错误是画画。这个代码有效。但是有一些奇怪的事情。渲染场景将水平镜像。你知道为什么吗

RenderingEngine.prototype.getPixel = function(x, y, drawObject){
var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
framebuffer.width = this.canvas.width;
framebuffer.height = this.canvas.height;

var depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);


// allocate renderbuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, framebuffer.width, framebuffer.height);  

// attach renderebuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

var colorBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
// allocate colorBuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebuffer.width, framebuffer.height);  

// attach colorbuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer);

if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
   alert("this combination of attachments does not work");
}

renderingEngine.draw(drawObject);

var pixel = new Uint8Array(4);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
console.log(pixel);
return pixel;
}

这对我有用

函数日志（msg）{
var pre=document.createElement（“pre”）；
pre.appendChild（document.createTextNode（msg））；
文件.正文.附件（pre）；
}
var gl=document.getElementById（“c”）.getContext（“webgl”）；
var framebuffer=gl.createFramebuffer（）；
gl.bindFramebuffer（gl.FRAMEBUFFER，FRAMEBUFFER）；
var depthBuffer=gl.createRenderbuffer（）；
gl.BinderBuffer（gl.RENDERBUFFER，深度缓冲区）；
//分配渲染缓冲区
gl.renderbufferStorage（gl.RENDERBUFFER，gl.DEPTH_COMPONENT16，gl.canvas.width，gl.canvas.height）；
//附加回绝器
gl.framebufferRenderbuffer（gl.FRAMEBUFFER，gl.DEPTH_附件，gl.RENDERBUFFER，depthBuffer）；
var colorBuffer=gl.createRenderbuffer（）；
gl.BinderBuffer（gl.RENDERBUFFER，colorBuffer）；
//分配颜色缓冲区
gl.renderbufferStorage（gl.RENDERBUFFER，gl.RGBA4，gl.canvas.width，gl.canvas.height）；
//附加颜色缓冲区
gl.framebufferRenderbuffer（gl.FRAMEBUFFER，gl.COLOR_附件0，gl.RENDERBUFFER，colorBuffer）；
如果（总账checkFramebufferStatus（总账FRAMEBUFFER）！=总账FRAMEBUFFER\u COMPLETE）{
警报（“此附件组合不起作用”）；
}
gl.clearColor（0.5,0.25,1,1）；
总账清除（总账颜色缓冲位）；
var像素=新的UINT8阵列（4）；
gl.readPixels（0,0,1,1，gl.RGBA，gl.UNSIGNED_字节，pixel）；
对数（像素[0]+”、“+像素[1]+”、“+像素[2]+”、“+像素[3]）
canvas{边框：1px纯黑；}

引自：
需要注意的是，WebGL仅承诺3种附件组合。根据规定，附件的唯一保证组合为：

COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 renderbuffer
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer

您只附加了一个深度渲染缓冲区。您还需要附加颜色渲染缓冲或颜色纹理。我不认为你只能渲染到深度渲染缓冲区。我改变了我的代码如下：我复制了你的更新到你上面的问题。请删除下面的两个答案好吗？把你的问题的更新作为答案来发布是不太合适的。否则，至于它为什么翻转，我想你是指垂直方向而不是水平方向？请记住WebGL中的0,0是左下角。为什么是136？第一种颜色是0.5，或者255*0.5不是136ahh ok RGBA是4位浮动的（整数中的4位=0..15）。136 = (8/15) * 255 ; 68 = (4/15) * 255 !
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 renderbuffer
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer