Верните мой 2007

Наверняка вы уже видели множество лэндингов, использующих 3D в качестве метода повествования. О них, сегодня, речь, увы, не пойдёт. Мы поговорим о более экспериментальной категории — онлайн-играх в вебе. Кроме того, так как моя компетенция пока что ограничивается исключительно Three.js, о сборках Unity под HTML5 и прочих игровых движках мы сегодня умолчим.

Помните Танки Онлайн? Казалось бы, бум веб-игр остался в 2009, и если речь идет о прибыльном многопользовательском проекте, то в голову, первым делом, приходит полноценная AAA игра. Но неожиданная популярность IO игр в 2019 году показывает, что интерес к такому типу развлечений ещё остался.

Я подобрал пару популярных игр описываемого формата для ознакомления:

https://crazybattle.fun/

https://narrow.one/

Хоть они и не могут похвастаться продвинутой графикой или уникальным геймплеем, всё равно в силах формировать целые комьюнити вокруг себя. Они интересны далеко не самому узкому кругу лиц, и кроме того, прекрасно монетизированы.

С развитием веб-технологий относительно 3D (например, WebGPU), я уверен, что скоро нас ждет очередной скачок интереса к веб-проектам. А при удачном стечении обстоятельств, возможно, нового поколения.

Как мы докатились до жизни такой?

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

Первый блин

Передо мной стояла исследовательская задача — найти инструмент, благодаря которому мы сможем обуздать киберпространство. Я нашел многообещающее решение, которое подходило нам по многим критериям: оно было open-source, имело встроенный аудио- и текстовый чат, поддерживало серверную физику, и что немаловажно, было написано на знакомом нам стеке: https://thirdroom.io

Одним из главных минусов стала слишком сложная архитектура — весь нетворкинг работал через Matrix (распределенная mesh-сеть), требовал NATS, что делало использование вместе с Docker и nginx невероятно проблематичным.

Также мы рассматривали Mozilla Hubs для реализации метаверса. Но в связи с отсутствием встроенной возможности создания заскриптованных объектов и многих необходимых нам возможностей, от этого варианта мы отказались ещё на этапе совместного демо-созвона.

Как закалялась сталь

Спустя ещё немного времени было окончательно решено оставить попытки найти уже готовое решение и двигаться в сторону своего собственного. Дело осталось за малым — всего лишь подобрать стек.

В качестве системы рендеринга я выбрал Three.js и его React обертку.

“Easy to learn - hard to master” — именно так можно описать путь обучения. Первую демку я смог собрать буквально за один вечер

На видео можно увидеть наличие физики, в роли модели физического мира выступала библиотека Rapier, выбрали мы её, потому что у неё довольно прозрачные концепты. Кроме того, пакет поставляется в виде WASM, что выражается в большом приросте производительности относительно аналогичных решений на JS.

В качестве сетевых библиотек были выбраны geckos.io для общения по UDP через WebRTC для быстрого обмена пакетами. В них мы передаём текущее состояние мира.

А для тех событий, в получении которых мы должны убедиться, я выбрал socket.io — одна из самых популярных библиотек для общения по WebSocket для Node.js.

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

Далее завезли поиск маршрутов. Теперь можно было управлять роботом не только клавиатурой, но и мышью.

Я создал систему маркеров. Они показывают направление к предмету.

Не обошлось и без экспериментов. Мы пробовали использовать рендеринг через WebWorker с помощью react-three-offscreen — это должно было помочь разгрузить UI-поток. Но из-за того что библиотека до сих пор находится в экспериментальной стадии, количество проблем совместимости не дало нам возможности использовать её.

Ещё мы попробовали отрендерить игру через WebGPU. Результат на скрине, и, как видите, не слишком удачный. WebGPU, увы, пока не поддерживает пост-процессинг.

Наше детище

Спустя более тысячи коммитов, бесчисленное количество человеко-часов и несколько реинкарнаций проекта, мы, наконец, получили качественный продукт, которым не стыдно похвастать.

На удивление, неткод на Node.js не оказался узким горлышком проекта и без труда справлялся с 80+ человек в одной сессии.

Вот они, слева направо: Намджун, Чонгук, Чингачгук, Гойко Митич, Джин, Юнги. Люблю вас ❤️

Вкусное — напоследок

За год работы с Three.js и Three Fiber я вынес несколько полезных уроков и с радостью поделюсь ими с вами.

1. Старайтесь избегать стейты внутри 3D компонента. Рано или поздно, они приведут к его перерендереванию. Это выльется в микро-лаг. Вместо этого лучше подойдут ref и колбеки, где это возможно.
2. В анимациях будьте аккуратны с использованием .stop() и .reset(). Их поведение немного размыто описано. Проверяйте правильно ли вы реализуете стейт-машину.
3. В видео-текстурах отключайте flipY, изначально он включен.
4. У RigidBody странное относительное позиционирование. Воркараунд до сих пор не придуман. При создании элементов (например, Html или Shadow) внутри RigidBody он сам изменяет высоту.

Кто на новенького

Приключения Шурика, Служебный роман, 12 стульев… возможно, вы не фанат советской классики и не помните все фильмы наизусть, но кое-что в вашей памяти оттиснулось навсегда — их вступительные титры. Образ Рабочего и колхозницы, его вы вряд ли забудете.

Так и с первым рабочим днём. Моими начальными титрами была приветственная карточка внутри подарочного набора. Так начался путь к интересным новым свершениям. Так я начал исследовать дикие дебри айтишного леса 🌲🔍

В постах про нетворкинг, я ни слова не сказал про самое главное. Что ж, никогда не поздно☝️Кстати, если вы еще не читали пост от среды, советую вам это сделать, чтобы не потерять контекст.

На самом деле, в Merk я попал случайно. Меня пригласил сюда один участник комьюнити. В самом начале, у меня было много опасений, что из-за возраста у меня ничего не получится. Всё-таки незнакомец из ниоткуда, 19 лет… Накладывает определённые риски для компании. Надежд было не очень много.

Поэтому, когда я увидел заветную коробочку, сел за кресло и включил монитор, первое, что я почувствовал — я оказался в каком-то дивном новом мире, полном чудес. Поначалу, всё было довольно непонятно, напоминало экзотические тропики и было довольно чудным.