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

Question

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

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

内部格式为 RGBA16F
格式为 RGBA
纹素设置为 FLOAT

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

有人知道如何在帧缓冲区中使用 alpha 透明度吗？任何想法表示赞赏。

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

Answer 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>

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

WebGL framebuffers : gl.clearColor doesn't appear to affect alpha channel within FBO

html

webgl2