React-Three-Fiber + ThreeJS:雪碧阿尔法边缘非常粗糙

Question

我正在为一个客户的项目工作，我们发现一些透明的标志在他们周围有一个非常丑陋的黑色边框，当它们在they中使用时。我尝试了这么多东西，但都没有运气，所以我希望能帮助阿尔法看起来更好。

Threejs与提供的图像：

​

​

它非常模糊，但当你放大(在应用程序中他们可以在一定程度上)时，你可以看到边框：

​

​

我尝试过的东西：

设置纹理的最小+最大滤镜为LinearFilter/NearestFilter。这是最常见的建议，但您可以在我的代码和工具箱中看到这没有帮助。如果我将其设置为NearestFilter，那么当相机四处移动时，徽标开始变得像素化和别名。

我改变了标准材质的混合模式，我在边缘得到了奇怪的颜色。

我编写了自己的自定义着色器，根据提供的图像的alpha在图像颜色和白色之间混合，但我仍然得到一个奇怪的颜色泄漏。

我使用了alphaTest值，但这最终导致边缘突然结束/看起来不太好。

我在这里演示了我的所有方法：

https://codesandbox.io/s/interesting-wozniak-povk1?file=/src/App.js

我认为我的着色器很接近，但并不完美。我真的很感谢任何关于处理和解决这个问题的正确方法的建议。

Answer 1

你需要增加图像的分辨率，在png上以一半比例的网格看起来更好