Кейс создания WebVR-сайта: грабли, решения и инсайты

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

Мы JetStyle — digital-продакшен в Екатеринбурге. Мы любим и умеем делать всё, что связано с дополненной и виртуальной реальностью. Когда технология VR в браузере окрепла и появились первые референсы, нам захотелось сделать с ее помощью что-нибудь полномасштабное, красивое и резонансное. И мы взялись за WebVR-сайт Белой башни.

Замахнуться на великое несложно — сложно учесть все нюансы, обойти технические ограничения и показать, на что способна новая технология (в которую мы верим и которую очень давно ждали).

Мы искали некоммерческую, еще не ангажированную, но зрелищную и интересную тему. А раз наш родной Екатеринбург полон редких памятников конструктивизма, мы просто оглянулись — и увидели Белую башню.

Это уникальный архитектурный объект с тяжелой судьбой. Уже много лет заброшенную башню опекают ребята из арх-группы «Подельники», наши друзья. Мы подумали, почему бы не сделать их нелегкий крестовый поход чуть более эффективным?

А еще башня — идеальный объект для VR. Это сложная конструкция, которую хочется разобрать на части и рассмотреть каждую со всех сторон. К тому же у нас под рукой было очень много материалов. «Подельники» открыли нам доступ к фотоархиву башни в хорошем качестве, а мы перелопатили книги по архитектуре и исторические хроники Екатеринбурга.

Сначала мы разбили весь материал на 10 сцен. Если сравнивать с производством видеороликов (а VR — это вполне себе мультимедийный контент), то обычно дальше рисуют эскизы. И здесь первый интересный момент.

В последних версиях появился режим 360˚— вы можете развернуть плоскую картинку на сферу. Рабочее окно приобретет вид панорамы. Вы рисуете кусочек эскиза — поворачиваете «лист» — рисуете следующий.

В результате получаете самую настоящую панораму 360˚. Но есть одно «но» — после того как вы что-то нарисовали, Photoshop не может показать вам развертку панорамы на плоскости, чтобы вы увидели, как объекты расположены относительно друг друга.

Каждую версию приходится экспортировать и смотреть в VR-шлеме. К тому же в Photoshop в режиме 360˚ не очень удобно работать со слоями. Поэтому мы выбрали другой инструмент.

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

Вы еще точно не знаете, как построить сцену: где будет бак башни, а где лестница, сколько будет объектов и на каком расстоянии друг от друга они будут расположены. И если у вас нет возможности временами поглядывать на всю панораму целиком, вы не сможете оценить, в правильную ли сторону двигаетесь.

С этой точки зрения, Affinity больше подходит для творческого поиска. А Фотошоп хорош, когда вам нужно нарисовать нечто конкретное, уже спланированное, по сетке.

Вот так выглядел процесс прототипирования:

Конечно, VR-концепты удобнее всего делать сразу в виртуальной реальности. Tilt Brush в этом плане самый продвинутый инструмент. Художник сразу проверяет все свои мысли, не теряя времени на экспорт картинок после каждой итерации. К тому же в Tilt Brush честный VR — вокруг вас трехмерные объекты в трехмерном пространстве, а не их проекция на плоскости.

Но если подходящие VR-очки не всегда под рукой или нет навыка рисования в Tilt Brush, а эскиз нужно сделать быстро, то Affinity — оптимальный вариант.

После того как вы нарисовали эскиз в Photoshop или Affinity, надо его в чем-то посмотреть. Экспортируете картинку и открываете ее с помощью стандартного приложения для просмотра 360˚-панорам в VR-очках, например Oculus Gallery. Приложение открывает панораму как обычную фотографию, снятую панорамной камерой — и вы уже смотрите эскиз в VR.

Мы работали с онлайн-сервисом Kuula. Он позволяет не только смотреть отдельные фотки, но и создавать виртуальные туры. Загружаете несколько панорам с эскизами, расставляете точки перехода от одной локации к другой и добавляете подписи. И всё это прямо в браузере!

Когда тур готов, у него появляется URL. Вбиваете ссылку в VR-браузере — и гуляете по пространству, которое еще только предстоит воплотить. Можно понять размеры, объемы, где что располагается, насколько это все понятно, удобно и интересно.

С таким набором инструментов первый этап работы над VR-сайтом быстрый и дешевый. До этого момента никто не применял сложных технических инструментов, не тридэшил и не кодил.

Зато есть те же самые радости, которые есть в скетчинге: нарисовали — не понравилось — быстро переделали. Такой подход позволяет попробовать разные идеи и уберегает от траты сил, денег и времени на реализацию штуки, которая может оказаться неинтересной и неудобной.

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

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

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

Чтобы текстура накладывалась на объекты корректно, нужна правильная развертка трехмерного объекта на плоскости. Для этого мы преимущественно использовали автоматизированное решение — плагины для Blender, а кое-где сделали это вручную.

