2

我试图弄清楚如何在 WebGL 中进行混合模式。到目前为止，我使用的是原生 HTML5 Canvas 绘图功能，您可以使用这些功能，例如：

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

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

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

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

4

1 回答 1

2

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

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

那么混合在哪里进行呢？

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

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

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

有用的链接：

希望这可以帮助。

于 2013-09-02T18:10:06.040 回答