WebGL 帧缓冲区：gl.clearColor 似乎不会影响 FBO 中的 alpha 通道答案

【问题标题】：WebGL framebuffers : gl.clearColor doesn't appear to affect alpha channel within FBOWebGL 帧缓冲区：gl.clearColor 似乎不会影响 FBO 中的 alpha 通道
【发布时间】：2017-06-26 17:00:54
【问题描述】：

我正在尝试将某些内容从 OpenGL 移植到 WebGL。我发现由于某种原因，gl.clearColor(0,0,0,0) 在从我的帧缓冲区中调用时似乎根本没有改变 alpha 值，而不是尝试在主后备缓冲区上调用该函数，从而正确渲染后备缓冲区透明.

我相信我在 Fbo 上正确设置了 RGBA 纹理-

内部格式为 RGBA16F
格式为 RGBA
纹素设置为浮点数

（请注意，我记得内部格式通常也是 RGBA，但这会在 WebGL2 中引发错误，因为它与其他设置的组合无效）

任何人都知道如何让 alpha 透明度在帧缓冲区中工作？任何想法都表示赞赏。

编辑：忘了注意在我的 OpenGL 代码中我没有使用混合

【问题讨论】：

欢迎来到 Stack Overflow。如果您需要调试帮助您必须创建一个最小可验证的完整示例并将其放入问题本身。现在你基本上是在说“我认为我做的一切都是对的，但它不起作用”现在呢？我的水晶球目前正在维修中......

标签： html webgl2

【解决方案1】：

您是否启用了对浮点纹理的渲染？如果不检查并启用 EXT_color_buffer_float 扩展，您将无法渲染到浮点或半浮点目标。

否则它适用于下面。

function main() {
  const gl = document.querySelector("canvas").getContext("webgl2");
  if (!gl) {
    alert("need WebGL2");
    return;
  }
  const ext = gl.getExtension("EXT_color_buffer_float");
  if (!ext) {
    alert("need EXT_color_buffer_float");
    return;
  }
  const tx = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tx);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, 1, 1, 0, gl.RGBA, gl.FLOAT, null);
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tx, 0);

  gl.clearColor(.1, .2, .3, .7);
  gl.clear(gl.COLOR_BUFFER_BIT);
  const floatPixel = new Float32Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, floatPixel);
  console.log("framebuffer:", floatPixel);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  const uint8Pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, uint8Pixel);
  console.log("canvas:", uint8Pixel);

  // render it
  function createShader(gl, type, src) {
    const sh = gl.createShader(type);
    gl.shaderSource(sh, src);
    gl.compileShader(sh);
    return sh;
  }

  const vs = createShader(gl, gl.VERTEX_SHADER, `#version 300 es
  void main() {
    gl_PointSize = 300.0;
    gl_Position = vec4(0, 0, 0, 1);
  }
  `);
  const fs = createShader(gl, gl.FRAGMENT_SHADER, `#version 300 es
  precision mediump float;
  uniform sampler2D tex;
  out vec4 color;
  void main() {
    color = texture(tex, vec2(.5));
  }
  `);

  const prg = gl.createProgram();
  gl.attachShader(prg, vs);
  gl.attachShader(prg, fs);
  gl.linkProgram(prg);
  gl.useProgram(prg);
  gl.drawArrays(gl.POINTS, 0, 1);
}

main();

div { color: red; font-size: xx-large; }
canvas { position: absolute; left: 0; top: 0; z-index: 2 };

<div>behind</div>
<canvas></canvas>

【讨论】：

感谢格雷格的回答！我确实启用了扩展。除了这个奇怪的地方，我的 FBO 按预期工作，并且可以操纵 alpha，只是清算功能似乎不起作用。在对着色器进行了更多调整之后（我已经弄乱了一点以尝试纠正一个单独的问题）并打开混合，我设法让行为更接近我想要的。将您的答案标记为正确，因为它可能对其他人有所帮助。再次感谢！