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

Question

我正在尝试将某些内容从OpenGl移植到WebGL。 我发现由于某种原因，当从我的帧缓冲区中调用gl.clearColor(0,0,0,0)似乎根本没有改变alpha值，这与尝试在main上调用该函数相反backbuffer，可以正确呈现透明的backbuffer。

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

• 内部格式为RGBA16F
• 格式为RGBA
• texel设置为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>