Pano2VR

О программе

Pano2VR – программа для управления панорамными изображениями и экспорта их в презентационный проект, виртуальный тур, анимацию. Сама программа панорамы из разрозненных фотографий не сшивает, а только предоставляет многочисленные удобные инструменты для того, чтобы готовые 2d изображения представлять в 3d виде как-будто зритель стоит в центре сцены и с помощью мыши вращает всё вокруг себя. Кроме этой базовой функции программа позволяет добавлять гиперссылки на другие панорамы, на PDF файлы, на HTML страницы. В сцену можно встраивать медиа: картинки, звук, видео. P.S. Лучшая программа для создания статичного файла-панорамы PTGui.

Быстрый старт

Если у вас есть уже готовое панорамное изображение, то достаточно его добавить в проект и сделать экспорт, например в Web. Вы получите небольшое приложение, состоящее из набора файлов html, css, js, xml и медиа. Проект можно выложить на любой сайт и любой человек сможет его посмотреть. Это самый простой и быстрый подход.

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

Переходы между панорамами. Как и в любой презентации вам необходимо обеспечить навигацию по слайдам, в нашем случае – по панорамам. Pano2VR предоставляет разные способы для этого:

• Можно добавить на Панораму_1 элемент, например, "Точку хотспота", выбрать "Тип"="Сцена тура" и "Сцена тура"="имя_другой_панорамы".
• При экспорте выбрать шаблон, в котором присутствует панель навигации, например, шаблон feather_orb.ggsk В общем-то во всех предустановленных шаблонах есть навигационные панельки, только в разном дизайне.

Шаблоны

Шаблоны – это по сути темы веб-интерфейса проекта. Это набор графических элементов, которые могут присутствовать в вашем виртуальном туре после экспорта в Web. Есть предустановленные шаблоны, доступные на панели "Экспорт". Также можно создать свой шаблон с нуля. Для объектов, добавленных в шаблон, можно назначить различные действия на различные события.

По кнопке [Редактировать шаблон] открывается Редактор шаблона (Skin Editor). Объекты на холст добавляются с верхней панели. Большой набор иконок есть под кнопкой [Библиотека компонентов]. Только что добавленные иконки поначалу не функциональны. Но в разделе "Действия" на панели "Свойства" выделенной иконки можно функциональность обеспечить по полной (большое разнообразие событий и откликающихся на них действий). Этот инструмент позволяет, например, по клику на один элемент как-то изменять другой элемент или манипулировать со всей панорамой.

Допустим, я хочу чтобы пользователь мог масштабировать панораму не только мышью/жестом, но и по кнопкам (+) и (–):

• Захожу в Редактор шаблона, кликаю на [Библиотека компонентов], открываю закладку "Иконки", выбираю подходящие иконки для (+) и (–), совершаю по каждой двойной клик мышью, иконки добавлены в шаблон.
• Теперь в Рабочей области шаблона перемещаю эти иконки в нужное место. Потом назначаю для них действия: выделяю иконку (+), в табличке "Действия" вызываю двойным кликом по пустой строке окошко "Настройки действия", выбираю в поле "Источник" значение "Клик мыши", выбираю в поле "Действие" значение "Перемещение панорамы", выбираю в поле "Тип" значение "Увеличить масштаб".
• Аналогичную операцию проделываю для иконки (–), только "Тип" задаю "Уменьшить масштаб". Всё.

Если нужно стилизовать изображение, например, сделать так, чтобы при наведении мыши курсор приобретал вид руки, а само изображение менялось на другое:

• Выделить иконку-кнопку.
• Свойства > Внешний вид > Cursor = Hand;
• Свойства > SVG изображение > При наведении > нажать [Изменить] и выбрать с диска или выбрать по кнопке [Библиотека компонентов].

Стилизовать также можно с помощью CSS-кода: Свойства > Расширенные > CSS стили > написать код.
Менять цвет svg-иконки можно по кнопке [Инструменты цвета], расположенной на верхней панели Редактора шаблона справа.
Более того, программа позволяет работать с переменными. Создавать переменные, менять их значения в зависимости от событий, и назначать влияние значения переменной на действия.

Элементы

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

