Babylon.js

Babylon.js — особо тяжелый случай велосипедостроения в области веб-разработки, представляющий собой JavaScript-фреймворк для рисования трёхмерных кубиков в браузере. Создан и поддерживается корпорацией зла Microsoft, что уже как бы намекает. Позиционируется как мощный, красивый, простой и открытый 3D-движок, призванный превратить твой уютный браузер в филиал Анрила или Unity, но на деле превращающий его в тормозящий и глючащий полигон для обкатки очередной вундервафли, написанной на богомерзком TypeScript.

Основная целевая аудитория — веб-макаки, внезапно решившие, что они теперь игровые разработчики, но при этом панически боящиеся вида C++ и не осилившие скачать настоящий игровой движок. Для них и был насыпан этот синтаксический сахар поверх WebGL, чтобы они могли, не вылезая из своего VS Code и мира npm-пакетов, ваять трёхмерные поделия, гордо именуемые иммерсивными экспириенсами.

Babylon.js — это как Angular в мире 3D. Вроде бы всё есть из коробки, но оно тяжёлое, неповоротливое, и ты чувствуешь за спиной холодное дыхание корпоративного менеджера. А Three.js — это React. Кучка костылей, зато лёгкая, и хипстеры в восторге.
— Анонимный веб-разработчик

Короче говоря, это еще один способ заставить видеокарту анонимуса рендерить то, для чего она не предназначена, в среде, которая для этого не предназначена, на языке, который для этого тем более не предназначен. И всё это во имя великого и ужасного Web 3D.

Как оно есть

Суть явления заключается в попытке натянуть сову на глобус, а именно — запихнуть полноценный игровой движок в браузер. Разработчики сего чуда, видимо, вдохновлялись идеей, что скоро все будут играть в ААА-игры прямо в Хроме, без скачивания и установки. Ну, а пока светлое будущее не наступило, можно хотя бы заставить браузер рендерить вращающиеся логотипы компаний в 3D или очередную никому не нужную визуализацию данных.

В основе всего лежит, конечно же, WebGL — низкоуровневый API, общение с которым для неподготовленного гуманитария-фронтендера равносильно попытке прочитать Некрономикон на языке оригинала. Чтобы избавить нежные души от необходимости писать сотни строк кода для отрисовки сраного куба, и существуют такие обертки. Babylon.js в этой пищевой цепочке выделяется своей всеобъемлющестью. Он не просто дает тебе функции для создания сферы или куба, нет. Он тащит с собой сразу всё: физический движок (а то и несколько на выбор), систему анимаций, GUI, пост-эффекты, поддержку VR/AR и еще тонну свистелок-перделок, о существовании которых 95% пользователей даже не догадываются.

Весь этот комбайн написан на TypeScript, что подаётся как огромное преимущество. Дескать, строгая типизация, классы, интерфейсы — всё как у больших. На практике это означает, что прежде чем твой говнокод запустится, он должен пройти через сито транспиляции, превратившись в еще более нечитаемый JavaScript, который потом будет ворочаться в браузере, отжирая всю доступную память и процессорное время. Но адептов это не смущает, ведь у них есть типы и автокомплит в IDE, а это, как известно, главное в игрострое.

Итого, имеем громоздкую систему, которая обещает простоту и мощь, но на деле предлагает высокий порог вхождения для всего, что сложнее вращения чайника, и неиллюзорные проблемы с производительностью, как только количество полигонов в сцене превышает допустимые значения. Но зато можно с гордостью заявлять, что ты пишешь 3D-игры, не покидая уютного кокона веб-разработки.

Краткая история девяноста версий

История Вавилона началась в далеком 2013 году в недрах Microsoft, когда несколько скучающих инженеров, в частности некий Давид Катюи (David Catuhe), решили, что миру позарез нужен еще один 3D-фреймворк для веба. В то время на арене уже вовсю скакал резвый конь по имени Three.js, но мелкомягким инженерам он показался недостаточно энтерпрайзным. Им хотелось чего-то более основательного, с классами, наследованием и, чтобы обязательно на TypeScript, который тогда только-только начинал свой крестовый поход за умы веб-разработчиков.

Проект изначально был внутренним, для каких-то своих мелкомягких нужд, но, как это часто бывает, в определенный момент было принято решение выпустить Кракена в опенсорс. Вероятно, чтобы переманить на свою сторону хипстеров-разработчиков и показать, что Microsoft — это уже не та империя зла, а вполне себе дружелюбная корпорация с печеньками и опенсорсом. С тех пор проект живёт и развивается, обрастая новыми версиями, фичами и, конечно же, багами.

Главный принцип, который разработчики несут как знамя — это обратная совместимость. Даже самый древний говнокод, написанный для версии 2.5, с большой вероятностью заведется на последней седьмой версии. Звучит круто, но на деле это означает, что фреймворк тащит за собой тонны легаси-кода, а рефакторинг проводится с опаской и благоговением, дабы не отвалилось чего у какого-нибудь крупного клиента, который до сих пор использует их поделие для показа 3D-модели пылесоса у себя на сайте.