Процедурный свет, то есть динамически просчитываемый, бьет по ресурсам. Поэтому свет, тени и рефлексы мы запекли в текстуре самих объектов, чтобы конечному устройству не нужно было просчитывать освещение при их передвижении. Так все работает значительно быстрее.

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

Чтобы программист всё понял без лишних слов, мы добавили каждому объекту определенные кастомные свойства. К примеру, если с объектом можно взаимодействовать, в Блендере у него появлялся соответствующий ярлык.

Сперва мы попробовали собрать WebVR-сайт на Verge3D, но сам проект оказался гораздо сложнее, чем мы планировали (и чем предполагает рендерер, все-таки он создан для несколько других целей).

Поэтому после первых испытаний мы изменили архитектуру и собрали всё это в связке Blender – GLTF – three.js. На практике проверили, что так сайт ведет себя предсказуемее и работает быстрее.

Еще мы использовали TypeScript (чтобы иметь подсказки типов со стороны среды разработки) и Webpack в качестве транспайлера для языка в JS, для манипуляций с ресурсами, для хеширования gltf-ок и разбиения текстур по разрешениям.

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

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

Достаточно только указать URL, где лежат сами модельки. К тому же модуль написан так, что из его кусочков вы можете собрать то, что вам нужно. Библиотеку мы выложили на npm.js.

На Oculus Browser все с самого начала работало исправно, а с Firefox Reality пришлось немного повозиться. Первая проблема — не поддерживается сглаживание. Вторая — недостаточная производительность.

Экспериментальным путем мы выяснили, что есть одно разрешение, под которым наш сайт в Firefox Reality работает корректно, — 1024, на любом устройстве. Поэтому мы сделали таблицу устройств — для какой модели VR-гарнитуры какое разрешение является оптимальным, — и создали специальный загрузчик.

И если мы запускаемся из браузера Oculus, то для Oculus Quest установлено разрешение 2K, для Oculus Go — 1K. А когда мы запускаемся с Firefox, мы игнорируем модель девайса и всегда берем 1024.

Если в VR-версии пользователь путешествовал между 10 точками и в каждой сцене считывал информацию вокруг себя, то для десктопной версии мы развернули историю линейно. Вместо 10 сцен — 34 шага. Вместо сфер, где информация окружает пользователя со всех сторон, — блоки контента, между которыми летает камера.

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

Поэтому если у вас есть шанс посмотреть сайт в VR — не упускайте! Там гораздо больше интересных фактов, фотографий и иллюстраций (а еще в перелетах между сценами захватывает дух).

Текущая политика мобильных браузеров такова, что сайт загружается целиком, а звук — частями, сцена за сценой. Звук следующей сцены подгружается в момент перехода к ней.

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

WebVR-сайт для Белой башни работает на двух языках: русском и английском.

Посмотреть его можно с любой гарнитуры:

Неважно, сколько в вашей гарнитуре контроллеров и сколько измерений они понимают. Взаимодействовать с объектами можно и с 3DoF-контроллерами, и с 6DoF.

Если у вас нет под рукой VR-шлема, посмотрите скринкаст, который мы записали на Oculus Quest:

Сайт адаптивный, его удобно смотреть с ноутбуков, планшетов и смартфонов, в горизонтальной и вертикальной ориентации. Главное, для полного погружения не забывайте включать звук.

Теперь можно сделать один сайт сразу для всех устройств и всех пользователей. Никакой дискриминации по признаку технологической оснащенности.

С точки зрения публикации, технология WebVR делает из VR-приложения обычный сайт и дает ему все те же преимущества: сами создали (без строгих требований сторов), сами опубликовали (без одобрения сторов) и сами обновили (без ожидания ответа от сторов).

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

Этот шаг несложный, но пользователям бывает некогда, несподручно или просто лень. WebVR-формат избавляет их от лишнего действия, а значит, ваше новое VR-пространство достигнет больше глаз и ушей.

Виртуальная реальность — лучший способ ввести человека в нужный контекст и оградить его от контекста ненужного. Когда человек надевает VR-шлем, он сконцентрирован на том, что видит и слышит вокруг себя. Внешний мир перестает существовать. И если материал подан интересно, то воздействие максимальное.

Технология WebVR вполне себе живая, рабочая, и ей можно пользоваться. Да, есть некоторые ограничения, но все их можно обойти, не потеряв художественной ценности и пользы. Это открывает море возможностей!

WebVR ни в чем не уступает виртуальной реальности в приложении. При грамотном подходе к дизайну можно сделать VR-опыт в браузере ничуть не хуже, чем через приложения, и для этого уже сегодня есть множество удобных инструментов. Мы проверили!

Если вам интересна тема WebVR, у вас есть идеи ее применения или остались вопросы, напишите нашему руководителю направления AR и VR — Алексею Маркину.

#webvr #vr