ПРАКТИКА

Как сделать свой проект в метавселенной с нуля

Челлендж – создайте собственный виртуальный шоурум быстро, бесплатно, без смс
Метавселенные – это не хайп, а рабочий инструмент, который стоит воспринимать, как соцсети и сайты нового поколения, где посетитель может исследовать контент в различных плоскостях и буквально перемещаться внутри информации. Например, можно сделать витрину товаров, интерактивное портфолио, выставку работ, ненавязчиво подводя пользователя к совершению целевого действия.

При этом есть платформы, которые позволяют собирать такие проекты без навыков геймдева, кастомизировать готовые темплейты.
Челлендж v2.0

Виртуальный шоурум 2.0

Для всех желающих в нашем TG-канале Рендер завтрашнего дня мы запускаем обучающий челлендж Виртуальный шоурум 2.0 по созданию своего интерактивного no code пространства в Spatial, чтобы разрушить миф о метавселенных, недоступных простым смертным. В этой статье будут собраны информация, тесты, скринкасты и дополнительные материалы.

Для кого челлендж?

  • Для маркетологов и владельцев своего бренда

    Рассмотрим точки роста и новые инструменты для монетизации бизнеса
  • Для креаторов и фрилансеров

    Получите востребованность на рынке и опередите конкурентов
  • Для блогеров, smm, pr- и event-менеджеров

    Создадим интерактивный проект для увеличения охватов и трафика
  • Для всех, кто интересуется технологиями

    Посмотрим метавселенные изнутри

Почему Spatial?

В версии no code отлично подходит для быстрого старта. Условно бесплатный. Кроссплатформенный (мобильные версии для Android и iOS, web, Oculus). Не требует специальных навыков или установки софта (все будет в браузерной версии для ПК). Переваривает многие виды и форматы контента без особых танцев с бубном.

Нужны ли специальные навыки?

Нет, будем работать с кастомизацией готовых локаций (это почти как загружать фотографии в соцсети, только интереснее). Дополнительно на компьютер или ноутбук устанавливать ничего не требуется, будем работать в браузере. Работа происходит онлайн, поэтому нужен интернет.

Что будет в челлендже 2.0

С прошлого челленджа 1.0 платформа Spatial претерпела значительные изменения, поэтому мы пройдем по всем важным вопросам
  • Идентификация бренда в метавселенной

    Что нужно учесть, чтобы визуал локации работал на вас.
    1
  • Регистрация и настройка аватара

    Аватара можно сгенерировать по фото или использовать интеграцию Ready Player Me.
    2
  • Какие сценарии можно делать в Spatial

    Варианты шоурумов для брендов, специалистов и энтузиастов. Экскурсия по существующим мирам.
    3
  • Технические возможности Spatial

    Какие функции есть на данный момент, и что доступно бесплатно.
    4
  • Технические требования к контенту

    Параметры для оптимизации вашего контента или поиска на ресурсах.
    5
  • Откуда брать готовые 3D-модели?

    Ресурсы с 3D-моделями, где есть фришный или недорогой контент.
    6
  • План и концепт виртуального шоурума

    Строим интерактивную воронку продаж по правилам мерчендайзинга.
    7
  • Кастомизация стандартного темплейта

    Как организовать собственное пространство в метавселенной за считанные минуты.
    8

  1. Идентификация бренда* в метавселенной

* Здесь и далее будем говорить бренд, как в общем понимании, так и в контексте личного бренда.

Основной вопрос – это сеттинг в метавселенной – соответствие digital-окружения бренду по форме, содержанию и маркетинговой нагрузке. Какие визуальные параметры стоит использовать: форма и силуэт (в том числе, рукотворные или органические), цвет и текстуры, сочетание цветов, реалистичность или стилизация, максимализм или минимализм, хронотоп мира? Как основное сообщение бренда будет представлено в 3D-пространстве?

1.1. Три сильных стороны вашего бренда

Напишите три сильных стороны вашего бренда – три слова (словосочетания) о том, какой ваш бренд. Основная мысль, которую бренд транслирует миру. Это ляжет в основу визуала и цифрового сторителлинга на локации.

