Первый блин

Передо мной стояла исследовательская задача — найти инструмент, благодаря которому мы сможем обуздать киберпространство. Я нашел многообещающее решение, которое подходило нам по многим критериям: оно было 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 лет… Накладывает определённые риски для компании. Надежд было не очень много.

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

Увы, с тех пор, фотографий у меня не осталось, поэтому я поручил нейросети сгенерировать визуализацию того, что я чувствовал. Реконструкция, 2021 год, фото в цвете.

Мне казалось, что вокруг меня взрослые дяденьки делают серьёзные вещи, а меня здесь ненадолго оставили родители, и сказали, «посиди здесь, не шали, мы скоро вернёмся». Но, по прошествии времени эта страшная сказка превращалась в милую быль.

Этот пост можно расценивать по-разному. Если это ваш первый день или вы только делаете свои первые шаги в сторону IT, вы чувствуете себя неловко, надеюсь, я смогу вас приободрить и доказать, что как бы всё вокруг не казалось зловещим, это лишь небольшая неуверенность и ничего более. Обязательно, в первую очередь, знакомьтесь, общайтесь, будьте открыты. А в ином случае, для вас это всё покажется манифестом образа жизни айтишника.

Кстати, если кого-то заинтересовал наш велком-кит, то его распаковку можно посмотреть тут.

https://www.youtube.com/watch?v=n5618knvtng

Бойкот стереотипам

Знаете, до того момента, как я лично не погрузился в мир IT, я тоже верил во все навязанные поп-культурой стереотипы. «Мистер Робот», «Силиконовая долина», «Социальная сеть», «Джобс: Империя соблазна» — показывают нам айтишников, как людей замкнутых, тяжелых в общении одиночек. В реальности же всё наоборот. Это люди увлечённые, активные и зачастую, с интересным бэкграундом. Ни возраст, ни что-либо ещё не сковывают, не мешают им жить на полную катушку.