代码之家 › 专栏 › 技术社区 › Jeff Saremi

WebGL 2.0:来自同一程序的多个输出纹理

webgl2 glsl

0

Jeff Saremi · 技术社区 · 8 年前

我试图学习如何在WebGL2中利用同一个程序实现多个输出 gl.drawBuffer() 能力。

OpenGL ES 3.0编程指南

我想知道是否有人有更好的例子?或者如果有人能解释,不同的结构坐标发生了什么变化?在普通的着色器代码中,我会使用它从输入中查找数据值并将它们写出来。现在面对多个布局,不同的纹理坐标如何对应每个布局?我的视窗的尺寸发生了什么变化?与哪个输出纹理对应?

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

创建颜色附件数组GL_Color_ATTACHMENT0。。。
为每个输出创建帧缓冲区对象
创建输出纹理
对于每个FB:
- 绑定帧缓冲区
- 结合纹理
调用传递颜色附件数组的drawBuffers

layout(location = 0) out vec4 fragData0;

layout(location = 1) out vec4 fragData1;

1 回复 | 直到 8 年前

1

4

gman 8 年前

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

创建帧缓冲区对象并绑定帧缓冲区
创建输出纹理
1. 将纹理与FBO关联:frameBufferTexture2D(…)
创建颜色附件数组GL_Color_ATTACHMENT0。。。

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>