Как получить текстуры с альфа-каналом на 3D-моделях, работающих в A-Frame?

Я сделал 3d модель с текстурой .png, у которой есть альфа-канал. Текстура отображается неправильно в A-Frame. Я создал модель в Autodesk Maya и экспортировал ее как .OBJ. Затем я использовал obj2gltf для преобразования из формата .obj в .gltf. Прозрачность в A-Frame отображается неправильно. Как показано на изображениях, есть некоторые проблемы с рендерингом модели.

Модель некорректно отображается во всех браузерах, в которых я ее тестировал: Chrome, Firefox и Safari (iOS). При экспорте из obj2gltf модель не показывает прозрачности при использовании без --checkTransparency. Он не работает, если он вызывается из <a-assets> или встроен. Я также импортировал модель в Blender, а затем экспортировал как .gtlf с помощью blender gltf exporter. , а A-Frame вообще не распознал прозрачность. Модель не отображается правильно, если она загружена как .OBJ с тегами <a-obj-model>.

<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 Вот как это отображается в Рамка

https://i.imgur.com/1zk3uVl.png Вот как выглядит модель в Maya, и как это должно выглядеть.


gltf transparency aframe
person scuba-accident    schedule 09.01.2019    source источник
comment
В модели glTF попробуйте найти "alphaMode":"BLEND", который вы могли бы изменить на "alphaMode":"MASK". В режиме маскирования буфер глубины остается включенным для записи, и каждый пиксель листа либо непрозрачен, либо отбрасывается в зависимости от альфа-значения.   -  person emackey    schedule 10.01.2019

Ответы (1)


arrow_upward
3
arrow_downward

Кажется, здесь работает прозрачность, ваша проблема заключается в классическом порядке сортировки opengl + прозрачность + буфер глубины. Некоторые листья на переднем плане визуализируются в первую очередь, чем другие, поэтому задние листья не отображаются, потому что перед ними уже что-то есть. Оптимальным способом визуализации всех листьев была бы предварительная сортировка всех листьев по расстоянию до камеры перед визуализацией, но обычно это невозможно при загрузке внешних моделей.

Я рекомендую вам попробовать активировать side:double и depthTest: false в материале A-Frame. Кроме того, используйте модель obj вместо gltf, чтобы вы могли использовать с ней компонент material (вы не можете использовать компонент материала с моделями gltf).

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

depthTest сделает свое дело, хотя может и поверх других вещей в вашей сцене. Попробуйте найти лучшую альтернативу ..

person feiss    schedule 10.01.2019