Sea*_*ied 3 compositing alphablending colors glsl webgl
我正在尝试使用WebGL显示一个简单的效果.当然,这意味着我正在使用GLSL ES 1.0规范中定义的片段着色器语言.
我正在使用的代码主要是从其他来源复制的.它设置一个正方形并使用片段和顶点着色器来确定像素颜色.以下代码将只显示一个白色方块.
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
但是,如果我将alpha分量更改为1.0然后它将显示黑色方块.
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // displays a black square
我假设片段着色器输出的颜色必须与之前的颜色组合.如何确保只有最后一种颜色(不论其alpha值)是否实际被选为要显示的颜色？
或者也许我的订单错了.也许后期阶段与片段着色器中的颜色组合以产生白色.在任何情况下,我都知道正在进行某种混合,因为当我将alpha值更改为0.5时,我得到一个灰色方块.我只是想知道,白色来自哪里？我怎么摆脱它呢？
据我所知,问题与混合功能无关.该代码是在GitHub 这里.在Google Chrome或Firefox中试用.
白色不是来自任何WebGL 混合操作.之所以会发生这种情况,是因为canvas DOM元素与它们所在的网页合成.将canvas DOM元素的背景颜色设置为黑色可以解决问题.这种现象已经在这里写了.但是,最明确的答案来自WebGL规范.可以通过设置WebGLContextAttributes对象的各种属性来定义合成的行为.引用规范:
可选的WebGLContextAttributes对象可用于更改是否定义缓冲区.它还可用于定义颜色缓冲区是否包含alpha通道.如果已定义,则HTML合成器将使用Alpha通道将颜色缓冲区与页面的其余部分组合在一起.
因此,替代解决方案,不涉及将画布的背景设置为黑色,是使用以下Javascript代码请求WebGL上下文
gl = canvas.getContext("experimental-webgl", { alpha: false } );