three.js - 如何提高基于画布的透明纹理的边缘质量？

Question

我有一个基于画布的透明背景纹理，我正在与我的材质的漫反射颜色进行 alpha 混合。这是使用以下基于此 SO 答案的自定义顶点着色器代码完成的：

vec4 texelColor = texture2D( map, vUv );
gl_FragColor.rgb = mix(gl_FragColor.rgb, texelColor.rgb, texelColor.a);
vec3 surfDiffuse = mix(diffuse, vec3(1,1,1), texelColor.a);

我玩过纹理上的 premultiplyAlpha 设置。这就是我得到的：

• texture.premultiplyAlpha 设置为 false
• texture.premultiplyAlpha 设置为 true

我能做些什么来摆脱纹理周围的暗边？

Answer 1

最好的解决方案是在图像编辑软件中将纹理边缘渗入 alpha（或者在这种情况下制作 rgb 纯色并在 alpha 中使用蒙版）。

所以，而不是：

rgb alpha
-------
BBB 000
BCB 010
BBB 000 //*B = black, C = texture color, 0 = transparent, 1 = opaque

你有过：

rgb alpha
-------
CCC 000
CCC 010
CCC 000

这样，您将拥有完美的边缘。