Каждая новая мажорная версия сопровождается помпезными анонсами в блогах и твиттерах, где нам рассказывают о прорывных технологиях, невероятной оптимизации и новых революционных фичах. Например, о поддержке WebGPU, которая вот-вот убьет WebGL, или о новом редакторе чего-нибудь, который сделает разработку еще проще и интуитивнее. Адепты радостно хлопают в ладоши и бегут обновлять зависимости в package.json, после чего с удивлением обнаруживают, что их проект стал весить на пару мегабайт больше, а тормозить — ничуть не меньше. Но путь воина тернист, и истинный вавилонодевелопер стоически переносит все невзгоды во имя технологического прогресса.

Священные войны

Babylon.js vs. Настоящие движки

Это уже битва из другой весовой категории, которая обычно происходит в голове у начинающего вавилоновода. Увидев, что в Babylon.js есть PBR, тени и анимации скелетов, он начинает наивно полагать, что теперь может на равных тягаться с Unity и Unreal Engine. Он приходит на тематические форумы и с гордостью заявляет: А я делаю ММО на Babylon.js!

В этот момент в тред врываются суровые бородатые дядьки в свитерах, которые годами писали на C++, и начинают неспешно, с расстановкой объяснять юному падавану всю глубину его заблуждений. Они рассказывают ему про компилируемые языки, про прямой доступ к железу, про шейдеры, которые не нужно гонять через JavaScript-прослойку, про гигабайты ассетов, которые браузер просто не в состоянии прожевать, и про то, что его ММО ляжет от ста одновременно бегающих кубиков, не говоря уже о настоящих игроках.

Спор обычно заканчивается ничем. Вавилоновод уходит, обиженно бормоча что-то про токсичное комьюнити и будущее за вебом, а бородатые дядьки продолжают пилить свои суровые энтерпрайзные или игровые проекты, лишь изредка посмеиваясь над потугами веб-макак изобразить из себя игроделов. Для них Babylon.js — это не более чем забавная игрушка, милый, но совершенно несерьезный казус. И в чем-то они, безусловно, правы.

Архитектура и свистелки-перделки

Под капотом у Вавилона скрывается целая вселенная сущностей и абстракций. Если вы думаете, что сейчас просто создадите пару объектов и они задвигаются, то вы глубоко ошибаетесь. Сначала вам предстоит познать дзен объектно-ориентированного программирования в его мелкомягком изводе.

Всё начинается с Engine. Это альфа и омега, сердце всего. Оно отвечает за связь с низкоуровневым рендерером (WebGL или скоро WebGPU). Затем создается Scene — это ваш мир, контейнер для всего сущего. Уже на этом этапе новичок начинает путаться, почему движок отдельно, а сцена отдельно. Дальше — больше.

Чтобы что-то увидеть, нужна Camera. Камер тут целая прорва: ArcRotateCamera для вращения вокруг объекта (90% всех сцен используют именно её), FreeCamera для полётов в стиле Doom, FollowCamera и ещё десяток для всяких специфических нужд. Затем нужен Light, потому что без света ваши прекрасные 3D-модели будут выглядеть как чёрный квадрат Малевича. Светом тоже не обделили: PointLight (лампочка), DirectionalLight (солнце), SpotLight (фонарик) и HemisphericLight (просто чтобы хоть что-то было видно).

И вот, только после всех этих приготовлений, на сцену выходят главные герои — Mesh. Это и есть ваши 3D-объекты. Кубы, сферы, цилиндры, а также импортированные из Blender модели многострадальных монстров и космических кораблей. Но меш сам по себе — это просто набор вершин. Чтобы он обрёл цвет и фактуру, ему нужен Material. И тут открывается портал в ад для перфекциониста. StandardMaterial для простых смертных. А для настоящих ценителей есть PBRMaterial (Physically Based Rendering), который позволяет накрутить металличность, шероховатость и прочие параметры, чтобы ваш чайник выглядел неотличимо от настоящего. Продвинутые кудесники могут даже ваять свои материалы в Node Material Editor — визуальном редакторе, похожем на пульт управления атомной станцией, где можно соединять кубики линиями, получая на выходе невероятные шейдерные эффекты.

Но и это ещё не всё! Есть же:

• Система анимаций: заставляет ваши объекты двигаться, вращаться и менять цвет по временной шкале.
• Физические движки: на выбор Havok, Cannon.js, Ammo.js. Позволяют вашим кубикам падать, сталкиваться и реалистично разлетаться по сцене.
• Система частиц: для создания огня, дыма, искр и прочей пиротехники, которая окончательно добьёт FPS.
• Пост-процессинговые эффекты: блум, глубина резкости, зернистость, чтобы картинка была как в кино.
• GUI: встроенная библиотека для рисования кнопочек, слайдеров и окошек прямо в 3D-сцене.
• Поддержка WebXR: чтобы можно было напялить на голову VR-шлем и побродить внутри своей сцены с тремя кубиками.