В прошлый раз вместо трех лаконичных характеристик мы получали по три эссе. В этот раз предлагаем использовать метод прямых ассоциаций, когда вы составляете карту слов о том, какой ваш бренд. Или инвертирование ассоциаций. Если в процессе размышлений ни один из появившихся вариантов вас не вдохновляет, выберите характеристику, которая точно не про вас, запишите все антонимы и выведите новое качество.

Чтобы по фану, или если совсем процесс не пойдет, под наши задачи мы адаптировали типологию Майерс-Бриггс. Ниже можно пройти тест онлайн и узнать, какой вы бренд в метавселенной.
Какой вы бренд в метавселенной?
Тест – Какой вы бренд в метавселенной
Пройдите тест из 4 вопросов, узнайте сильные стороны вашего бренда, и как их использовать в разработке виртуальной локации и интерактивного сторителлинга
Какое описание в большей степени подходит вашему бренду?
Какие характеристики точнее отражают продукт/ услугу вашего бренда?
Что ближе вашему бренду?
Какие качества лучше описывают действия целевой аудитории вашего бренда?
Бренд – Организатор
В метавселенной бренд-организатор предлагает пользователям нечто весьма реальное, нацеленное на преодоление проблем сегодняшнего дня с помощью испытанных на практике и доказавших свою успешность методов. Добавьте в интерактив проигрывание жизненной ситуации. Выстраивайте систему в пространстве вокруг одной центральной идеи, не распыляйтесь. Совмещайте технологии, вносите улучшения в те модели, которые уже существуют на различных ресурсах, комбинируйте отдельные фрагменты для получения нового.
Бренд – Фасилитатор
Бренд-фасилитатор стремится поставить себя на место аудитории, заглянуть в ее сердце и ум. В метавселенной реализуйте проект помощи другим, гармонии отношений. Курируйте, поддерживайте, решайте проблемы сегодняшнего дня. На локации делитесь успешными методиками и зарекомендовавшими себя продуктами и услугами. Размещайте фотографии о событиях и людях, участвующих в жизни бренда, истории клиентов, отзывы. Но не загромождайте виртуальное пространство, пусть доминирует визуальная чистота и порядок, а в качестве центральной идеи выступает что-нибудь сентиментальное.
Бренд – Визионер
У бренда-визионера всегда есть «знание» будущего и готовый план на случай непредвиденных обстоятельств. Проектируйте оригинальную фантазийную локацию в метавселенной, визуализируя идеи бренда, стремление к совершенству и поиск жизненного баланса. Используйте различные каналы информации, объединяйте разнородные объекты, пропуская каждое действие через фильтры строгой логики, чтобы избежать необдуманных решений или несоответствия бренду. Запускайте локацию этапами, чтобы не затягивать сроки в постоянных правках. Перед постановкой цели определитесь с критериями, что считать успехом.
Бренд – Вдохновитель
Бренд-вдохновитель ориентируется на возможности, заложенные в людях. В метавселенной транслируйте общечеловеческие ценности, содействуйте сближению людей вокруг какой-то миссии и установлению гармонии. Следует сопоставить контекст прошлых событий с сегодняшними, определить внутренние связи в объектах, раскрыть паттерны и тенденции, пропустить через ценности бренда. Начинайте с плана из нескольких основных точек, определив общую тему. Оцените с точки зрения осуществимости и реализуйте.
Бренд – Мастер
Бренд-мастер быстро схватывает ситуацию, оценивает ресурсы и предпринимает неотложные действия. Достигает успеха в решении срочных проблем, когда нужно проявить смекалку или работать подручными средствами, например, во время чрезвычайных ситуаций в жизни или мире. В метавселенной размещайте различные инструкции, лайфхаки. Добавьте вау-моментов озарения. Используйте партисипаторный дизайн, подключайте аудиторию к созданию виртуального пространства: процесс и детали важнее результата.
Бренд – Мечтатель
Бренд-мечтатель вдумчив и при этом деятелен, во всем стремится к установлению гармонии, отлично умеет выбирать тактику действий. Глубокий, эмоциональный и внутренне страстный. В метавселенной сделайте акцент на уединении пользователя, создайте место для размышлений. Используйте информацию о людях, образы животных и природы. Уведите от рутины, преобразуйте существующие идеи в глубоко личное, спонтанное и искреннее. Делитесь процессом разработки в соцсетях, чтобы вдохновлять других на поиски. Беспечность по отношению ко времени и планированию, постоянный поиск дополнительной информации приведет к незавершенному проекту.
Бренд – Аналитик
Бренд-аналитик в своей стратегии отличается гибкостью и подвижностью, быстро адаптируется к ситуации. В метавселенной выбирайте футуристичный визуальный ряд, тестируйте новые функции. Рассмотрите возможность трансляции в традиционных соцсетях и на сайте. Проектируйте локацию, как пазл, к готовой части которого добавляются новые фрагменты. На первый взгляд пользователя элементы могут выглядеть случайными или хаотичными, используйте в пространстве логические задачи. Для завершения проекта необходимо предпринимать активные действия, чтобы выйти из стадии концепта.
Бренд – Созерцатель
Бренд-созерцатель живой, поэтический, рефлексирующий, с отпечатком автобиографичности основателя. Сила заключается в глубокой внутренней связи с пользователями, умении улавливать и понимать их чувства, не навязывать свои продукты и услуги. Создавайте пространство в метавселенной с абстрактными символами и многоуровневым смыслом. Переводите чувства на слова, действия и формы. Совмещайте объекты разных стилей, источников и временных периодов. Главное, доведите виртуальный мир до финала. У бренда-созерцателя многие проекты часто остаются незавершенными или вовсе не начатыми.
Бренд – Реалист
Даже в метавселенной бренд-реалист лучше всего справляется в практическом решении насущных проблем и достижении реальных целей для своих клиентов – героев каждого дня. Выбирайте традиционные объекты и приемы мерчендайзинга из физического мира. Наполняйте виртуальный мир осязаемой информацией: звуками, текстурами, материалами, формами и цветами. Превращайте каждую зону виртуального шоурума в отдельное переживание.
Бренд – Учитель
Бренд-учитель – защитник и продолжатель традиций. Выбирайте хорошо организованное пространство в метавселенной, с удобной навигацией, ориентированное на людей и проведение образовательных мероприятий. Оформляйте интерактив с ностальгическими нотками, транслируйте собственные ценности, личные истории команды, отстаивайте идеалы. Используйте сенсорные стимулы – текстуры материала, гул толпы, подробности, связанные с людьми и их взаимоотношениями, прикладное творчество.
Бренд – Лидер
Для бренда-лидера проект в метавселенной направлен на достижение стратегических целей компании. Такой бренд ориентирован на будущее, регулярно ищет альтернативы, новые технологии и варианты. Интерактивная воронка продаж на локации должна включать процесс обретения знаний и самосовершенствование пользователя. Включайте возможность скачать чек-листы, составляйте майнд-карты, транслируйте подтвержденные мотивирующие цитаты.
Бренд – Ментор
Бренд-ментор собирает вокруг себя людей, так как аудитория заряжает энергией. Через личные истории, проявление лидерских качеств и участие в движениях в защиту высоких гуманитарных идей несет в массы собственную идеологию, формирует комьюнити. Можете использовать любой жанр виртуального мира – от фэнтези до постапокалиптики. Ненавязчиво транслируйте нужную мысль в качестве своеобразного ориентира, контентом ведите пользователя к нужному выводу или действию.
Бренд – Новатор
Бренд-новатор ориентируется на пользователей, которые легко устают от рутины, ищут удовольствие в новизне, стараясь взглянуть на мир с неожиданной точки зрения, считают планирование лишней тратой времени, бросают вызов условностям и традициям, не считаются с реакцией окружающих, предпочитая делать все так, как им кажется разумным. В метавселенной проектируйте абсурдную, смелую, шокирующую локацию. Используйте игровые активности, требующие незамедлительных действий, например, различные полосы препятствий.
Бренд – Аниматор
Бренд-аниматор активен, глубоко эмоционален, полон энтузиазма и умеет вдохновлять. В метавселенной проектируйте игровую локацию с непредсказуемым веселым финалом, волнующую, безмятежную, но с жизненными деталями. Задействуйте звуки, текстуры, материалы, круглые формы и яркие цвета. Избегайте всего неприятного, оставляйте то, что поднимает настроение и согласуется с ценностями бренда, внушает веру и способствует ощущению счастья и гармонии.
Бренд – Изобретатель
Бренд-изобретатель нацелен на решение неразрешимого. Воодушевляйтесь словом «невозможно», переосмысляйте задачу. В интерактиве с пользователями на локации используйте элементы мозгового штурма, делитесь новыми знаниями и повышайте компетентность аудитории. Покажите в метавселенной концепты будущих продуктов. Проектируйте новаторскую локацию – по размерам, сложности, использованным технологиям. Лучшие идеи появятся в процессе изучения связи между людьми, паттернами, концепциями, теориями и реальным миром.
Бренд – Медиатор
Виртуальный мир бренда-медиатора транслирует личные ценности и сосредоточенность на пользователях, умении их понимать. Добавляйте зоны и инструменты для онлайн-нетворкинга, мотивируйте друзей и членов команды на полную самоотдачу. Хорошо работают проекты социальной направленности, где у пользователя есть возможность поставить себя на место других, взглянуть на все по-новому и спросить: «Как бы я себя чувствовал в такой ситуации?». Эмпатия и понимание человеческого поведения вкупе со страстностью приведет к созданию мощных, волнующих историй в метавселенной.

