【零基础学WebGL】FrameBuffer blend失真问题

WebGL Framebuffer与Blend功能的影响分析

最新推荐文章于 2024-06-06 16:31:47 发布

原创

最新推荐文章于 2024-06-06 16:31:47 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文探讨了WebGL中使用framebuffer和blend功能对绘制效果的影响。通过示例展示了开启blend后，如何进行多层混合计算，以及framebuffer如何作为额外图层参与混合，导致颜色变化。为避免framebuffer带来的额外混合计算导致内容失真，建议在将framebuffer内容绘制到canvas时关闭blend功能。

本文主旨是探究使用framebuffer特性，对blend功能有何影响。

WebGL Blend

回顾前文，可以通过gl.blend开启WebGL混合功能。

本文再通过绘制一个半透明的蓝色矩形，进一步开启gl.blend之后，浏览器是如何一步步合成最终内容的。

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

const vertexData = [-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0];
setAttribute(program, gl, vertexData, "a_position");
const v_color = gl.getUniformLocation(program, 'v_color');
gl.uniform4f(v_color, 0,0,1,0.5);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);