如何使用WebGL避免透明PNG周围的这些边缘？

Question

我最近为我的webgl片段着色器添加了不透明度，替换了

gl_FragColor = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));

与

vec4 color = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));
gl_FragColor = vec4(color.rgb,  * color.a);

但是自从我做了以后，我的透明png周围出现了一点边缘。

在这里你可以看到蠕虫身体部位周围有一点白色边缘，它们在背景上分层，黑色边缘薄，它们在其他蠕虫部分上分层。

使用旧代码，在添加不透明度之前，或使用Canvas 2D上下文而不是WebGL时，没有边缘：

这是我用于蠕虫身体部位的一个png。如你所见，它周围没有白色边缘，底部没有黑色边缘，它在另一个身体部位上分层

更新：我将SuperPNG导出插件更新为上一版本，它不再为完全透明的像素提供白色。在我看来，边缘实际上仍然存在，但它现在与形状边界颜色相同，所以你几乎看不到它。尽管如此，蜗杆部分后面的薄黑边仍然在这里

之前我曾遇到类似的精灵边缘问题，并在我的getContext（）调用中添加了“premultipliedAlpha：false”来修复它。新代码似乎忽略了它。当我在getContext（）调用中删除或让它时，小边缘会留在我的精灵周围。

这是我的代码：

<script id="2d-fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    uniform sampler2D u_image;
    varying vec2 v_texCoord;
    uniform float alpha;

    void main()
    {
        vec4 color = texture2D(u_image, vec2(v_texCoord.s, v_texCoord.t));
        gl_FragColor = vec4(color.rgb, alpha * color.a);
    }
</script>

...

webglalpha = gl.getUniformLocation(gl.program, "alpha");

...

gl.uniform1f(webglalpha, d_opacity);

有谁知道问题是什么以及如何解决？

Answer 1

考虑使用预乘alpha。将混合模式更改为

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

如果您的图片尚未预先复制，请在着色器中执行此操作

float newAlpha = textureColor.a * alpha;
gl_FragColor = vec4(textureColor.rgb * newAlpha, newAlpha);