1.2. Слова обретают форму в пространстве

Форма с цветом воздействуют на остальные органы чувств: осязание, слух, вкус и обоняние, и вызывают различные ассоциации. Так, музыку Моцарта, например, называют «розовой».

Поэтому комплексные ощущения от виртуального пространства, а не смысл прочитанных о бренде слов, будут убеждать на невербальном уровне, вызывать эмоции и образы. И задача – подобрать и настроить нужное состояние пользователя.

Физические ассоциации:
весовые (легкие, тяжелые, воздушные, давящие);
температурные (теплые, холодные, горячие, ледяные, жгучие);
фактурные (мягкие, жесткие, гладкие, колючие, шершавые, скользкие);
акустические (тихие, громкие, глухие, звонкие, музыкальные);
пространственные (выступающие, отступающие, глубокие, поверхностные).

Эмоциональные ассоциации:
позитивные (веселые, приятные, бодрые, оживленные, лирические);
негативные (грустные, вялые, скучные, трагические, сентиментальные);
нейтральные (спокойные, уравновешенные, безразличные).

6 основных визуальных критериев

Как определиться со стилем в 3D при создании видео-контента, иммерсивных проектов и метавселенных
Для этого задания мы обратимся к статье – 6 основных визуальных критериев. Как определиться со стилем в 3D при создании видео-контента, иммерсивных проектов и метавселенных. Будем рассматривать 6 факторов пространства:
1. Форма
2. Абстрактное/ фигуративное
3. Реалистичное/ стилизованное
4. Максимализм/ минимализм
5. Цвет
6. Бэкграунд

