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

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

0 голосов
/ 10 января 2019

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

Модель отображается неправильно во всех браузерах, в которых я ее тестировал: Chrome, Firefox и Safari (iOS). При экспорте из obj2gltf модель не показывает прозрачности при использовании без --checkTransparency. Он не работает, если он вызывается из <a-assets> или встроен. Я также импортировал модель в Blender, а затем экспортировал как .gtlf, используя экспортер blender gltf , и 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 Вот как это отображается в A-Frame

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

1 Ответ

0 голосов
/ 10 января 2019

Кажется, здесь работает прозрачность, ваша проблема - классический порядок сортировки 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 сделает свое дело, хотя может рендериться поверх других вещей в вашей сцене. Попробуйте найти лучшую альтернативу ..

...