使用透明纹理渲染多个重叠面

Question

季节快到了，所以现在是用 3D 渲染一些针叶树的最佳时机。从这张模糊的 JPG 图片中可以看出，我在最新的 three.js（撰写本文时为修订版 73）中渲染具有透明纹理的面时遇到了问题：

模型是从 Blender 中导出的，材质有以下选项（以及更多）设置：

“透明”：真，“深度写入”：真，“深度测试”：真 纹理是带有 alpha 通道的 PNG 文件。

我尝试在材质上使用不同的 alphaTest 值，但它仍然会留下白角。 如何解决这个问题？还是我应该只使用非常低多边形的风格化树？

Answer 1

我自己也遇到过同样的问题，Three.js 不支持与订单无关的透明度。有一些解决方法。

您可以阅读原因：https://github.com/mrdoob/three.js/issues/4724

我认为你最好的选择是：

• 禁用 alpha 混合 - 这样您就不会出现白角。
• 使用 alpha 测试 - 这样使用高分辨率的 alpha 贴图，只要不靠近树木，就应该获得良好的结果。但是会出现一些随机的“像素错误”，其中 alpha 值接近测试值。
• 使用模糊 - 模糊有助于隐藏由 alpha 测试引起的错误，并为您的叶子边缘提供“抗锯齿”效果。