В каждом пункте стоит задача определиться с тем, что соответствует сильным сторонам бренда, которые мы получили в Задании 1.1. В результате у вас будет список из 6 компонентов.

Например:
1. Форма – преобладание низких квадратных устойчивых форм, потому что требуется подчеркнуть основательность бренда.
2. Фигуративное, потому что ...
3. Стилизованное, укрупняем продукт бренда в пространстве, потому что ....
4. Минимализм, потому что ....
5. Цвет – синтетический, цифровой (синий и красный), потому что ....
6. Простой бэкграунд, потому что ....

2. Регистрация и настройка аватара

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

2.1. Как сделать своего аватара в метавселенной Spatial (Unity)

Для тех, кто работает в Unity, есть факультативное задание – загружаем своего аватара через Spatial SDK. В туториале используется Unity версия 2021.3.21.

Аватара можно добавить глобального (вы ходите в нем независимо от локации) и локального (работает только внутри вашего мира). Технические требования к аватарам для Spatial – формат fbx, риггинг. Аватара из примера можно скачать по ссылке.

Для глобальных аватаров допускается:
[ + ] 50к вертексов, 22,5к трианглов;
[ + ] текстурные карты 1024x1024,
[ + ] не больше 4 сабмешей;
[ + ] физические габариты до 2.5x2.5x2.5 м.

