Процедурные текстуры в WebGL

Краткое вступление от автора: как человек, который знает и работал с glsl шейдерами, меня интересовал вид инструмента, который позволяет мне работать со сложными структурами в процедурном порядке.

На конференции GPU Technology Conference 2016 есть презентация: Материалы MDL для шейдеров GLSL: теория и практика » - в ней объясняется возможность экспорта данных .mdl в шейдер glsl. код, который впоследствии можно будет использовать в пользовательских средствах визуализации.

Для Интернета таким средством визуализации может быть Three.js, использующий glsl (webgl). Substance Designer как инструмент генерации текстур можно использовать с Three.js, это даже упоминается в этом выпуске.

Итак, как насчет использования Substance Designer в WebGL? Или лучше написать шейдеры glsl вручную?

Ну, это зависит от обстоятельств ... Давайте выделим ЗА и ПРОТИВ использования Substance Designer в WebGL.

ПРОФИ

  • Вы можете легко структурировать сложные материалы с помощью узловой системы
  • Создание экземпляра материала позволяет комбинировать и смешивать несколько материалов.
  • В библиотеке много классных шумов (рис 1.)

МИНУСЫ

  • Вы не можете использовать материал в интерактивном режиме. Хотя glsl позволяет работать с униформой (параметрами), в Substance Designer вы не можете экспортировать график в код glsl (по крайней мере, на момент пишу эту статью)

Что действительно можно сделать, так это объединить оба способа: использовать Substance Designer для создания сложных текстур и GLSL для добавления поддержки взаимодействия.

Пример

Допустим, я хочу создать 3D-приложение, которое позволяет мне рисовать поверх металлической текстуры (рис. 2). Мы можем сделать это, объединив взаимодействие glsl с существующим статическим металлическим материалом от разработчика Substance. Для добавления взаимодействия необходимо взять существующий Код MeshStandardMaterial, отредактировать его (добавить взаимодействие) и вставить в ShaderMaterial.

Учебники

Существует множество руководств по Substance Designer с подробными объяснениями, а также с изучением новейших инструментов и интересных приемов, которые помогут вам создавать сложные материалы.

Начало работы обучающие программы - must have для новичков в инструменте конструктора субстанций. Если вы собираетесь изучить этот инструмент, вам следует начать с него.

Заключение

Если вам нужно работать со сложными материалами - используйте Substance Designer. Однако он не поддерживает взаимодействие со стороны Three.js., по крайней мере, на данный момент.

Вы не можете взаимодействовать с материалами Substance Designer без GLSL в Three.js, но это не значит, что вы вообще не можете этого сделать, это означает, что вам нужно использовать оба.