问题描述
我使用相同的精确C ++代码渲染相同的场景，一次在Windows上的原生OpenGL，一次使用Emscripten到WebGL。场景中的一切看起来完全一样，除非我用alpha！= 1.0渲染。差异如下所示：
I'm rendering the same scene using the same exact C++ code, once to native OpenGL on windows and once using Emscripten to WebGL. Everything in the scene looks exactly the same, except when I'm rendering something with alpha != 1.0. The difference looks like this:
蓝色立方体颜色为（0.0，0.0，1.0，0.5 ）
用于渲染多维数据集的着色器除了绘制颜色之外没有什么作用。
右边是使用OpenGL的外观，它是预期的结果，只是蓝色半透明度。左边是Emscripten + WebGL的外观。它看起来像渲染的颜色实际上（0.5，0.5，1.0，0.5）
我使用的是标准：
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
在WebGL中使用alpha有什么区别吗？
Is there some kind of difference with alpha in WebGL? What can possibly cause this to happen?
推荐答案
您是否将画布设置为非预制版？
Did you set the canvas to be non-premultilied?
gl = someCanvas.getContext("webgl", { premultipliedAlpha: false });
WebGL的默认值为true。大多数OpenGL应用程序的默认值为false
The default for WebGL is true. The default for most OpenGL apps is false
在WebGL的顶部与页面的其余部分合成。至少是画布或其内部（文档的正文）的背景颜色。
On top of that WebGL is composited with the rest of the page. At a minimum that's the background color of the canvas or whatever it's inside (the body of your document).
要查看这是否是问题，请尝试将画布的背景颜色设置为紫色或将伸出的东西。
To see if this is the problem try setting your canvas's background color to purple or something that will stick out
<canvas ... style="background-color: #F0F;"></canvas>
或css
canvas { background-color: #F0F; }
OpenGL应用程序很少合成在任何有效地合成WebGL应用程序的地方。
OpenGL apps are rarely composited over anything where as WebGL apps effectively are ALWAYS composited.
一些解决方案
-
关闭alpha
Turn off alpha
如果您不需要在目的地中使用alpha，可以关闭
If you don't need alpha in your destination you can turn it off
gl = someCanvas.getContext("webgl", { alpha: false });
现在alpha将有效为1
Now the alpha will effectively be 1
在帧结尾处将alpha设置为1
Set the alpha to 1 at the end of a frame
// clear only the alpha channel to 1
gl.clearColor(1, 1, 1, 1);
gl.colorMask(false, false, false, true);
gl.clear(gl.COLOR_BUFFER_BIT);
不要忘记将颜色掩码设置回所有真如果你需要
don't forget to set the color mask back to all true if you needto clear the color buffer later
将画布的背景颜色设为黑色
Set the canvas's background color to black
canvas { background-color: #000; }
α。原因是如果是alpha设置为关闭，浏览器可能在绘制画布到浏览器中时关闭混合。这可能是10-20％或更多的速度增加取决于GPU。不能保证任何浏览器进行优化，只是它可能做到，而与其他2个解决方案不可能或至少不太可能
If possible I'd pick turning off alpha. The reason if is alpha is set to off it's possible the browser can turn off blending when drawing the canvas into the browser. That could be a 10-20% or more increase in speed depending on the GPU. There's no guarantee that any browser makes that optimization, only that it's possible to does whereas with the other 2 solutions it's not possible or at least far less likely
这篇关于Alpha渲染差异OpenGL和WebGL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！