Виртуализируем впечатления от отдыха
Всем привет! На носу майские праздники, а значит, многие из нас вскоре отправятся в различные путешествия: посетят далекие страны, ну или ближайшие лесные массивы и речные берега. После праздников, как обычно, придет время делиться впечатлениями. Сегодня я хочу рассказать вам о том, как с помощью смартфона и без всяких громоздких штативов, объективов «фиш-ай» и прочих панорамных головок создать полноценный виртуальный тур по местам боевой славы вашего отдыха. Таким образом, вы сможете сохранить и передать свои впечатления в несравненно более ярком, атмосферном и интерактивном виде.
Вам понадобятся:
Вы можете создать в вашем браузере закладку со следующим кодом в поле URL: javascript:(function (){var d=document.getElementsByTagName («a»); Array.prototype.slice.call (d).forEach (function (b){var c; if (c=b.href.match (/megavisor.com\/(en|ru)\/view\/(\{{0,1}([0–9a-fA-F]){8}-([0–9a-fA-F]){4}-([0–9a-fA-F]){4}-([0–9a-fA-F]){4}-([0–9a-fA-F]){12}\}{0,1})/)){var a=document.createElement («iframe»); a.src=»//media.megavisor.com/player/embed?»+c[2]; a.width=640; a.height=480; a.frameBorder=0; a.setAttribute («allowFullScreen»,»); a.setAttribute («webkitAllowFullScreen»,»); b.parentNode.replaceChild (a, b)}})})(); Если кто-то не знает, это называется «букмарклет» и эта штука позволяет, в данном случае, заменить ссылки в статье на плеер, что очень удобно при просмотре как данного материала (не нужно лишний раз метаться по вкладкам и внешним ссылкам), так и впоследствии, для просмотра любых страниц, где встречаются ссылки на объекты MEGAVISOR. Работает это просто: вы открываете страницу, щелкаете по закладке, после чего срабатывает скрипт и в статье (Хабра-Швабра-Кадабра) появляются фотосферы и интерактивная анимация.Пример: megavisor.com/ru/view/7a28c456-a8ee-42d8–9e3d-42c1943ee81e
Сначала нам необходимо отснять все локации и последовательности кадров для анимации. Это можно сделать как с помощью упомянутого приложения Google Camera, так и с помощью иных средств, позволяющих снимать фотосферы. Владельцы iPhone, например, могут использовать приложение Sphere.В алгоритме съемки фото-сфер достаточно просто разобраться и думаю ни у кого с этим не возникнет особых проблем, поделюсь лишь парой практических советов:1) Вращать смартфон при съемке желательно таким образом, чтобы объектив находился как можно ближе к центру сферы вращения. Это позволяет минимизировать эффект параллакса и получить более качественный результат.2) При съемке верхней части фотосферы на улице в солнечный день, вас может достаточно сильно слепить, и вы можете не видеть того, что отображает экран смартфона. В этом случае, очень полезными окажутся головной убор с козырьком и капюшон.3) Снимать лучше всего открытые пространства. Чем ближе к вам расположены объекты при съемке, тем труднее с ними справится автоматическому алгоритму, сшивающему сферическую панораму (опять-же из за параллакса).4) Фотосфера гораздо лучше сшивается при съемке в вертикальной ориентации (меньше горизонтальных изломов, которые наблюдаются из-за отсутствия объектива «фиш-ай»).
Со съемкой кадров анимации все несколько проще, тут достаточно держать смартфон более-менее ровно и делать кадры как можно чаще (для плавности). При такой съемке желательно держать смарфон горизонтально, ну вы понимаете…
Для публикации нужно будет предварительно перенести полученные фотографии на ваш компьютер (да, мы делаем мобильное приложение, но оно еще не готово).Тут (требуется регистрация): megavisor.com/composer/ — можно выбрать тип публикуемого контента (там есть примеры, помогающие разобраться) и залить файлы. Обратите внимание на настройки приватности: для того, чтобы опубликовать интерактивный объект на своем сайте или, например, в Facebook, должен быть установлен статус «Публичный».
После загрузки исходников и создания объектов, вы можете объединить ваши объекты в виртуальный тур или добавить внешние ссылки. Для этого можно воспользоваться данным инструментом: megavisor.com/linker/В ваш виртуальный тур могут быть включены следующие типы объектов: Фотосфера Фото-360 (интерактивная фотография объекта со всех сторон) Интерактивная покадровая анимация (это может быть любая анимация, которой можно управлять) Слайдшоу (просто набор картинок с пролистыванием и зумом) Видео (на видеоролик можно ставить ссылку, однако активные элементы в самом видео пока не поддерживаются) Переходы между объектами тура происходят по тому-же принципу, по какому это происходит в браузере: в плеер загружается новый объект, а сам переход запоминается в «хистори» плеера. megavisor.com/ru/view/c31b8c8e-f822–4e27–8fcd-2afb67321a53Приведенные примеры сняты на LG Nexus 5, вот такой: megavisor.com/ru/view/ed387d7a-c062–4397–8694-b16d32b87ce7
