【发布时间】：2014-10-05 20:31:06
【问题描述】：
我最近在我的 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);
有人知道问题出在哪里以及如何解决吗？
【问题讨论】：
-
发生这种情况时的 alpha 值是多少？顺便说一句，v_texCoord 已经是
vec2，不需要单独选择 s 和 t 并创建一个新的vec2。此外，您也可以使用v_texCoord.st，这将是vec2，即使您将来将v_texCoord更改为vec3或vec4。 -
alpha = 1 ，我不会在这部分游戏中改变不透明度。我真是个杂乱无章的人，我没有注意到双 vec2，我用 v_texCoord.st 替换了它，感谢您指出这一点。当然，它并没有解决问题。
-
这篇文章似乎涵盖了同样的问题：answers.unity3d.com/questions/10302/…
-
这个链接很好的解释，至少现在我明白了为什么我有这个优势。我将 SuperPNG 导出插件更新到最新版本，这应该可以解决这个问题。边缘仍然在这里。