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