Для локальных аватаров допускается (не забываем суммарные максимальные значения в сцене):
[ + ] 200к вертексов, 200к трианглов;
[ + ] текстурные карты до 4096x4096;
[ + ] до 100 сабмешей;
[ + ] физические габариты до 25x25x25 м.
Продолжение следует >>>
Челлендж v1.0

Виртуальный шоурум 1.0

С чего все началось или немного истории

Что было в челлендже 1.0

  • Какие площадки можно делать в Spatial

    Сценарии в метавселенной для брендов, специалистов и энтузиастов.
    1
  • Технические требования к контенту

    Параметры для проведения инвентаризации вашего контента, оптимизации неоптимизированного или поиска моделей на ресурсах.
    2
  • Откуда брать готовые 3D-модели?

    Ресурсы с 3D-моделями, где есть фришный или недорогой контент.
    3
  • Кастомизация стандартного темплейта

    Как организовать собственное пространство в метавселенной за считанные минуты.
    4
  • 2D-план

    Как сэкономить время на проектировании локации в метавселенной.
    5
  • Загрузка своей локации

    Для 3D-специалистов и тех, кто решил не останавливаться на кастомизации готовых темплейтов.
    6
  • Участники проекта

    Кто уже сделал свои пространства в Spatial.
    7
  • Трансляция с площадки в Spatial

    Как подключить трансляцию через стриминговый сервис.
    8
  • Как интегрировать переход в Spatial с сайта

    Добавляем виджет с локацией в метавселенной на сайт в два клика.
    9

1. КАКИЕ ПЛОЩАДКИ МОЖНО ДЕЛАТЬ В SPATIAL

  • Создать брендированный шоурум и пригласить гостей.

    Spatial – no-code платформа. Также для разработчиков появилась интеграция с Unity.
    На бесплатном тарифном плане 11 готовых локаций под кастомизацию и пустой темплейт для собственной среды. Поддерживается простая загрузка 3D-объектов (в том числе с анимацией), фото- и видеоконтента, документов, NFT при подключении кошелька MetaMask.
    Примерок одежды и безудержного интерактива в режиме no-code пока нет.
  • Открыть галерею работ и провести вечеринку.

    Еще один плюс – на локациях можно размещать порталы на другие локации в Spatial и внешние ссылки на свой сайт, например. Редкий метаверс такое позволяет.
  • Сделать презентацию нового продукта или премьеру важного события.

    Исторически Spatial начинался с переговорок, сейчас активно используется брендами для проведения выставок и презентаций.
  • Отметить сколько-нибудь лет чему-нибудь.

    В бесплатном режиме в вашем пространстве может присутствовать одновременно до 50 пользователей.
  • Выпускать ток-шоу и подкасты.

    Есть голосовой чат.
  • Провести конференцию.

    Можно делать трансляцию своего экрана и рабочего стола на локацию.
  • Организовать воркшоп, мозговой штурм или совещание и т.д..

    Можно лепить стикеры с заметками.
  • ... и еще много чего интересного))

2. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К КОНТЕНТУ В SPATIAL

  • Фото.

    Форматы png, jpeg, tiff < 10 МБ
  • Видео.

    Форматы mp4, mov < 50 МБ, gif < 200 МБ.
    Видео можно со звуком и зациклить на локации.
  • Документы (вдруг сразу резюме или прайс прикрепите).

    Форматы pdf, и офисные Microsoft Word, Powerpoint, Excel < 100 МБ, ZIP-архив < 500 МБ.
  • 3D-модели (если вы будете работать только с фото- и видеоконтентом, то эта информация не понадобится).

    Рекомендуемые форматы glb, glTF < 100 МБ. Стандартные форматы fbx, obj < 100 МБ. Также dae < 60 МБ, pcd < 10 МБ.
    В одном файле оптимально может быть 10 объектов для окружения (максимально 20), 3 (максимально 5) – для всех остальных объектов. Не загружайте аватар с отдельными глазами и 15-тью пуговицами на жакете.
  • Анимация.

    Поддерживается записанная в файл анимация трансформации (перемещение в пространстве, вращение и масштабирование) и скелетная анимация (например, аватар в одежде, анимированный в Mixamo).
  • Количество полигонов.

    Требования распространяются на загружаемый файл в целом. В скобочках приведены максимальные значения, но лучше без фанатизма, тогда ваш мир будет стабильнее. Если вы скачиваете 3D с сайта, то эти параметры обычно есть в описании файла. Рекомендуемое количество трианглов < 15к для одного объекта (< 30к максимально), < 60к для окружения (< 180к максимально).
  • Текстуры и материалы.

    Рекомендуются POT-текстуры 1024x1024 px до 8 текстурных карт единовременно (максимально до 16 текстурных карт 1024x1024 px или до 4 текстурных карт 2048x2048 px).
    Официально рекомендуется плоский шейдер Unlit с картой цвета без учета освещения. PBR-текстуры похожи на стандартный шейдер Unity. В загружаемом объекте можно использовать карты цвета, нормалей, металличности, шероховатости, окклюзии окружения. Прозрачность поддерживается текстурной картой в альфа-канале. Также можно настраивать эти значения в самом 3D-редакторе перед экспортом. Но с картами лучше результат. Эмиссия поддерживается текстурной картой в канале свечения. Анимации текстур нет.
    Пространство Spatial с примерами настройки материалов в Blender.

3. Откуда брать готовые 3D-модели?

https://sketchfab.com/ прямая интеграция в Spatial
https://free3d.com/ru/
https://3ddd.ru/ мекка интерьерщиков
https://open3dmodel.com/ru/
https://c4ddownload.com/
http://threedscans.com/ бесплатные сканы музейных экспонатов без текстур, но перед импортом в метаверсы надо сделать редукцию полигонов
https://www.cgtrader.com/
Бесплатные hdri-текстуры окружения https://hdrihaven.com/hdris/
https://pixexid.com/search/360

4. Кастомизация стандартного темплейта в Spatial

Я записывала в пространстве Agora. Вы можете выбрать любую подходящую площадку. Принципы работы, персонализации, внешних ссылок и продвижения одинаковые.

5. 2D-план локации в метавселенной

Для собственного мира в Spatial в качестве окружения размещается экспорт уже готовой локации, которую вы предварительно собираете и настраиваете в любом 3D-редакторе с учетом всех технических требований.
2D-план предшествует работе в 3D-редакторе. Может выполняться хоть на салфетке. Искренне советую не пропускать этот этап.
Зачем нужен 2D-план? Позволяет существенно сэкономить время и ресурсы на дальнейшую разработку. Появляется общая картина локации: где какие объекты, куда что движется, как будет путешествовать пользователь.
Теорию по 2D-плану и логику построения сцены мы с вами рассматривали в кейсе проекта 蓝蚂蚁 в AltspaceVR. Только в Spatial в большинстве случаев не надо обносить периметр открытой локации коллайдерами, пользователь перемещается до тех пор, пока под ним есть полигоны.
Реализация 2D-плана на локации 蓝蚂蚁 в Spatial

6. Размещение своей локации в метавселенной Spatial

Рассматриваем, как загружать собственное окружение и создавать скайбоксы. Ссылка на ресурсы, использованные в видео: архив скайбокса.
7. Проекты участников

8. Трансляция с площадки в Spatial

Можно расшерить для всего мира в любой из ваших каналов – TG, Youtube, VK и т.д. через привычные приложения по трансляции. Я, например, использую OBS.

9. Как интегрировать переход в Spatial с сайта

На своем сайте можно размещать виджеты пространства, созданного на платформе Spatial. HTML-код для вставки через <iframe>:

<iframe src="ссылка на ваше пространство" allow="microphone https://spatial.io; camera https://spatial.io"></iframe>

Где параметр ссылка на ваше пространство надо заменить на ссылку вашей локации в Spatial. Если сайт на Тильде, то блок <iframe> внедряется через блок T123 для вставки HTML-кода.
Будем рады, если вы поделитесь с нами своими успехами в Spatial по результатам этого лонгрида.