Как апнуть веб-продакшен в 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