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

Question

这个季节几乎已经到来，所以现在是在3D中渲染一些针叶树的最佳时机。正如你从这张模糊的JPG图片中看到的那样，我在最近的three.js中渲染具有透明纹理的面部时遇到了问题（在撰写本文时为73版）：

模型从Blender导出，材料有以下选项（和更多）设置：

  

“transparent”：true，“depthWrite”：true，“depthTest”：true   纹理是带alpha通道的PNG文件。

我尝试在材质上使用不同的alphaTest值，但它仍然留下白色角落。 如何解决这个问题？或者我应该选择非常低聚，风格化的树木？

Answer 1

我自己也在努力解决同样的问题，Three.js不支持订单独立透明度。怎么会有一些解决方法。

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

我认为你最好的选择是：

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