我正试图弄清楚如何在WebGL中进行混合模式。到目前为止，我使用了原生的HTML5 Canvas绘图功能，您可以使用它来完成，例如：
var ctx = new Document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'lighter'
现在，出于性能原因，我正在尝试将其移植到WebGL。然而，我很难理解如何影响WebGL中的混合模式。据我所知，"顶点"着色器决定不同纹理/多边形的哪些片段可见，然后为这些纹理/多边形可见部分的每个像素调用片段着色器。然而，如果我有一个混合模式，如较亮（它采用基础颜色和新覆盖颜色的每个组件中较高的一个），我会对顶点着色器和碎片着色器在这种情况下的作用感到困惑。
此外，在我现在使用WebGL绘制的Pixi.js库中，我相信顶点和片段着色器只有在所有对象都绘制到帧缓冲区后才能调用，换句话说：只有在放置了所有对象后才能调用。（此库使用的着色器可以在此处找到）
有人能解释一下如何在WebGL中正确使用混合模式吗？
"顶点"着色器在绘图空间中定位所有顶点，并在需要时将某些变化的变量传递给片段着色器。
片段着色器是对像素/片段的最终颜色进行所有计算的地方。
那么，混合是从哪里来的呢？
渲染场景时，有最终的颜色缓冲区（帧缓冲区）和深度缓冲区（renderbuffer）。颜色缓冲区保存屏幕上（x，y）位置的某个片段的RGBA值，深度缓冲区保存同一片段的深度值。
如果混合未激活，则如果某个片段具有相同的（x，y）位置，则首先将比较深度分量（当前像素与深度缓冲区中的像素），如果当前渲染的片段更靠近相机，则其颜色将覆盖已写入颜色缓冲区的颜色，否则两个缓冲区将保持不变。
如果启用了混合，则颜色缓冲区的部分将以某种方式更改，更改方式取决于用于混合的方程式。有许多不同的混合模式和方程式可以使用，您只需根据需要进行调整即可。
有用的链接：
- http://learningwebgl.com/blog/?p=859
- http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm（混合段）
希望这能有所帮助。