В результате, простой проект на Babylon.js превращается в сложную паутину из десятков взаимосвязанных объектов. Понять, почему что-то не работает или тормозит, становится нетривиальной задачей. Но адептов это не пугает. Они с упоением изучают тонны документации, постигая великую мудрость, заложенную в этот фреймворк его создателями из Microsoft.

Песочница для самых маленьких

Одним из главных инструментов завлечения неофитов в секту Вавилона является так называемый Playground. Это веб-редактор, где в одной половине экрана вы пишете код, а в другой тут же видите результат. На первый взгляд — гениальная вещь. Не нужно ничего устанавливать, настраивать сборку, возиться с веб-сервером. Просто открыл вкладку в браузере — и твори!

Именно с плейграунда начинается путь 99% вавилонодевелоперов. Они копируют примеры из документации, меняют в них пару цифр и с восторгом наблюдают, как сфера меняет цвет или кубик начинает подпрыгивать. Это создает опасную иллюзию простоты и всемогущества. Человек, еще вчера с трудом отличавший let от const, уже через полчаса начинает чувствовать себя гуру 3D-графики.

Плейграунд активно используется на форумах. Вместо того чтобы объяснять проблему на пальцах, страдалец просто кидает ссылку на свой код в песочнице, где баг воспроизводится во всей красе. Это, безусловно, удобно. Но есть и обратная сторона медали.

Проблема в том, что реальная разработка не имеет ничего общего с этими тепличными условиями. Как только адепт решает перенести свой шедевр из плейграунда в реальный проект, его ждёт жестокое разочарование. Внезапно выясняется, что нужно настраивать Webpack или другой сборщик, разбираться с npm-пакетами, модулями, импортами и экспортами. Код, который прекрасно работал в песочнице, в локальном окружении почему-то разваливается с непонятными ошибками. Тут-то и начинается настоящий геймдев — с болью, страданиями и многочасовым гуглением.

Критика и подводные камни

Несмотря на маркетинговые мантры про мощь, красоту и простоту, путь вавилонского джедая усеян не только розами, но и граблями внушительных размеров. За красивым фасадом скрывается немало проблем, с которыми рано или поздно сталкивается каждый адепт.

Во-первых, производительность. Это ахиллесова пята любого 3D в браузере, и Babylon.js — не исключение. Рекламные демки, конечно, впечатляют, но они вылизаны до блеска командой профессионалов. Когда же обычный смертный пытается собрать свою сцену, он быстро упирается в невидимую стену. Оказывается, что каждый источник света, каждая тень, каждый сложный материал и каждая анимированная модель — это удар по драгоценным кадрам в секунду. Вскоре разработчик понимает, что половину своего времени он тратит не на создание контента, а на борьбу за производительность: мёржит меши, запекает текстуры, отключает тени, использует инстансы, иными словами — занимается шаманством и колдовством, чтобы его поделие хоть как-то шевелилось на устройствах, отличных от топового игрового ПК.

Во-вторых, размер. Будучи фреймворком, Babylon.js тащит с собой всё, что только можно. Даже если тебе нужно просто покрутить кубик, ты всё равно загружаешь на клиент мегабайты кода, отвечающего за физику, VR, продвинутые материалы и еще бог весть что. Существуют, конечно, способы собрать облегченную версию, выкинув ненужные модули, но это требует дополнительных телодвижений и знаний, на которые у новичка обычно нет ни времени, ни желания. В итоге, первый запуск приложения превращается в мучительное ожидание, пока браузер скачает и распарсит весь этот джаваскриптовый монолит.

В-третьих, экосистема инструментов. Да, у Babylon.js есть хваленый инспектор и плейграунд. Но когда речь заходит о чем-то более серьезном, например, о редакторе уровней, всё становится печально. Существует некий Babylon.js Editor, созданный и поддерживаемый одним-единственным энтузиастом из комьюнити. И, как и следовало ожидать от такого проекта, он довольно сырой и нестабильный. Он постоянно глючит, ломается и вообще ведет себя как капризный альфа-продукт. В результате, многие разработчики предпочитают собирать уровни в каком-нибудь Unity или Blender, а затем экспортировать их, что добавляет в процесс разработки еще один костыль.

И, наконец, иллюзия простоты. Babylon.js действительно облегчает первые шаги. Но как только задача становится чуть сложнее, чем hello world, вся магия рассеивается. Внезапно выясняется, что для создания чего-то приличного нужно всё так же хорошо знать линейную алгебру, понимать, как работают матрицы, кватернионы, векторы, шейдеры и конвейер рендеринга. Движок лишь предоставляет API, но он не может вложить в голову знания. В итоге, многие новички, привлеченные обещаниями легкого старта, надолго застревают на плато, не в силах преодолеть барьер сложности, и в конечном итоге забрасывают это гиблое дело, возвращаясь к рисованию кнопочек на React.

См. также

• ЖабаСкрипт