在A-Frame中工作的3D模型中,如何在Alpha中获得纹理?

时间:2019-01-09 22:54:13

标签: transparency aframe gltf

我制作了一个具有Alpha通道的.png纹理的3D模型。纹理在A-Frame中无法正确呈现。我在Autodesk Maya中创建了模型,并将模型导出为.OBJ。然后,我使用obj2gltf从.obj转换为.gltf格式。透明胶片在A框架中无法正确显示。如图所示,模型存在一些渲染问题。

该模型在我在以下环境中测试过的所有浏览器中均无法正确呈现:Chrome,Firefox和Safari(iOS)。从 obj2gltf 导出时,在没有--checkTransparency的情况下使用时,该模型不会显示任何透明度。如果它是从<a-assets>或内联调用的,则无法使用。我还将模型导入Blender,然后使用blender gltf exporter导出为.gtlf,而A-Frame根本无法识别透明度。如果将模型同时加载为带有<a-obj-model>标签的.OBJ,则该模型也不正确。

<a-assets><a-asset-item id="tree" src="assets/tree02.gltf"></a-asset-item></a-assets>

<a-entity gltf-model="#tree" position="0 0 -10" material="alphaTest: 0.5"></a-entity>

https://i.imgur.com/HbFoBBb.png 这就是它在A帧中显示的方式

https://i.imgur.com/1zk3uVl.png 这就是该模型在Maya中的外观以及应如何显示。

1 个答案:

答案 0 :(得分:2)

透明度似乎在这里起作用,您的问题似乎是经典的opengl排序顺序+透明度+深度缓冲区。前面的一些叶子比其他叶子先渲染,因此背面的叶子不渲染,因为它们前面已经有东西。渲染所有叶子的最佳方法是在渲染之前根据到照相机所有叶子的距离进行预排序,但这在加载外部模型时通常不可行。

我建议您尝试激活A-Frame资料中的side:doubledepthTest: false。另外,请使用obj模型而不是gltf,因此可以将material组件与其一起使用(对于gltf模型,不能使用材料组件)。

<a-entity obj-model="obj:#tree" material="src: #yourTreeTexture; side: double; depthTest: false">

depthTest可以解决问题,尽管它可能会渲染场景中的其他内容。尝试找到最佳的选择。.