Canvas WebGL使用不同混合模式绘制二维对象

我试图找出如何在WebGL中进行混合模式。到目前为止，我使用了本机HTML5画布绘制功能，您可以使用这些功能，例如：

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

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

更进一步，在我现在使用WebGL绘制的Pixi.js库中，我相信只有在将所有对象绘制到帧缓冲区后，才能调用顶点和片段着色器，换句话说，只有在放置所有对象后。（可以找到此库使用的着色器）

---

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

顶点着色器在绘图空间中定位所有顶点，如果需要，将某些不同的变量传递给片段着色器

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

那么混合是从哪里开始的呢

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

如果混合未处于活动状态，则如果某个片段具有相同的（x，y）位置，则首先将比较深度分量（当前像素与深度缓冲区中的一个像素），如果当前渲染的片段更接近摄影机，则其颜色将覆盖已写入颜色缓冲区的颜色，否则两个缓冲区将保持不变

如果“混合”处于启用状态，则颜色缓冲区的部分将以某种方式更改，更改方式取决于用于混合的方程式。有许多不同的混合模式和方程可以使用，你只需调整他们以满足你的需要

有用链接：

• （调合组）

---

希望这有帮助。

非常感谢您的回答。这对我来说真的很清楚。现在我更好地了解了我要搜索的内容，我也在这里找到了一个关于如何使用混合的很好的解释：