A-Frame игнорирует слегка прозрачные материалы 3D-модели

Я создал 3D-модель с помощью Blender, состоящую из трех материалов с некоторой прозрачностью и экспортированную в формате .glb.

3D-модель

Когда я тестирую его в браузере, несмотря на то, что структура такая же, материалы не

Цвета 3D-модели A-Frame не складываются

Прочитал руководство по устранению неполадок с 3D-моделями и не увидел ничего подобного.

Как уже упоминалось здесь, протестировали загрузку на Clara.io, но получил тот же результат, что и в браузере

Clara.io 3D Октант

Протестирован повторный экспорт файла, визуализация в разных браузерах и добавление в A-Frame <a-entity gltf-model="#octant"> и <a-asset-item id="octant" src="octant.glb">:

  • material="opacity: 0.0; transparent: true"
  • transparent="true"

Проверьте версию Glitch здесь


Пробовал упростить шейдер

Упростить шейдер

но это тоже не сработало

A-Frame неееет


person Tiago Martins Peres 李大仁    schedule 06.06.2020    source источник
comment
Привет. Попробуйте упростить свой шейдер, возможно, вам не нужен микс с узлом прозрачности. Напрямую используйте значение Alpha из Principal Shader.   -  person Duarte Farrajota Ramos    schedule 11.06.2020
comment
@DuarteFarrajotaRamos только что проверил, но это тоже не сработало...   -  person Tiago Martins Peres 李大仁    schedule 11.06.2020


Ответы (1)


Я думаю, что решение состоит в том, чтобы установить прозрачность с помощью параметра альфы базового цвета, НЕ альфы, которую вы видите непосредственно на узле шейдера. См. «А» в нижней части этой палитры базовых цветов:

Посмотрите на букву

Также убедитесь, что режим наложения — Alpha Blend. Затем в A-Frame добавьте компонент material к объекту вашей модели с помощью transparent: true.

Рабочая демонстрация глюка: https://aframe-transparent-material.glitch.me/

Рабочая демонстрация с прозрачными плоскостями

(см. примечания ниже для другой демонстрации без странных проблем с цветом)

Я также включил файл .blend в активы Glitch, чтобы вы могли его просмотреть.

ПРИМЕЧАНИЯ

  • Для модели, которой вы поделились, смешивание прозрачности не идеально — некоторые цвета кажутся смешивающимися с другими, но тогда разные цвета не смешиваются. Это связано с тем, что Three.js визуализирует прозрачные объекты сзади вперед, но когда много плоскостей пересекаются таким образом, нет четкого упорядочения спереди назад. Обходной путь — разбить ваши плоскости на 4 меньшие плоскости (и настроить их начало координат), чтобы не было пересечения и был четкий порядок глубины. Вот модифицированная версия демонстрации Glitch с реализованным, как вы можете видеть прозрачность теперь отлично работает.

  • Насколько я знаю, экспорт Blender gLTF понимает только шейдерный узел Principled BSDF, поэтому настройка вашего микса/прозрачного узла не будет работать.

  • Я заметил, что при использовании более широкой настройки альфа-канала в основном шейдере, экспортированном в .glb, а затем повторно импортированном в Blender, он преобразовал его в смешанные/прозрачные узлы. Таким образом, это может объяснить, почему обычный альфа-параметр не распознается импортером gLTF в Three.js.

person mrossman    schedule 11.06.2020
comment
Я считаю, что сокет alpha должен работать: если это не так, не могли бы вы сообщить об ошибке в github. com/KhronosGroup/glTF-Blender-IO? - person Don McCurdy; 19.06.2020