Виртуальные туры. Часть I. Технические детали

0. Немного терминов.

Зенит — воображаемая точка в пространстве, обозначающая направление вертикально вверх. Надир — полная противоположность зенита, эта точка обозначает направление вертикально вниз.

1. Что такое панорама?

Панорамой можно считать любое изображение, если соотношение его сторон больше 2:1. Панорамным может быть угол обзора, который охватила камера в момент съёмки или получившийся в результате склейки нескольких изображений в одно.

Помимо размера и углов обзора, панорамы различаются способами проекции, наиболее распространённые из которых:

• Cферическая

Принцип: всё окружающее пространство проецируется на сферу, а затем строится её развёртка. Итогом такого преобразования становится панорама со сторонами 2:1.

Достоинства: обзор 360° по горизонтали и 180° по вертикали. Панорама охватывает всё, что может увидеть человек, стоящий в точке съёмки: даже то, что у него под подошвами ботинок.

Недостатки: искажения, которые приобретают прямые линии вблизи зенита (направление вертикально вверх) и надира (полная противоположность зенита, обозначает направление вертикально вниз). Изображение в этих местах «размывается» за счёт «растяжения» точек, а зенит и надир вообще растягиваются в прямые линии.

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

• Цилиндрическая

Принцип: изображение проецируется на развёртку цилиндра.

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

Недостатки: крайние точки на проекцию не попадают, поэтому проекции линий при приближении к ним очень растягиваются.

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

• Прямоугольная

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

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

Разумным пределом обзора прямоугольной проекции можно считать 122° по диагонали — такой угол обзора даёт самая широкоугольная оптика со спрямлённым (выпрямленным) полем.

2. Виртуальная панорама

Виртуальная панорама нацелена на взаимодействие с пользователем — за счёт этого можно менять угол обзора или способ проекции. Однако виртуальная панорама всё же остаётся плоским изображением.

Сегодня существует единственный способ показать «объемную» панораму — анаглиф, в который соединены две панорамы. Оживляюще действует и привязка обзора к гироскопу мобильных устройств. Но и здесь следует оговориться: по личному впечатлению гироскоп оправдывает ожидания лишь на гаджетах Apple и последних моделях с операционной системой Android.

Так как при создании виртуальной панорамы используется самая универсальная сферическая проекция, можно назначить любой угол обзора, совместимый с выбранным способом отображения (проекцию или её искажение). Если хочется взглянуть широко, наиболее естественным будет отображение с эффектом «рыбий глаз». Как ни странно, это находит своё отражение в физиологии зрения: чем дальше от оси глаза, тем сильнее восприятие «сжимает» изображение. То же самое делает «рыбий глаз», позволяя охватить одним взглядом пространство в 180° и больше.

3. Немного математики

Теперь попробуем разобраться, как можно измерить сферическую панораму; где пределы сужения угла обзора «зума» и как две эти вещи связаны.

Развёртка сферы на плоскость по длинной стороне имеет длину «экватора» сферы — периметра наибольшей окружности, которую можно найти на сфере (πd). По вертикальной стороне на плоскость разворачиваются половинки «меридианов», их длина – (πd/2). Площадь развёртки будет произведением её сторон — именно эту величину указывают в качестве размера панорамы, когда говорят «гигапиксель». Можно отметить, что эта величина примерно в полтора раза больше площади самой сферы (π/2).

Виртуальная панорама в своей работе использует развёртку куба, который описан вокруг сферы — 6 прямоугольных проекций. Сторона куба равна диаметру сферы, а площадь — (6d²).

Такое представление позволяет наиболее просто отобразить панораму на экране. Кроме того, стороны куба являются конечным этапом подготовки панорамного изображения перед созданием виртуальной панорамы. Таким образом, размер куба (диаметр сферы) — наиболее информативная величина, показывающая, сколько информации содержится в панораме.

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

