three.js - 转换导出的 Blender 纹理以与 Three.JS 一起使用

Question

我正在尝试获取一个已导出的混合器模型以正确显示，但看起来叶子的纹理没有作为 alpha 正确混合(尽管树干本身工作正常)。这是我所看到的:

请注意叶子如何不正确地混叠(即它应该看起来像一棵有叶子的树，而不是灰色的纸片)。

在 Blender 中，树看起来不错，但有几个人告诉我，看起来我的 alpha 被反转了(我不太确定这意味着什么)。我的猜测是，通过一些文件调整和转换，我可以让附加的图像正常工作。以下是我获得的图像资源:

我认为没有必要，但如果您想查看导出的 JSON，我已将其转储到此处: https://gist.github.com/funnylookinhat/5062061

我很确定问题出在橡树叶的黑白图像上——因为这是两个打包纹理之间的唯一区别。有没有办法可以使用它或转换它，以便它正确地应用于叶子层？

更新

我能够得到看起来大部分正确的东西(减去一些奇怪的透明度分层问题) - 但我很确定它没有正确完成......任何帮助仍然将不胜感激。

我在白色/黑色和绿色图像上添加了透明度，结果如下:

结果如下:

然后我翻转了 JSON 中对它们两个的引用 - 结果是:

我 99% 确定这没有按预期工作，漫反射贴图似乎没有正常工作...有什么建议吗？

Answer 1

Three.js 没有 mask 纹理(黑白纹理)，因此您需要将其烘焙到漫反射纹理的 Alpha channel 中(因此请使用 .png 格式，因为 .jpg 不支持 alpha - 正如您目前所使用的)做)。

尽管漫反射 Alpha 做得很差(叶子上有洞)，但您的更新处于正确的轨道上。这可以正确完成，例如在 Gimp 中，通过分解漫反射颜色 channel ，然后使用添加的 mask 层作为 Alpha 进行重新组合(但请注意，白色被假定为不透明，黑色透明，因此可能需要反转)。

在 Material 中，根本不要使用 mask 纹理。还可能存在树叶相互重叠的问题，这是一个很难解决的问题，因为透明度一般来说就是 PITA。您可以尝试禁用 Material 的 depthWrite 和/或使用 alphaTest 值(例如将其设置为 0.1)以获得不同类型的工件。