Человек всегда мечтает о будущем, о том, что ему недосягаемо. Эти мечты способствуют развитию мира, прогрессу, появлению технологий. Когда-то человек не мог подумать о том, что сможет уподобиться птице; сейчас же, даже обладая возможностями выхода в открытый космос и запуска спутников, он всё еще поднимает взор на небо и размышляет о межгалактических крейсерах и далеких-далеких галактиках. Но сколько из того, о чем рассказывали нам писатели-фантасты в своих книгах, действительно существует уже сейчас? Как минимум это – виртуальная реальность (VR).

Что такое VR и как это использовать – многие уже наслышаны, а может кто-то из читателей блога даже имеет гарнитуру виртуальной реальности. Другой вопрос, способный взбудоражить творческие умы, да и не только: «Неужели технологии VR способны найти свое применение в веб-дизайне?»

Ответ: Да.

И мы расскажем вам и даже покажем.

Что есть веб в VR

Двухмерное пространство (2D) вполне может превратиться в 3D, стать интерактивным и ощутимым. Представьте, что находитесь в огромной библиотеке, где, например, о Древнем Египте можно не читать, а смотреть информацию. Вы проходите мимо пирамид, мимо Сфинкса, идёте дальше и видите под ногами дюнные насыпи. Пройдя еще немного и, активируя следующие блоки данных, переноситесь в центр Аль-Кахира или Саиса, а может даже и Напаты, прогуливаетесь по улочкам, рынкам, среди приземистых кирпичных зданий и только еще издалека начинаете замечать высокие пальмы, бассейны и сады со статуями фараонов и древних богов. Но главное, вас постоянно сопровождает виртуальный гид, повествующий об истории этого мира, культуре, экономике древней цивилизации. И да, не обходится без характерных звуков и атмосферности окружающей среды.

Впечатлены?

Посмотрите на созданную виртуальность тест-драйва для Volvo XC90 (видео по ссылке), познакомьтесь с параметрами, положениями сидений, почувствуйте скорость автомобиля.  Еще лет двадцать назад мысли о том, чтобы смотреть Олимпийские игры в очках виртуальной реальности, была сродни с использованием голодека из Звёздного Пути. А ведь впервые используя технологию в 2016 году, теперь Samsung и зимние игры 2018 года будет транслировать в виде VR.

И это уже не фантастика, но еще и не обыденность.

Аппаратные средства для использования этой технологии пока еще находятся в «зачаточном» состоянии. Это и HD-камеры, 360-градусные, мощные и высокоскоростные графические процессоры, особые модели смартфонов. Но устройства эти громоздкие, дорогостоящие и не слишком еще распространены ни на рынке, ни у пользователей. С ростом выпуска продукции, разумеется, и  цена станет ниже, и массовое использование возрастет, и технология будет боле развитой.

Эксперименты веб-дизайна с VR

Для того чтобы технология виртуальной реальности стала доступной, создан был JavaScript API, именуемый как WebVR. Именно эта библиотека позволяет обеспечить доступ к таким устройствам, как Oculus Rift или Google Cardboard; она также встроена в Nightly Firefox, Chromium, браузер Samsung; можно даже использовать эмулятор VR с помощью расширения для Google Chrome. Но, так или иначе, без гарнитуры вы ничего не сможете почувствовать и рассмотреть и требуется именно гарнитура для VR, а не обычные очки из кинотеатра с темными или разноцветными «линзами». Впрочем, для веб-дизайна используют и их, но об этом в другой раз.

Запаслись устройствами? Тогда самое время отправиться на MozVr и открыть один из 11 проектов, представленных там. Если  вы еще остались у нас, то изучите документацию на Mozilla Developer Network по подключению гарнитуры и смартфонов и посетите Vizor.io и создайте сами красивый проект. Если же вы счастливый обладатель HTC Vive, то первые шаги по веб-дизайну с технологией VR вам лучше совершить вместе с проектом A-Painter.

В отличие от развлекательной среды, функциональность VR в веб-дизайне и в интернете в целом  представляет собой сложную экосистему. Гораздо чаще мы видим отдельные интерактивные сайты, сайты с элементами 3D, перспективой и анимацией. Увидеть подлинную виртуальную реальность не возможно.

Особенности существующего веб-дизайна с VR

Обычно все пространство рабочего стола на экране монитора занимает 30-40 см, когда как остальная ширина экрана просто не используется. Человеческому глазу достаточно иметь все элементы в пределах этой ширины и сосредоточенность будет обеспечена.

В виртуальной реальности нет единого холста, нет верха и низа. Вы поворачиваете голову и видите дополнительный холст с информацией, смотрите вниз – информации становится больше. У вас нет некой рамки, в пределах которой вы ищите информацию и познаете её. Это (с рамкой) –  уже Дополненная реальность (а-ля, знаменитый проект Pokemon Go). Виртуальная реальность, наоборот, погружает вас в новую среду обитания, словно обнимая вас собой.

Именно поэтому многие веб-дизайнеры, создавая экспериментальные проекты, создают вариации VR в виде 360-градусового веб-дизайна, которые представляют собой эдакий аналог VR, но в 2D пространстве. Поглощения нет, нет необходимости поворачивать голову, вы прокручиваете холст курсором мышки, а глубина (перспектива) – «искусственная».

