Привет, на связи Sheverev! У нас тут межгалактический проект, о котором не терпится вам рассказать. Пусть вас не смущает беспечное название – мы за время работы столько раз окунались в новое и неизведанное, что уже чувствуем себя там как дома.
Как-будто ничего сложного и наша наивность🦸🏼♀
Кто клиент: компания Sensorium. Их основной продукт – метавселененая Sensorium Galaxy, в которой пользователи становятся частью глобального сообщества, а также обладателями эксклюзивных виртуальных активов. Они получают возможность участвовать в цифровых ивентах – концертах, играх и других виртуальных событиях.
Их субпродукт – Sensodapp, эдакий маркет метавселенной Sensorium Galaxy, который позволяет создать свой VR-аватар, сминтить его и принимать участие в мероприятиях общего виртуального 3D-пространства. Аватары обладают искусственным интеллектом, а еще их можно кастомизировать и создавать точное виртуальное отображение себя.
Задача: ребята из Sensorium уже начали разрабатывать фронт-часть сайта, но текущему разработчику нужна была помощь, потому что объемы работы были большие. Плюс у клиента очень высокие требования к дизайну и верстке, поэтому они обратились к нам.
Наша задача – разработать фронт часть сайта и связать ее с бэком на блокчейне. В итоге мы разработали впечатляющий сайт и платформу для минта NFT. Но обо всем по порядку!
Когда к нам пришел клиент, мы все были очень воодушевлены. Веб-анимации, нфтишки, VR – я в деле. Мы с энтузиазмом начали работать, но затем, впервые за все время работы в Sheverev, возникла мысль, что этот проект мы можем не закончить.
У всей команды разработки первая мысль звучала примерно так: вау, как круто, что мы делаем такую крутую анимацию. Позже: зачем мы в это ввязались и как это вообще сделать. Потом: ура, у нас получилось.
Основная сложность была в том, что не все технологии были нам известны. Но мы в Sheverev думаем так: это жизнь. Живешь ее и сначала не умеешь работать с WebGL, а потом учишься и умеешь.
Обычно WebGL используют для отрисовки трехмерных сцен в браузере, а для более простых анимаций используют CSS или Сanvas API. У нас была сложная задача: наложить на видео эффекты, симплекс-шум и пикселизацию, и всё это заанимировать.
Сначала хотели написать эффекты на js, но быстро поняли, что работать всё будет очень медленно – придется обсчитывать каждый пиксель видео на процессоре по очереди, а пикселей в видео очень много. Мне в голову пришла мысль рассчитать всё параллельно на видеокарте. В браузере для этого есть WebGL.
В ходе работы мы обнаружили, что аналогичных результатов можно добиться используя svg-фильтры, которые тоже просчитываются на видеокарте. Потом поняли, что они не работают с видео в Safari. Мы рассмотрели несколько библиотек для упрощения работы с WebGL – PixiJS и p5.js, но наткнулись на несколько критических багов и проблем с производительностью. В итоге пришли к тому, что будем использовать чистый WebGL.
В процессе разработки обнаружились проблемы с прозрачностью в Safari – вышло обновление, которое добавило багов в WebGL. Видео с аватарами сначала потеряло прозрачность фона, а потом полностью позеленело. Мы решили эту проблему с помощью дополнительной маски.
В целом, в новую технологию вникали быстро: первые демки получались в течении пары дней, но потом приходилось неделями их докручивать, исправлять баги, погружаться глубже, ничего не понимать… и совершенствоваться.
Заберите этот дедлайн, дайте мне другой 🧯😖
И вот, разработка идет твердо и четко, мы находимся в приподнятом настроении, которое сменяется коварным ощущением, что что-то может пойти не так. Но у нас был готовый дизайн и конкретный дедлайн: мы понимали, что делать и более-менее ожидали уложиться в сроки.
Но потом немного забуксовали.
Забуксовали, потому что это был неординарный для нас опыт – настолько плотно работать с командой заказчика. Нужно было договориться о том, как будет происходить коммуникация. Взгляды на разработку, к счастью, у нас совпадали.
Коварное ощущение, что нужно ускориться, пришло примерно под конец марта (начали работать в феврале). Мы использовали тяжеловесные технологии, которые довольно сложно оптимизировать. И гордимся тем, что они работают даже на старых устройствах.
На главной странице должно было быть много сложной анимации, и мы поняли, что нужно основательно засесть за технологии для ее создания. Но у нас не было такого опыта (с анимацией мы работали, но это был намного более высокий уровень разработки). Поэтому мы по ходу знакомились с новой технологией и заточили ее – сейчас мы способны на многое в этом направлении.
Делали аватаров по 40 часов ⏰
Как мы делали аватаров: сначала создавали демку, потом засовывали ее в проект. Дальше смотрели, как оно работает. Аватары лично я мог делать неделями – в среднем на каждого уходило часов 40. Это была большая и сложная работа, но она была необходима, чтобы аватаров можно было кастомизировать.
Возможность кастомизировать своего персонажа – важная составляющая геймификации. В нашем проекте задумка такая: перед покупкой пользователь сам делает себе аватара, подбирая все детали на свой вкус: цвет волос, прическу, одежду, аксессуары. Поэтому он становится не просто уникальным в принципе, но и «своим» для каждого покупателя. Можно создать виртуальную улучшенную версию самого себя, если угодно. Поэтому настройку параметров аватара мы реализовывали с особым усердием.
А вы как думали – у нас все получилось 👨🏻💻
Нам нравится тот вид работы, когда наши ребята интегрируют с другой командой и создают общее поле для решения задач. У нас были ежедневные синки с клиентом, который по совместительству был еще и нашим со-разработчиком.
Я для себя отметил, что наши внутренние процессы очень хорошо работают – мы спокойно вписали в свою работу другую команду. Ну или вписались в их работу, это уже как удобнее) У нас сложились хорошие отношения с разработчиками со стороны клиента, мы шли друг другу навстречу. В общем, взаимопомощь, дружба и жвачка + веселые стикеры в чатах.
Проект для нас технически довольно сложный. Мы раньше блокчейн не тестировали, WebGL тоже, привязка оплату через web3-кошелек для нас тоже была в новинку. Зато пользователям удобно пользоваться этой фичей – чтобы приобрести аватара, нужно подключить кошелек MetaMask – один из самых популярных кошельков для WEB3. После чего достаточно зайти на страницу сайта, открыть NFT-креатор и выбрать нужное количество аватаров, хоть одного, хоть пачкой в сто штук.
Факты
Факт 1: мы теперь можем о себе сказать в духе: «Помогаем стать крипто-миллионерами, продавая пиксельные изображения».
Факт 2: сайт разделен на 2 основные части: посадочную страницу и личный кабинет с генератором и коллекцией аватаров. На сайте очень много впечатляющих взаимодействий – от танцующих 3D-персонажей до интерактивного фона, реагирующего на музыку. Нам было не просто воссоздать всё это, но мы, кажется, отлично справились.
Факт 3: у нас есть понятный и согласованный roadmap. На этом этапе есть сайт с NFT-аватарами, реализована возможность купить их и кастомить под себя, чтобы потом использовать в метавселенной.
Факт 4: Закупиться аватарами просто – достаточно подключить кошелек MetaMask и на сайте выбрать тех, которые вам понравились. А их куча-кучная.
Факт 5: В генераторе есть разнообразные возможности кастомизировать аватаров – можно менять им цвет волос и одежды, прическу и аксессуары.
Резюмируем 😎
Мы не завершаем эту большую историю, как и не прощаемся с этим вдохновляющим проектом. Аватары сами себя не сминтят, а у нас еще много планов на них.
Следите за нашими новостями и читайте нас на VC. Желаем хороших тусовок (а оффлайн уже или онлайн – решать вам)🔥
Нужно продолжение! Интересно, что из этого получится