canvas - WebGL 使用不同的混合模式绘制 2d 对象

Question

我正在尝试弄清楚如何在 WebGL 中进行混合模式。到目前为止，我使用的是原生 HTML5 Canvas 绘图功能，您可以使用它来执行以下操作:

var ctx = new Document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'lighter'

现在，出于性能原因，我正在尝试将其移植到 WebGL。但是，我很难理解如何影响 WebGL 中的混合模式。 据我了解，顶点着色器决定不同纹理/多边形的哪些部分是可见的，然后为这些纹理/多边形的可见部分的每个像素调用片段着色器。 但是，如果我有一种混合模式，例如较亮(它采用基础颜色和新的叠加颜色的每个分量中较高的一个)，我会对顶点着色器和片段着色器在这种情况下的作用感到困惑.

更进一步，在我现在用来使用 WebGL 进行绘制的 Pixi.js 库中，我相信只有在所有对象都被绘制到帧缓冲区之后才会调用顶点和片段着色器，换句话说:只有在所有对象都被绘制之后才会被调用。放置。 (该库使用的着色器可以在 here 中找到)

有人可以解释一下如何在 WebGL 中正确使用混合模式吗？

Answer 1

顶点着色器将所有顶点定位在绘图空间中，并在需要时将某些变化变量传递给片段着色器。

片段着色器是完成有关像素/片段最终颜色的所有计算的地方。

那么混合在哪里发生呢？

渲染场景时，有最终的颜色缓冲区(帧缓冲区)和深度缓冲区(渲染缓冲区)。颜色缓冲区保存屏幕上 (x,y) 位置处某些片段的 RGBA 值，深度缓冲区保存同一片段的深度值。

如果混合未激活，则如果某个片段具有相同的 (x,y) 位置，则首先将比较深度分量(当前像素与深度缓冲区中的像素)，并且如果当前渲染的片段更接近相机，它的颜色将覆盖颜色缓冲区中已写入的颜色，否则两个缓冲区都将保持不变。

如果启用混合，则颜色缓冲区的一部分将以一种或另一种方式更改，并且如何更改取决于用于混合的方程式。有许多不同的混合模式和方程式可供使用，您只需根据需要进行调整即可。

有用的链接:

• http://learningwebgl.com/blog/?p=859
• http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm (混合部分)

希望这有帮助。