• Заплатка. Изображение, добавляемое на определенное место, чтобы закрыть область под закладкой. Часто при создании панорамы фотоаппарат стоит в центре сцены и делает фотографии по кругу. После сшивания панорамы самая нижняя точка и самая верхняя остаются черными. Вот эту область и надо бы закрыть.
• Точка хотспота. Это иконка, на которую можно навесить какое-то событие из небольшого списка после клика на нее. Например, переход на другую панораму/сайт, отображение блока с текстом...
• Полигональный хотспот. Функционал тот же, что и у Точки хотспота, но внешней видимости нет. Зато кликабельную площадь можно нарисовать в виде полигона.
• Звук. Есть возможность добавить звук, который будет воспроизводится при открытии панорамы. А фоновый звук для всего проекта можно назначить в свойствах проекта на левой панели.
• Изображение. На панораме можно отображать картинку PNG или JPG. У картинки есть немало свойств. Программа в упор не желает добавлять GIF и, если вам хочется добавить анимированный gif, то перед добавлением просто переименуйте расширение файла с gif на png, и все дела.
• Видео. Получается довольно эффектно – видео крутится вместе с панорамой. Например, его можно аккуратно вписать в какой-нибудь экран телевизора на панораме.
• Веб-элемент. На панораму можно добавить окно, в котором будет отображать какой-нибудь сайт или интерактивное веб-приложение.
• Блик. Это результат рассеяния света внутри объектива камеры. Вспышка может проявляться как дымка или узор из артефактов. Вы можете добавить блик, чтобы придать изображению большую глубину и размерность.

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

Аудио

Естественно, что такая продвинутая программа работает с аудио. Четыре основных подхода для внедрения аудио в ваш проект:

• Музыкальное фоновое сопровождение для всего тура. На панели "Свойства - Проект" откройте плашку "Звук фона" и добавьте нужный аудио-файл.
• Фоновый звук для конкретной панорамы. На панели "Свойства - Панорама" откройте плашку "Звук фона" и добавьте нужный аудио-файл.
• Звук на событие, произошедшее с Объектом шаблона. В Редакторе шаблона добавьте аудио через меню "Элементы > Добавить звук", к объекту добавьте действие, например, "Клик мыши" и для Медиа выберите Воспроизведение нужного файла.
• Звук на событие, произошедшее с элементом "Полигональный хотспот". Для моего проекта это был самый нужный вариант, но поначалу вызвал непонимание, как это осуществить. Прелесть этого варианта в том, что я задаю звук на клик или наведение мыши на тот элемент, который двигается вместе с панорамой. Сам по себе "Полигональный хотспот" не умеет воспроизводить звук по клику, а Объект шаблона не умеет двигаться с панорамой. Мыкался-тыкался и решил задачу через Proxy ID, когда событие Элемента передается Объекту шаблона:
  1. Добавить полихотспот нужной формы в нужное место панорамы.
  2. Задать ему ID, например, "audio_spot".
  3. Зайти в Редактор шаблона.
  4. Добавить аудио (через меню Элементы) в дерево шаблона. Задать ему ID, например "audio_file".
  5. Добавить папку/контейнер в дерево шаблона. Дать этой папке любой ID.
  6. Дать этой папке "Расширенные > Прокси ID хотспота" такой же как в п.2, т.е. "audio_spot".
  7. Задать этой папке Действие, например, на событие "Клик мыши", в котором будет воспроизводиться Медиа "audio_file".

Экспорт

В правой области интерфейса программы располагается панель "Экспорт". Если до этого экспорт не производился, то кликните [+] и выберите Web. Далее выберите шаблон, самый расхожий из которых, feather_orb.ggsk – в этом шаблоне уже есть кнопки для навигации между панорамами и другие элементы. Потом кликните кнопку-шестеренку. Программа сохранит проект в надежном месте и откроет его для просмотра в вашем браузере. Надежное место можно изменить если кликнуть по кнопке-папке в строке "Папка для экспорта" панели "Экспорт".

Если кликнуть на свободном месте панели "Экспорт", то в левой части интерфейса откроются настройки экспорта "Свойства - веб-вывод". Рекомендую под плашкой "Изображения" отметить WEBP в пункте "Формат". Теперь при экспорте все ваши изображения будут конвертированы в этот современный формат, который в несколько раз экономичней (по весу файла) чем JPEG без потери качества.