Для монитора размером 1600×900 можно определить такие минимальные углы обзора по диагонали в зависимости от размера куба в пикселях (в скобках приведено количество мегапикселей в развёртке сферы и приблизительные фокусные расстояния объективов для 35мм плёнки, дающие такой угол обзора):
2000 (20 мп) — 94° (20 мм)
2800 (39 мп) — 70° (≈30 мм)
4000 (79 мп) — 50° (55 мм)
5600 (154 мп) — 34° (70 мм)
8000 (316 мп) — 26° (100 мм)
11200 (619 мп) — 18° (135 мм)
15700 (1216 мп) — 13° (200 мм)

Трудоёмкость подготовки изображений растёт пропорционально количеству мегапикселей.

4. Управление панорамой

Несмотря на полнофункциональное управление с клавиатуры, удобнее всего вертеть панораму мышкой. Способов управления здесь существует два:

А. «Листание». Панорама движется в ту сторону, в которую пользователь повёл мышь с зажатой левой кнопкой. При этом панорама приобретает эффект инерции, который можно погасить одиночным кликом. Такое управление наиболее распространено в приложениях для настольных ПК, поскольку является удобным и быстрым в освоении. Однако, у этого способа есть два серьёзных недостатка: на слабых компьютерах возможны падения производительности; людям, не привыкшим к компьютеру, очень тяжело подстроиться под такое управление.

Б. «Таскание». При таком способе панорама движется вслед за мышкой. Как тянем, так и едем, инерции нет. Это родной способ управления для всех устройств с сенсорными экранами, однако он удобен даже на «больших братьях» и при этом лишен недостатков листания.

5. Производительность и мобильные возможности

На сегодняшний день для отображения панорам используются движки на базе Flash и связок HTML5+CSS3D, HTML5+WebGL. Технология Flash более требовательна к ресурсам компьютера.

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

Однако нередка ситуация, когда открытая вкладка с панорамой приводит к дополнительной нагрузке процессора: например, если панорама автоматически прокручивается в неактивной вкладке. Эффект рыбьего глаза также требователен к ресурсам. Помимо этого, производительность зависит от наполнения виртуальной экскурсии.

Multiresolution — один из способов отображения виртуальной панорамы на экране. Суть его в том, что стороны куба разбиваются на мозаику небольших изображений, которые подгружаются по мере необходимости. При этом создается несколько мозаик с разным разрешением: от минимального (без зума) до максимального. Такой способ позволяет показывать панорамы более детализировано, чем если бы пользователь смотрел на все изображение целиком. Кроме того, повышается скорость работы. Пока что эта технология реализована только на flash, что не позволяет полностью от него отказаться. Для HTML5 multiresolution находится в стадии разработки.

Хотя при определенных параметрах стороны куба (до 2800 точек) можно обойтись без использования технологии multiresolution, сейчас эта технология используется повсеместно.

Для мобильных устройств приоритетными является платформа HTML5. Для старых устройств на android (например, версии 3.3) возможно и отображение на базе flash, однако скорость работы панорамы будет существенно ниже. Также работу с флеш поддерживают планшеты на Windows RT, но и в этом случае скорость невысока.

Отображение виртуальных панорам возможно и на планшетах, среди которых наибольшую производительность показывают топовые устройства на android и iPad 3, 4, mini и Air.

6. HTML5

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

На данный момент возможности движков на связке Javascript+HTML5+CSS3 ограничены относительно flash:
• поддержка multiresolution находится в стадии разработки;
• размер стороны куба ограничен 2000 точек;
• поддержка видео ограничена;
• отсутствует возможность автовоспроизведения на устройствах с iOS.

Среди плюсов можно отметить, что управление просмотром и отображение интерфейса практически не отличается от flash, а скорость работы при аналогичном наполнении выше.

7. Встраивание панорам в сайт

Виртуальная панорама может быть встроена в любой фрейм сайта (в шапку или на страницу), однако следует помнить об ограничении производительности и возможностей управления.

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

Продолжение статьи:
Виртуальные туры. Часть II. Руководство заказчика