После того, как вы загрузили панорамы в проект, создали между ними переходы (хотспоты), и произвели другие действия, самое время перейти к экспорту проекта, чтобы его можно было просмотреть. В данной статье рассмотрены шаги экспорта VR-панорамы или виртуального тура в формат HTML5 в программе Pano2VR 5.

Перейдем на панель «Output». По умолчанию она расположена справа. Если вы уже производили экспорт в формат HTML5 в текущем проекте, то достаточно выбрать нужный пункт в списке экспорта. В противном случае нужно нажать на кнопку «+» и выбрать в выпадающем списке пункт «HTML5». После этого ниже появятся разделы опций. Рассмотрим их по порядку.

Раздел Autorotation (Автоматическое вращение)

От включения данной опции зависит, будет ли просматриваемая панорама начинать вращаться автоматически и с какой скоростью. Скорость вращения задается параметром «Pan Speed» (°/кадр). Если задать отрицательное число, то панорама будет вращаться влево, если положительное – вправо.

Вращение панорамы происходит только в период бездействия пользователя. Параметр «Delay» позволяет задать время, по истечению которого нужно начать вращение. Отсчет времени начинается с момента, когда пользователь перестанет уделять внимание просмотру панорамы и любые действия пользователя в окне просмотра отсрочивают этот момент.

Параметр «Return to Horizon» определяет скорость возврата угла наклона (Tilt) в нулевое (горизонтальное) положение, если угол наклона не был равен нулю.

Включение параметра «Start after fully loaded» позволит начать вращение только после полной загрузки панорамы.

Если при автовращении потребуется последовательное переключение узлов тура (как они были добавлены в проект), задайте в параметре «Change Node» время, по истечению которого будет происходить переход в другой узел (Доступно в версии Pro). Параметр «Random» позволит переключаться между панорамами в случайном порядке.

Вращение вокруг вертикальной оси можно заменить собственной анимацией (с изменяющимися параметрами вертикального наклона и угла обзора), инструкции которой определяются в окне «Animation». Параметр «Use animation» включает использование заранее определенной анимации. Как создавать анимации будет рассмотрено в одной из следующих статей.

С версии 5.1 раздел опций стал называться «Auto Rotation & Animation» и в ней появилась опция «Fly in», активирующая эффект полета, с единственным параметром «Speed», определяющим скорость эффекта. Данный эффект позволяет начать загрузку панорамы со стереографической проекции с плавным перетеканием в прямолинейную проекцию. Смотреть пример с Fly In

Раздел Transitions (Переходы)

Опции «Transitions» позволяют создать анимированный переход между панорамами, а также переход между звуками в панорамах. Для включения эффекта перехода между панорамами, нужно активировать переключатель «Panoramas».

Параметр «Transition Type» определяет тип перехода. Доступные значения типа перехода: «Cut», «Cross Dissolve», «Dip to Color», «Iris Round», «Iris Rectangular», «Wipe Left to Right», «Wipe Right to Left», «Wipe Top to Bottom», «Wipe Bottom to Top», «Wipe Randomly». Вариант «Cut» – это отсутствие эффекта перехода.

Для переходов типа Iris и Wipe можно определить ширину сглаживания границы, задав определенное значение параметра «Soft Edge».

Параметр «Transition Time» задает длительность перехода.

С помощью параметра «Effects» определяются эффект зуммирования до начала перехода (Параметр «Before») и после окончания перехода (Параметр «After»).

• «Zoom In» – эффект приближения;
• «Zoom Out» – эффект отдаления;
• «Fly In» – эффект взлета (переход в стереографическую проекцию).

Параметр «Zoomed FoV» задает минимальный угол обзора для эффекта приближения или начальный угол при эффекте отдаления. Насколько быстро будут выполняться эффекты, определяет параметр «Zoom Speed».

Для включения переходов звука нужно активировать переключатель «Sounds» и с помощью параметра «Transition Time» определить длительность перехода, а для плавности (перекрестного затухания) активировать переключатель «Crossfade».

Раздел Hotspots (Активные зоны)

Опции «Hotspots» позволяют настроить вид и поведение активных зон.

Опции группы «Hotspot Textbox» определяют внешний вид текстовых подсказок точечных активных зон. Для текстовой зоны можно установить размер (Параметр «Size»), свойства текста (Параметр «Text»), фона (Параметр «Background») и рамки (Параметр «Border»). При включенном параметре «Auto» высота текстового модуля определяется автоматически, а ширина остается постоянной.

Опции группы «Polygon Hotspots» определяют вид полигональной зоны. Параметр «View Mode» определяет поведение полигональной зоны при наведении курсора мыши. Он принимает одно из следующих значений.

• «Always Hidden» – полигональная зона не будет отображаться. При наведении курсора будет показан текст установленного заголовка.
• «Always Visible» – полигональная зона будет видна постоянно.
• «Show Current» – полигональная зона отобразится при наведении курсора, а при покидании курсора будет скрываться.
• «Show All» – при наведении курсора в область полигональной зоны будут показаны все полигональные зоны, которые есть на панораме, а при покидании курсора все зоны будут скрыты.
• «Disabled» – режим полигональной зоны отключен.

