相当于 webgl 1.0 中的 gl.readBuffer(gl.COLOR_ATTACHMENTx)

Question

我需要渲染 2 个纹理（当然是通过）

var extbuffers = gl.getExtension('WEBGL_draw_buffers');

var tex1 = gl.createTexture();  
//gl.activeTexture(gl.TEXTURE1);  
gl.bindTexture(gl.TEXTURE_2D, tex1);  
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, PVS, PVS, 0, gl.RGBA,gl.FLOAT,null);


var tex2 = gl.createTexture();
//gl.activeTexture(gl.TEXTURE2);  
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, PVS, PVS, 0, gl.RGBA, gl.FLOAT, null);  



gl.bindFramebuffer(gl.FRAMEBUFFER, gl.createFramebuffer());
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex1, 0);  

gl.framebufferTexture2D(gl.FRAMEBUFFER, extbuffers.COLOR_ATTACHMENT1_WEBGL, gl.TEXTURE_2D, tex2, 0);

extbuffers.drawBuffersWEBGL(
// Here, we give it the list of slots we want to draw to.
[
    extbuffers.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
    extbuffers.COLOR_ATTACHMENT1_WEBGL  // gl_FragData[1]
]
);

和片段着色器：

#extension GL_EXT_draw_buffers : require

void main() {

                gl_FragData[0] = vec4(pos,vit);
                gl_FragData[1] = vec4(col,1.0);
}

但现在我的问题是：如何读取纹理？我读过一些类似的问题，但关于 FramebufferRenderbuffer

我想要一个：

gl.readBuffer(gl.COLOR_ATTACHMENT0);
gl.readPixels(...);

gl.readBuffer(gl.COLOR_ATTACHMENT1);
gl.readPixels(...);

谢谢。

编辑：我使用 Webgl 1，但带有 ad hoc 扩展 WEBGL_draw_buffers

Answer 1

创建更多帧缓冲区，将纹理单独附加到这些帧缓冲区，当您想要从纹理中读取时绑定这些帧缓冲区。

有效

create texture1
create texture2

create drawFramebuffer
   attach texture1 as color attachment0
   attach texture2 as color attachment1

create readFramebuffer1
   attach texture1 as color attachment0

create readFramebuffer2
   attach texture2 as color attachment0

现在当你想绘制时绑定drawFramebuffer，当你想从纹理1读取时绑定readFrambuffer1，当你想从纹理2读取时绑定readFrameubffer2

相当于 webgl 1.0 中的 gl.readBuffer(gl.COLOR_ATTACHMENTx)

equivalent of gl.readBuffer(gl.COLOR_ATTACHMENTx) in webgl 1.0

webgl