javascript - Three.js - 在进行 GPU 乒乓球运动时设置不同的透明颜色

Question

尝试在 Three.js 中使用 GPU 乒乓来实现某些内容，但我遇到了一个奇怪的问题，即为渲染器设置清晰的颜色似乎会覆盖负责渲染内容的片段着色器的输出。

如果我将透明颜色设置为白色，像素就会变成白色。如果我将其保留为默认黑色，则像素的颜色正确。

如果不需要的话，我宁愿不画飞机。

我还不确定这是否是 Three.js 特有的东西，或者它是否是 OpenGL ES2 固有的，因为我确实尝试直接设置透明颜色 (render.getContext().clearColor(1.0,1.0,1.0,1.0) ) ) 但最终得到了相同的结果。

非常感谢任何帮助或指示!

Answer 1

如果启用混合，背景颜色可能会影响您的渲染。如果您不需要混合，请使用以下命令禁用它:

glDisable(GL_BLEND);

如果您确实需要混合，事情可能会变得稍微复杂一些。一些最常用的混合函数，例如曾经流行的:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

适用于任何背景颜色。例如，使用此混合函数，如果您在白色背景上渲染不透明的红色(片段的 Alpha = 1.0)，您仍然会得到红色。

其他一些混合函数仅适用于黑色背景。例如，如果您使用添加剂混合:

glBlendFunc(GL_ONE, GL_ONE);

在白色背景上渲染任何内容只会使其保持白色。嗯，因为它增加了白色，所以它会“比白色更白”，但这只适用于洗衣粉广告。 :)

请注意，上面的代码行适用于 OpenGL 的 C/C++ 绑定(bind)。我希望它们能够轻松地转换为 WebGL/Three.js。