Question

我正在尝试学习如何利用gl.drawBuffer()功能在WebGL2中的同一程序中进行多个输出。

我看过《 OpenGL ES 3.0编程指南》这本书，在第11章中列出了进行多输出所需要的内容。但是，着色器源示例非常简单，仅输出恒定值。

我想知道是否有人有更好的例子？还是可以解释TextureCoordinates发生了什么变化？在普通的着色器代码中，我将使用它来从输入中查找数据值并将其写出。现在面对多种布局，TextureCoordinates变化如何对应于每个布局？ viewPort的尺寸会怎样？哪个输出纹理对应？

以下是我理解它们的一些步骤：

创建颜色附件数组GL_COLOR_ATTACHMENT0，...
为每个输出创建一个帧缓冲对象
创建输出纹理
对于每个FB：
- BindFramebuffer
- BindTexture
- 将纹理与FBO相关联：frameBufferTexture2D（...，color_attchment_from_step1）
通过颜色附件数组调用drawBuffers

在着色器内部访问如下输出值：

layout(location = 0) out vec4 fragData0;

layout(location = 1) out vec4 fragData1;

Answer 1

您只需要一个帧缓冲对象。您将所有纹理附加到它。所以您的步骤将是

创建一个帧缓冲对象和BindFramebuffer
创建输出纹理
对于每个纹理：
1. 将纹理与FBO相关联：frameBufferTexture2D（...）
创建颜色附件数组GL_COLOR_ATTACHMENT0，...
调用drawBuffers传递颜色附件数组

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert("need WebGL2");
  }
  const vs = `
  #version 300 es
  void main() {
    gl_PointSize = 300.0;
    gl_Position = vec4(0, 0, 0, 1);
  }
  `;

  const fs = `
  #version 300 es
  precision mediump float;

  layout(location = 0) out vec4 outColor0;
  layout(location = 1) out vec4 outColor1;
  layout(location = 2) out vec4 outColor2;
  layout(location = 3) out vec4 outColor3;

  void main() {
    outColor0 = vec4(1, .5, .3, .7);   // orange
    outColor1 = vec4(.6, .5, .4, .3);  // brown
    outColor2 = vec4(.2, .8, .0,  1);  // green
    outColor3 = vec4(.3, .4, .9, .6);  // blue
  } 
  `

  const program = twgl.createProgram(gl, [vs, fs]);

  const textures = [];
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  for (let i = 0; i < 4; ++i) {
    const tex = gl.createTexture();
    textures.push(tex);
    gl.bindTexture(gl.TEXTURE_2D, tex);
    const width = 1;
    const height = 1;
    const level = 0;
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, null);
    // attach texture to framebuffer
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i,
                            gl.TEXTURE_2D, tex, level);
  }

  // our framebuffer textures are only 1x1 pixels
  gl.viewport(0, 0, 1, 1);

  // tell it we want to draw to all 4 attachments
  gl.drawBuffers([
    gl.COLOR_ATTACHMENT0,
    gl.COLOR_ATTACHMENT1, 
    gl.COLOR_ATTACHMENT2,
    gl.COLOR_ATTACHMENT3,
  ]);

  // draw a single point
  gl.useProgram(program);
  {
    const offset = 0;
    const count = 1
    gl.drawArrays(gl.POINT, 0, 1);
  }

  // --- below this is not relevant to the question but just so we
  // --- we can see it's working

  // render the 4 textures
  const fs2 = `
  #version 300 es
  precision mediump float;
  uniform sampler2D tex[4];
  out vec4 outColor;
  void main() {
    vec4 color = vec4(0);
    for (int i = 0; i < 4; ++i) { 
      float x = gl_PointCoord.x * 4.0;
      float amount = step(float(i), x) * step(x, float(i + 1));
      color = mix(color, texture(tex[i], vec2(0)), amount);
    }
    outColor = vec4(color.rgb, 1);
  }
  `;
  const prgInfo2 = twgl.createProgramInfo(gl, [vs, fs2]);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.useProgram(prgInfo2.program);
  // binds all the textures and set the uniforms
  twgl.setUniforms(prgInfo2, {
    tex: textures,
  });
  gl.drawArrays(gl.POINTS, 0, 1);
}
main();

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

WebGL 2.0：同一程序的多个输出纹理

1 个答案: