相当于 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

Answer 2

2024年我明白了gman在2018年给我的答案，（他的答案很明确，是我理解得特别慢！哈哈）。

这是一个例子来说明他的答案

'use strict';
let canvas= document.querySelector('canvas');
canvas.width=1;
canvas.height=1;
let gl = canvas.getContext('webgl');

const ext = gl.getExtension('WEBGL_draw_buffers');
gl.getExtension("OES_texture_float");
gl.getExtension("WEBGL_color_buffer_float");

const vertCode = `
  void main() {
    gl_Position = vec4(0, 0, 0, 1);
    gl_PointSize = 1.0;
  }
`;

const fragCode = `#extension GL_EXT_draw_buffers : require
  precision highp float;
  
  void main() {
    gl_FragData[0] = vec4(2018);
    gl_FragData[1] = vec4(2024);
  }
`;

const pixels = new Float32Array(4);

const tex1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1,0, gl.RGBA, gl.FLOAT, null);

const tex2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1,0, gl.RGBA, gl.FLOAT, null);

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT0_WEBGL,
  gl.TEXTURE_2D,
  tex1,
  0
);

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

let vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
let program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.useProgram(program);

ext.drawBuffersWEBGL([
  ext.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
  ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
  ]);
  
gl.drawArrays(gl.POINTS, 0, 1);
const readfb1 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, readfb1);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT0_WEBGL,
  gl.TEXTURE_2D,
  tex1,
  0
);

gl.readPixels(
  0,0,1,1,
  gl.RGBA,
  gl.FLOAT,
  pixels,
);
console.log(pixels); 

const readfb2 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, readfb2);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT0_WEBGL,
  gl.TEXTURE_2D,
  tex2,
  0
);

gl.readPixels(
  0,0,1,1,
  gl.RGBA,
  gl.FLOAT,
  pixels,
);
console.log(pixels); 

  <canvas></canvas>