Webgl 在单个渲染过程中添加正颜色片段和负颜色片段的混合

我正在做一个类似于粒子系统的WebGL项目。出于美观的目的，我的单个渲染过程被配置为添加混合，并且我已经禁用了深度测试。为了便于论证，我还将视口缓冲区清除为50%灰色

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE);
gl.disable(gl.DEPTH_TEST);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

我已将顶点缓冲区和索引缓冲区上载到GPU，表示两个部分重叠的三角形。它们的顶点具有vec3颜色属性。我为每个顶点指定了一种50%灰色（0.5,0.5,0.5）的颜色

当我用着色器绘制三角形时，我可以放心地报告，我的视口缓冲区现在看起来是50%灰色，有两个重叠的三角形区域，它们是白色。三角形是白色的，因为其片段的颜色值与颜色缓冲区中已有的颜色值进行了添加混合

现在，我用以下更改重新上传顶点缓冲区：第二个三角形顶点的颜色现在是-50%灰色（-0.5，-0.5，-0.5，-0.5）

我希望实现的是，我的视口缓冲区看起来是50%灰色，有两个重叠的三角形区域，一个是白色，一个是黑色，它们相交，并在相交处产生50%灰色。毕竟，加一个负数应该与减去一个大小相同的正数相同

我看到的是一个50%灰色的视口，只有一个三角形区域，即白色区域

我假设这是因为片段着色器的输出在与颜色缓冲区混合之前被钳制到下限为零的范围。我想知道如何避免这种夹持-最好是在WebGL中，而不需要多个渲染过程

我将在以下URL的页面源代码中测试解决方案：

更新

作为一项调查，我尝试过在帧缓冲区中执行加法混合，然后通过将帧缓冲区纹理化为一个单位四边形，将其绘制到视口缓冲区–当然，这是两个单独的绘制调用，理想情况下我希望避免

这就是说，因为我可以显式地将帧缓冲区的格式设置为浮点，所以当我在该缓冲区内执行操作时，任何值都不会发生钳位。当我将缓冲区绘制到视口时，我假设钳制最终发生，但到那时所有的混合都已经完成

现在我的问题简单多了：是否有任何方法可以初始化WebGL或OpenGL上下文，使其视口格式化为浮点缓冲区？

使用

gl.blendEquation（gl.FUNC\u SUBTRACT）

。然后在着色器中使用正值

如果你想在中间做些什么，你可以做一些杂乱无章的事情：

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
gl.blendEquation(gl.FUNC_ADD);

它会给你这个等式：

如果将“颜色”设置为（0.5、0.5、0.5、0），现在可以绘制白色三角形，将“颜色”设置为黑色三角形（0.5、0.5、0.5、1）

如果你想要不同的颜色，我希望你能理解。您可以在此处比较不同的混合函数：

编辑： 对不起，我弄错了。你应该改变

gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE);

到

---

我忘记了哪一个是源头，哪一个是目的地。我已经更新了我的答案。

这确实有效，但我忘了提到我打算上传三角形，其片段将具有正值和负值。我会在我的问题中添加这一点。我试图排除测试中的人为错误，但是

gl.blendFuncSeparate（gl.ONE_减_DST_α，gl.ONE减_DST_α，gl.ONE，gl.ONE）

似乎会导致两个黑色三角形，而不管我在你的应用程序或网站中为它们的片段指定了多少字母值，但是我已经制作了一个可以检查的微型版本：使用

vec4颜色属性

。这个混合函数使用alpha值。我已经更新了答案。现在应该没事了

gl.blendFuncSeparate(gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);