P.S. Обратите внимание, что программа при показе проекта в вашем браузере создает локальный сервер для обхода ограничений Javascript на локальный показ. Если вы запустите индексный файл проекта index.html просто без Рano2VR, то ничего не увидите. Однако при копировании проекта на ваш сервер, всё будет работать. Если вы все-таки желаете смотреть проект локально без Pano2VR, то есть лайфхаки для браузеров:

• FireFox: внесите изменения в настройках – зайдите через поле адреса about:config, найдите параметр security.fileuri.strict_origin_policy, измените значение на false.
• Google Chrome: надо выполнить команду в консоли ОС: chrome --allow-file-access-from-files для запуска Хрома (если у вас портабельная версия, то вместо chrome напишите путь к исполняемому файлу).

Примеры экспортированных проектов:

• Окрестности Долгопрудного с разными локациями.
• Виртуальный тур по ресторанчику с разными локациями.
• 3D карточки английских слов – не совсем обычное применение возможностей программы. Это мой первый проект в P2VR.

Анимация

Есть возможность создать сценарий просмотра панорам и экспортировать это в видео и/или секвенцию изображений. Как это сделать:

1. Выделите нужную панораму.
2. Откройте шкалу времени (таймлайн) через меню "Окно > Анимация".
3. На таймлайне увидите три дорожки:
   • Смещение (перемещение по горизонтали)
   • Наклон (перемещение по вертикали)
   • Угол обзора (масштабирование)
4. Нажмите на кнопку [+] для добавления первого клипа.
5. Нажмите желтый ромбик для выставления первого ключевого кадра. Есть ромбики для каждой дорожки или для всех дорожек сразу.
6. Перенесите ползунок таймлайна на новую позицию. Измените Смещение, Наклон или Угол обзора.
7. Нажмите ромбик на той дорожке, значение которой изменяли.
8. Будут проставлены вторые ключевые кадры. Теперь при просмотре от первого до второго ключевого кадра вы увидите анимацию.
9. Ключевые кадра на графике имеют форму квадратика. Вы может мышкой перетаскивать их. При выделении квадратика появляются направляющие для создания более плавной интерполяции.
10. Для экспорта на панели "Экспорт" нажмите [+] и выберите "Анимация".
11. Слева появится панель свойств экспорта анимации.
12. Отметьте галочкой "Создать видеофайл" в разделе "Видео".
13. Нажмите кнопку-шестеренку на панели "Экспорт".
14. Определитесь с тем, все ли клипы экспортировать и в какие файлы (вместе или отдельно). Можно также задать интервал по кадрам или интервал по времени.
15. Нажмите кнопку [Визуализация] и ждите результата.

Таким образом вы можете создавать разные клипы на разных панорамах и манипулировать тем, что именно рендерить. В качестве нового трека (по ПКМ) в клип можно добавлять переменные шаблона, а если с помощью этих переменных манипулировать объектами в логических блоках, значит, можно анимировать разные объекты шаблона.

Анимацию можно запустить и в web-туре. Для этого надо на клик по какому-нибудь объекту создать действие: Автовращение > Запустить автовращение. Плюс к этому в настройках экспорта: Свойства - Веб-вывод > Автовращение и Анимация > поставить галочку на "Анимация". В этом случае при клике будут последовательно проиграны все клипы в туре.

Обратите внимание, что P2VR сначала создает последовательность изображений, а потом из них сшивает результирующий видеоролик с помощью утилиты ffmpeg.exe. Указать путь к этой утилите можно в настройках: "Файл > Параметры > FFmpeg". Если у вас на компьютере нет этой утилиты, то на этапе (12) вы не сможете поставить галочку "Создать видеофайл" и будете вынуждены ограничиться секвенцией статичных изображений. Впрочем, немало видеоредакторов умеют из секвенции делать видео.

Анатолий Опарин

Скачать, почитать, посмотреть

📥 Скачать Pano2VR 7 – репак. Из него можно развернуть портабельную версию (мой выбор) или инсталляционную. Проверял на Windows 10 64bit. Обратите внимание, что запускать программу надо с правами администратора.

📗 Руководство пользователя Pano2VR 7 на английском на сайте разработчика.