Параметр «Background Color» определяет цвет фона, а параметр «Border Color» определяет цвет границы. Включенный параметр «Hand Cursor» устанавливает вид курсора мыши (Pointer), который тот примет при наведении на зону.

Раздел HTML (HTML-страница)

В этом разделе можно подключить HTML-файл, в который будет встроена область воспроизведения. Этот файл используется для открытия HTML5 панорамы или тура в браузере. Подключение файла необязательно, если на сайте используется встраивание прямо в шаблонах (как сделано на этом сайте).

Параметр «Window Size» задает размеры области воспроизведения.

После активации переключателя «HTML File» станут доступны параметры «Template», «Format» и «Output File». Параметр «Template» определяет шаблон, на основе которого будет генерироваться HTML-файл. Шаблон можно выбирать из предустановленных (normal.ggt, cardboard.ggt и ggpkg.ggt) или создать самому. Параметр «Format» определяет расширение файла веб-страницы: .htm или .html (Расширение из трех букв – это пережиток прошлого, когда имя файла записывалось в формате 8.3). После нажатия на кнопку откроется окно с настройками шаблона, о которых речь пойдет ниже.

Параметр «Output File» задает имя HTML-файла. имя может быть задано явно или с помощью системных переменных, таких как $d (Абсолютный путь к каталогу проекта) и $n (имя файла проекта).

Рассмотрим параметры шаблона normal.ggt.

Параметр «Direct node access» позволяет получить прямой доступ к узлу тура. В адресной строке это будет выглядеть, например, так «/tour.html#node1».

Параметр «Include gyroscope control» делает доступным управление просмотром с помощью гироскопа (если он есть в мобильном устройстве).

Если активирован параметр «Disable on startup», управления с помощью гироскопа происходить не будет. Необходимо предусмотреть возможность включения с помощью кнопки.

Параметр «Use true north» сообщает гироскопу о корректировке ориентирования панорамы на Север, подобно компасу.

Параметр «Smooth movement» обеспечивает плавность движения во время вращения.

Параметр «Allow roll» включает поддержку наклона горизонта.

Активация параметра «Flash fallback player» добавит возможность воспроизводиться в браузерах, не поддерживающих технологию HTML5, но поддерживающих технологию Flash. В этом случае будет добавлен flash-проигрыватель, который будет использовать данные xml-файлов.

Параметр «Flash fallback file» позволяет добавить альтернативный swf-файл для воспроизведения в браузерах, не поддерживающих технологию HTML5, но поддерживающих технологию Flash. В отличие от предыдущей опции, где swf-файл использовал подключение xml-файлов, альтернативный swf-файл должен содержать все необходимые данные (оформление, данные о панораме, звуки).

Если активирован параметр «Prefer Flash if available», то приоритет будет отдаваться Flash-версии панорамы.

Параметр «Include external CSS file» позволяет выбрать внешний файл каскадной таблицы стилей.

Если активирован параметр «Embedded XML», то xml-файл, содержащий данные о панораме (панорамах)  встраивается в HTML-файл. В противном случае чтение данных будет происходить из внешнего xml-файла.

Параметр «Create files for external embedding» сообщит программе, что требуется создать дополнительные файлы для внешнего встраивания на сайтах, в том числе изображение превью.

Раздел Control (Управление)

Опции раздела «Control» позволяют настроить управление просмотром с помощью мыши и клавиатуры, а также создать контекстное меню, появляющееся при нажатии правой кнопки мыши.

Контекстное меню настраивается с помощью опций группы «Context Menu».

В списке «Menu Links» можно определить собственные пункты меню, при нажатии на которые будет происходить переход по ссылкам. В графе «Text» определяется текст пункта меню, а в графе «URL» — полный адрес ссылки (при необходимости), на которую будет осуществляться переход.

Опции «Default Items» добавляют дополнительные пункты в меню. Параметр «Add ‘Fullscreen’ item» добавляет в меню пункт включения/выключения полноэкранного режима. Параметр «Hide ‘About Pano2VR’» убирает из меню пункт о программе Pano2VR (Доступно в версии Pro). Параметр «Add Projection Items» добавляет в контекстное меню переключатели проекций вида (Rectilinear, Stereographic, Fisheye).

В пункт меню можно вместо текста использовать изображение, например, логотип. Для этого в графе «Text» необходимо создать HTML-тег IMG с атрибутами, указав путь к изображению логотипа.

Опции группы «Control» отвечают за управление с помощью мыши и клавиатуры.

Параметр «Sensitivity» определяет степень реакции при управлении.

Параметр «Inertia» наделяет панораму инерционностью вращения. После прекращения взаимодействия пользователя с панорамой, она продолжит двигаться с небольшой скоростью и до полной остановки в том направлении, в котором её вращал пользователь.

