Hi fellow WebGL developers,
I'm trying to render a set of triangles with multi-sample-anti-aliasing MSAA enabled in WebGL2. Therefore, I'm setting up rendering pipeline with a multisample renderbuffer to render to a target texture. Anti-aliasing seems to work, however if I try to render the scene to a transparent renderbuffer, the anti-aliasing seems gradually blend to the opaque background color despite it being fully transparent.
In the example image below, a set of green rgb(0,1,0,1) triangles is drawn: first with background clear color set to gl.clearColor(0, 0, 0, 0) - second with clear color set to gl.clearColor(1, 0, 0, 0) - (The resulting texture is blended on a white background to show the results).
How can I render the scene to a transparent texture with anti-aliasing going gradually from rgba(0,0,255,1) to rgba(0,0,0,0)?
//initialization code
gl.frameBufferAA = gl.createFramebuffer();
//render code
let renderBufferAA = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBufferAA);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, gl.getParameter(gl.MAX_SAMPLES), gl.RGBA8, texDst.width, texDst.height);
//attach renderBufferAA to frameBufferRenderBuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, gl.frameBufferAA);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, renderBufferAA);
gl.clearColor(0, 0, 0, 0); //<--- transparent color affects anti-aliasing
gl.colorMask(true, true, true, true);
gl.clear(gl.COLOR_BUFFER_BIT);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
//blit renderBuffe
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, gl.frameBufferAA);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, gl.frameBuffer1);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texDst, 0);
gl.blitFramebuffer(
0, 0, texDst.width, texDst.height,
0, 0, texDst.width, texDst.height,
gl.COLOR_BUFFER_BIT, gl.NEAREST
);
gl.deleteRenderbuffer(renderBufferAA);
I've created a jsfiddle to isolate the problem. The fiddle draws an anti-aliased red circle. The pixels created by anti-aliasing are fading to green which is the clear-color of the multisample renderbuffer. The problem seems to be related to alpha=false creation parameter of the webgl2 context.
--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/35f91292-459c-4143-a395-cbda626d6d43%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/92a3af4f-eff7-4fea-87da-4a784d83cf2c%40googlegroups.com.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-d...@googlegroups.com.
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-d...@googlegroups.com.
Hi Ken,thanks for the pointer to the blog post. For the question whether the background elements in the dom could have an effect on the artifacts: if I understand correctly setting alpha=false on the rendering context should prevent any interaction between blending within the canvas and outside.
Do you say premultiplication required forgl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);to work correctly inside the webgl canvas? Should it be executed in the fragment shader before rendering to the MSAA buffer? I've played with several configurations, but couldn't finda solution to this problem yet.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/0a5d7c3a-bc55-43d4-bffe-6abdcd2add55%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CAMYvS2djQxUWEOcxAao_V%3DrtPdjp_4WOZDMOi%2BXYskN%3DRNxjhg%40mail.gmail.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CANxMeyAjH%3DdszrFeSojHjOjGEaXB9oddLdHQnyQ%2BH7pu7Pgj8A%40mail.gmail.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/0a5d7c3a-bc55-43d4-bffe-6abdcd2add55%40googlegroups.com.
--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-d...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CAMYvS2djQxUWEOcxAao_V%3DrtPdjp_4WOZDMOi%2BXYskN%3DRNxjhg%40mail.gmail.com.
That's true, but setting alpha:false on the canvas element is strongly discouraged, as it has performance implications on several platforms. See the WebGL Best Practices:
--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/87e76050-b504-4dcf-b62c-5760a07e20fc%40googlegroups.com.
Thanks again for your help.
--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/87e76050-b504-4dcf-b62c-5760a07e20fc%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CAMYvS2eEOvBuhGEbqr0XfGfazCKQDNAV7abS146WUHx5G5kUYw%40mail.gmail.com.
On what platform and browser did you observe this? Do you have a test case demonstrating it?
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/CAOztSJ1XREE00WJmP_B%3DAu%2BfBp4wCBV2-Cofet1wisbcoHUnGw%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/ff1ded84-d329-426f-91e0-d5ce64125c8c%40googlegroups.com.