Разработка WebVR-сайта «Белая башня»

Главное о кейсе

Спустя несколько дней с запуска наш сайт попал в подборку на главную страницу Muzli, снискал признание международного дизайнерского сообщества: получил статус Site of the Day на конкурсах Awwwards, CSS Design Awards и FWA. Вызвал море положительных откликов в соцсетях, в основном от иностранцев.

Запуск состоялся 14 октября 2019. По итогам:
более 15 000 посещений за первую неделю,
более 35 000 посещений за первый месяц.

Широкая география пользователей, топ-5 стран:
1. Россия — 6 500 пользователей,
2. Америка — 2 900,
3. Индия — 2 300,
4. Франция — 1 800,
5. Великобритания —1 400.

А главное, возможность поддержать Белую башню оказалась интересной не только пользователям из России, но и по всему миру. Согласно данным статистики только половина людей, перешедших на страницу поддержки проекта, из России. Следом: Индия, Китай, Южная Корея, Америка, Германия, Бразилия, Франция и Великобритания.

===

A few days after the launch, our site has been featured in top picks on Muzli, and earned recognition from the international design community by winning Site of the Day on Awwwards, CSS Design Awards and FWA. It also caused a sea of ​​positive feedback on social media, mainly from foreign users.

The launch took place on October 14, 2019. As a result:
over 15,000 visits in the first week,
over 35,000 visits in the first month.

Wide geography of users, top 5 countries:
1. Russia – 6,500 users,
2. United States – 2,900,
3. India – 2,300,
4. France – 1,800,
5. Great Britain — 1,400.

And most importantly, the opportunity to support the White Tower was interesting not only to users from Russia but also from around the world. According to statistics, only half of the people who clicked on the project support page were from Russia. The rest were from India, China, South Korea, United States, Germany, Brazil, France, and the United Kingdom.

Бизнес-задача и ее решение

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

Белая башня — идеальный объект для VR. Это сложная конструкция, которую хочется разобрать на части, чтобы рассмотреть каждую со всех сторон. Мы собрали все архивные материалы и старые чертежи, разбили их на 10 сцен и нарисовали эскизы сразу в виде 360-панорам в Affinity. Затем создали 3D-модели объектов в Blender и расположили их в трехмерном пространстве в соответствии с эскизами. Нарисовали отдельно иллюстрации в стиль. Для сборки сайта мы использовали фреймворк Three. js. Каждая сцена упакована в отдельный файл — так проще вносить правки и исправлять баги.

Чтобы сайт работал на любых устройствах, мы применили те же технологии, что и в производстве игр — максимально упростили модели, снизив количество точек и полигонов. Свет, тени и рефлексы мы зафиксировали в текстуре самих объектов, чтобы конечному устройству не нужно было просчитывать освещение при их передвижении. Так всё работает значительно быстрее.

WebVR-сайт можно посмотреть на любой VR-гарнитуре: Samsung GearVR, Oculus Go, Oculus Rift, HTC Vive. Неважно, сколько в вашей гарнитуре контроллеров и сколько измерений они понимают. Взаимодействовать с объектами можно и с 3DoF-контроллерами, и с 6DoF.

===

From the moment WebVR technology got stronger and the first references appeared, we really wanted to do something large-scale, beautiful and resonant with it. And the White Tower in our hometown Yekaterinburg is a unique architectural object with a difficult fate. This is a water tower, which was built for the Uralmash, one of the largest engineering enterprises in Russia. It was important for us not only to try out the new technology but also to draw attention to the White Tower and help save it.

The Water tower is an ideal object for VR! It is a complex structure that you want to dismantle in order to examine each element from all sides. We divided all material we had into 10 scenes and drew sketches as 360 panoramas in Affinity. We created 3D models of objects in Blender and arranged them in three-dimensional space in accordance with the sketches. To build the site we used Three. js. Each scene is placed into a separate file – this way it is easier to make changes and fix bugs.

To make the site work on any device, we applied the same technologies as in the production of games – we simplified the models as much as possible, reducing the number of points and polygons. We baked light, shadows, and reflections into the textures of the objects so that the final device doesn't need to calculate the lighting when they are moving. This way, everything works much faster.

It can be viewed in any VR headset: Samsung GearVR, Oculus Go, Oculus Rift, HTC Vive. It doesn't matter how many controllers are in your VR headset and how many directions they can track. You can interact with objects with both 3DoF and 6DoF controllers.

Прочая информация о кейсе

WebVR-сайт Белой башни — полноценная виртуальная экскурсия с погружением в эпоху конструктивизма. Надевая VR-шлем, пользователь может покрутить в руках детали башни, послушать и почитать о жизни башни на русском и английском. Сайт адаптивный и доступен к просмотру на десктопе, на смартфонах и планшетах. Любой человек из любой точки мира с любого устройства может оказаться внутри Белой башни, погулять по ней, осмотреть с разных сторон. Для этого мы не только создали 3D-реконструкцию башни по реальным чертежам, но сняли фотопанорамы внутри и снаружи башни.

===

WebVR site for The White Tower — full virtual tour and immersion in the era of constructivism. Putting on a VR headset, a user can get inside the tower, touch and move all its elements, listen and read about the life of the tower in Russian and English. The site is fully responsive and can be viewed on the desktop and on mobile devices, including the smallest ones, like an iPhone SE. Any person from anywhere in the world and from any device can get inside the White Tower, have a walk, and inspect it from different sides. In order to do this, we not only created a 3D reconstruction of the tower based on the real drawings but also took panoramas inside and outside the tower.

Скриншоты

Видео