Опции «Mouse» определяют возможность управления просмотром с помощью мыши. Активация параметра «Disable» отключает эту возможность. Параметр «Invert Control» меняет направление вращения и наклона на противоположный направлению движения курсора мыши. Параметр «Rubber band effect at limits» добавляет резиновый эффект, позволяющий немного выходить за пределы установленных ограничений вида с последующим возвратом к этим ограничениям. Например, было добавлено ограничение по наклону вниз на -80°. При выполнении наклона можно будет осуществить наклон вниз на угол меньше, чем -80°, после чего наклон установится в -80°. Смотреть пример с Rubber band effect at limits (наклоняйте вверх/вниз на 90°).

Опция «Double-Click» определяет поведение при двойном нажатии левой кнопки мыши в области просмотра. Параметр «Toggle Fullscreen» отвечает за вход в полноэкранный режим выход из него.

Опция «Mouse-Wheel» определяет возможность управления (приближение / отдаление) с помощью колеса мыши. Параметр «Disable» отключает эту возможность. Параметр «Invert» меняет направление приближения и отдаления на противоположное направлению вращения колеса мыши. Параметр «Speed» определяет скорость приближения или отдаления.

Опция «Keyboard» определяет возможность управления с помощью клавиатуры. Параметр «Disable» отключает эту возможность управления стрелками. Параметр «Disable Zoom» отключает возможность приближения и отдаления с помощью клавиш +/- на дополнительной клавиатуре, а также клавиш Shift/Ctrl.

Раздел Image (Изображение)

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

Параметр «Quality» определяет тип разрешения: одноуровневое (Single Res) или многоруровневое (Multi Res), а также качество (уровень сжатия) каждого фрагмента экспортируемого изображения JPEG. Предпочтительные настройки находятся в пределах от 80% до 100%.

Параметр «Cube Face Size» определяет максимально возможный размер стороны куба в пикселах для загруженной панорамы. Вычисляется автоматически по формуле W_экв/4 (В случае использования PI-фактора – W_экв/Pi), где W_экв – ширина эквидистантной проекции.

Оптимальный размер грани куба Pano2VR определяет исходя из размера окна и заданного значения FoV в параметрах проекции.

Кнопка «Tile Quality» открывает окно настройки качества (уровня компрессии) каждой из сторон куба.

В строке «Image Names» задается имя каталога, в который будут сохранены изображения сторон куба, а также шаблон имени файлов, например, «images\$n_o.jpg», где $n – системная переменная, содержащая имя файла загруженного изображения проекции (без расширения).

Значения выбранные в списке «Face Names» – представляют собой наборы суффиксов, которые будут добавляться к именам файлов изображений.

При выборе многоуровневого разрешения, вместо перечисленных выше параметров появятся параметры «Level Tile Size», определяющая размер фрагмента, и «Levels», определение уровней. При выборе значения «Levels» Auto, количество уровней определяется программой.

Для ручного определения уровней необходимо выбрать значение Manual и в появившемся списке определить уровни, задавая ширину грани куба (Width). После определения ширины первого уровня при добавлении нового уровня программа рассчитает автоматически ширину для добавляемого уровня.

Дополнительные настройки мультирезолюшн находятся на следующей вкладке (Advanced).

В группе опций «Download / Preview» настраивается качество изображений предварительного просмотра. Эти изображения загружаются в первую очередь. Разумеется, если возможность загрузки не была отключена в свойстве «Type» (Значение None). Здесь же определяется цвет фона окна воспроизведения – параметр «Background Color».

Раздел Advanced (Дополнительные опции)

Рассмотрим назначение дополнительных опций, представленных в разделе «Advanced».

Параметр «FoV Mode» (группа «Display») определяет, какой угол зрения должен оставаться неизменным при масштабировании или изменении размеров окна:

• «Vertical» – будет сохранен угол зрения по вертикали;
• «Horizontal» – горизонтальный угол зрения будет постоянным при масштабировании;
• «Diagonal» – сохраняется диагональный угол зрения;
• «Max» – при масштабировании будет сохранен тот угол зрения, который является наибольшим.

В группе «Skin» можно задать желаемое имя файла оформления – параметр «File» и папки вывода изображений скина – параметр «Image output Path». Параметр «Convert SVG to PNG» будучи активированным сообщит процедуре экспорта о том, что имеющиеся в оформлении SVG-изображения следует конвертировать в формат PNG. В противном случае будут созданы изображения в форматах SVG и PNG.

В группе «Output» находится параметр, определяющий имя XML-файла конфигурации панорамы или тура.

Последняя группа в разделе «Advanced» – «Multiresolution». Группа появляется только в случае выбора переключателя «Multi Res» в разделе «Image».

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

В следующей статье хочу продолжить тему экспорта обзором экспорта в формат Flash. Нужно ли кому-нибудь рассказывать об экспорте в устаревший формат?