Как апнуть веб-продакшен в 3D. История Аэрофутбола для дизайнеров и разработчиков. Часть 1:Год назад я запустил в Сирене юнит игровой веб 3D-разработки. Копать в этом направлении указывал
опыт больших французских студий. Визуальный язык их проектов построен на шустрой и оптимизированной 3D-графике и шейдер-эффектах. Осталось найти инструменты и собрать команду. Про команду расскажу чуть позже, сегодняшний пост про наш долгий и болезненный поиск инструментов.
На nocode-билдеры
Spline и
Peach Worlds смотреть не стали сразу – в них нет своего шейдер-графа и кастомной физики. Там невозможно сделать кастомные материалы, только пост-процессинг. Пошли искать движки.
В экспериментальный
Needle Engine (unity-based движок), мы не полезли по причине громоздкости самого Юнити, и не сильно крепкой дружбы Юнити с WebGL – добиться красивого рендера очень трудно, Юнити создан для чего угодно, но не для рекламных спецов.
Playcanvas тоже прошел мимо по причине отсутствия интеграции с современными фреймворками для верстки. Наш разработчик Андрей цитирую “рот #### колупаться в ванильном js”. К тому же, шейдер-графов для плейканваса в standalone версии тупо нет, использоваться сторонние ковырялки шейдеров то еще удовольствие. Ну и, конечно, все движки забугорные, нам в любой момент могли отрубить к ним доступ, похоронив месяцы продакшена.
Обломавшись с движками, мы решили искать подходящий javascript фреймворк.
Babylon.js – не для красивого визуала. Несмотря на наличие шейдер графа внутри официального эдитора, картинка на рендере оказалась настолько пыльной и мыльной, что пришлось бы положить карьеру нескольких дизайнеров и разрабов, чтобы получить приличный результат.
Сырой three.js показался нашим разрабам слишком сложным, но именно его следовало юзать с самого начала.
Выбор остановился на react three fiber – обертки поверх three.js. Кроме удобства самого Реакта, Андрюху привлек Drei – набор инструментов для упрощения жизни. То есть да, порывшись в движках мы пришли к тому, с чего и начинали — кастомная разработка на js.
Сложно порекомендовать что-то дизайнерам. Пробуйте инструменты, на которые я ссылался выше в посте — ими точно можно решать менее сложные задачи. А если амбиция — делать большие кастомные спецы, ну значит надо заводить свой юнит разработки в команде.
Советую обратить внимание на этот курс для разрабов. Он дружелюбный, наша дизайнерка Катя даже начала его проходить.
https://threejs-journey.com/В следующих частях поговорим про сам 3D-пайплайн и шейдеры.
#3dweb 