Проект Rainforest как раз и выглядит как большая интерактивная карта, которую можно изучить. Есть у вас очки и можете ли вы покрутить головой или только мышка, но в любой категории просто зажмите ЛКМ смотрите, изучайте, наслаждайтесь джунглями.

Автосалон BMW предлагает отправиться в виртуальный тур. Передать словами красоту проекта, эмоции с помощью пары скриншотов попросту нереально. Прогуляйтесь по салону, не выходя из дома!

Проект путешествия по Турции – города, замки, руины, пещеры, горы, улицы и прочее позволит прикоснуться к VR, не имея гарнитуры. Движения, загрузки, интерактивность была воссоздана в 2D-пространстве. Невероятный проект, красивый. Просто крутите вокруг себя (а не сами себя) карту, выбирайте элементы (кружочки), кликайте и переноситесь на новую местность.

Google, разумеется, тоже решили использовать фантастические технологии и предлагают изучить древний город Петра в очках или в 2D.

Виртуальный тур по JUB кампусу и общение со студентами – великолепный пример дополненной реальности.

На сайте Awwwards еще много интересных работ по виртуальной реальности и интерактивности. Как и панорамных проектов в 3600. Некоторые из них изначально предлагают подключить VR-гарнитуру, другие же дают посетителям выбор между VR и 2D интерактивным вариантом.

Если же рассматривать тематику таких проектов, то в наши дни она еще достаточно специфична. VR или 3600 используют для создания культурных проектов (музеев, путешествий, изучения городов и стран); спортивных (экспериментальный проект Samsung для Олимпийских игр); для демонстраций продукции компании, как это создали в Siemens; в развлекательной среде.

Не для каждой тематики можно создать веб-дизайн в VR. И не по причине сложности или невозможности. Нет в этом необходимости. Если веб-дизайнер создает интернет-магазин, то какой смысл вертеть головой и искать хлеб или пару туфель? Впрочем, интересные идеи все же есть, но они, скорее, в виде идеи. Но если создается проект туристический или для авиакомпании, то VR, интерактивность и 3600 будут очень интересной и отличной находкой.

 Необходимость VR для веб-дизайна

Веб-разработчики все больше используют стандартизацию, ибо даже в VR мы ожидаем привычный интерфейс. Так, например, на Samsung Gear VR в браузере перед глазами находится знакомый веб-интерфейс: повороты головой, наклоны, голосовые команды работают так же, как мы привыкли при использовании клавиатуры и мышки. И этого на данный момент достаточно, чтобы представить потребителям технологию виртуальной реальности. И именно поэтому её не сложно интерпретировать в вариации 360-градусного веб-дизайна в 2D-пространстве.

 

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

«Стоит ли изучать WebVR веб-дизайнеру?» – спросите вы. Определенно, да. В ближайшем будущем и разработчики, и дизайнеры будут использовать VR на своих сайтах. Это и интерактивные карты, учебные пособия (справки, FAQ и пр.), различные визуализации. А все это, как известно, те элементы, которые почти всегда используются на большинстве сайтов и необычность которых дает преимуществу проекту в конкурентной борьбе.

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

Если говорить о сложности, то практически все проекты базируются на A-Frame, наборе библиотек с открытым исходным кодом (open-source WebVR framework) для работы с HTML. В основе A-Frame  находится three.js, а потому её легко интегрировать с большинством существующих сейчас инструментов веб-разработки. Одним словом, на сайте A-Frame есть и примеры кода, и визуализации.

 

Будущее VR и веб-дизайна

Вполне очевидно, что стандарты веб-дизайна будут совмещаться с технологией виртуальной реальности. Но некоторые вещи попросту исчезнут. Например, даже если новостные порталы будут создаваться в виде VR, многие по привычке продолжат использовать 2D-вариацию, ибо привыкли к удобству чтения. В погоне же за вариантами оформления веб-интерфейса в VR уходит на второй план выбор использования плоских или объемных кнопок, плиточных элементов или небольших теней под ними. VR оперирует с глубиной в пространстве и создает окружение из информации, фотографий, видео. И будет ли под интерактивным элементом легкая тень или нет – не столь важно, главное, чтобы было понятно и красиво, не раздражительно и не аляповато.

Что же до ближайшего десятилетия, то компании продолжают инвестировать в развитие данной технологии, а устройств появляется все больше. Если есть стремление достигнуть вершины технологий веб-дизайна и остаться на ней, то следует задуматься: Какие устройства запускаются компаниями в продажу? В какой отрасли более востребованы проекты веб-дизайна для VR? Какими гаджетами можете воспользоваться именно вы, чтобы не просто создавать, но тестировать и изучать тему?

Выводы

Отличная новость – принципы хорошего веб-дизайна выдержали испытание временем. Многие теории, формирующие сейчас наше понятие о том, каким должен быть веб-интерфейс, были сформулированы ещё сотни лет назад, если не тысячи. Поэтому вне зависимости от вашего инструмента или технологии – как раз эти принципы и теории будут с вами всегда, именно они и позволят создать сайт, который будет также интересен, информативен, функционален при просмотре в очках VR, как и в 2D-варианте (3600).

И надо заметить, что люди все больше и больше готовы окунуться в VR, увлечься интерактивностью, оказаться в тех самых далеких и давних мечтах о будущем.