Виртуальный тур: паномара 360 на pannellum.js + Hugin + PTGui

April 29, 2017
Cover Image

Задача: создать интерактивный музей. Что под собой он подразумевает:

  1. Обычный сайт-визитка с разделами по тематикам, фотографиями и описаниями экспонатов.
  2. Виртуальный тур по музею.

Если с первой частью нет проблем и вопросов, кроме наполнения и дизайна, то вторая часть - сразу множество вопросов. Я нашел решение: pannellum JS

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

Движок

Если поискать в google, то можно найти как платные, так и бесплатные варианты. Но многие из них позволяют работать только с панорамой в 360 градусов, т.е. смотреть строго вправо и влево. А некоторые думают, что виртуальный тур - это просмотр объекта со всех сторон, как в интернет-магазине. Все это очень замечательно, но хочется эффекта присутствия, как будто ты находишься в реальном помещении. Для этого нам не хватает просмотра вверх и вниз. 

Если поисковую выдачу полистать ниже, то там притаится скромная ссылка на проект pannellum.org, который позволяет реализовать все задачи, который поставлены.

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

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

Во время разработки тестового примера столкнулись с проблемой, что при загрузке кубической карты каждая фотография грузится с помощь через Cross-origin resource sharing (CORS), что запрещено нашими политиками безопасности (очень интересно, внутри локальной сети и разрешенных доменов политика запрещает загрузку, но это отдельная история). Поэтому приходится использовать полноразмерное изображение. Но и тут есть ограничения: ширина изображения ограничена аппаратной поддержкой

While images with a width of 4096 pixels are supported by practically all devices, images with a width of 4097–8192 pixels are only supported by ~83% of devices (as of writing). To be able to use bigger images on these devices, a different kind of image needs to be used, either a cube map or multires image instead of an equirectangular image.

В остальном - очень простой, легкий, работающий плагин.

сайт проекта: pannellum.org

форум: https://mpetroff.net/software/pannellum/

Создание фотографии

Первая задача решена. Теперь нужно создать прямоугольную (equirectangular) проекцию сферической фотографии. Камеры на 360° у меня нет. Но есть две других, одна с 120° углом обзора в виде рыбьего глаза от GoPro, а вторая - обычный прямоугольный объектив с не очень большим углом обзора.

Если посчитать, то при угле обзора в 120° для полноценной картинки в 360° нужно чуть больше 10 фотографий. Главное, чтобы соседние фотографии имели достаточное перекрытие для определения точек связи в автоматическом режиме, для особо скрупулезных в программах есть и ручной режим. Казалось бы, что все хорошо, но рыбий глаз у камеры искажает изображение по краям, что приводит к сильно заметным стыкам. Возможно я что-то забыл указать в настройках программ касательно объектива (тут я не очень разбираюсь), но времени на эксперименты не было.

Следующим подопытным был обычный прямоугольный объектив с небольшим углом обзора. Тут я сделал два опыта: сфотографировал просто по кругу. И во втором опыте - в два ряда, чтобы как можно больше захватить сверху и снизу. Так как был выставлен режим 16:9 и вертикальная ориентация, то фотографий вышло много, около 40 штук.

Далее нужно было склеить. Поисковик предлагает множество различных вариантов, большинство из них очень платные. Но среди всей выдачи есть два замечательных продукта:

  • Hugin - Panorama photo stitcher (бесплатный open source)
  • PTGui - Create high quality panoramas (условно бесплатный)

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

Hugin

Данный проект изначально разрабатывается под Linux. На сайте разработчика (hugin.sourceforge.net) доступны документация к программе и различные руководства, единственное, что они для различных версий программы. В сети довольно много других обзоров и статей, описывающих работу с программой. Единственное замечание, но очень важное, при подготовке изображений, их нужно располагать в следующем порядке: слева направо и сверху вниз. Это момент я прочитал случайно в одной русской статье (ссылку я потерял). Пока не расположил в нужном порядке - результат получался отвратительным.

Теперь, что касается версий и склеиваний: программа довольно хорошо находит точки для склеивания, в комплекте идет 4 различных алгоритма поиска совпадений. На момент написания заметки была доступна для Windows версия 2016.2.0. Как выяснилось позже это только небольшая часть всего функционала, потому что все описания и руководства по картинкам не совпадали с тем, что было доступно в Windows-версии. Склеить в ней полноценную сферическое изображение из несколькорядных фотографий так и не удалось. Но довольно хорошо склеивает фотографии слева направо в один ряд. Однако, коллега испробовал версию данного по под Linux: "программа что-то долго около 15 минут считала, но на выходе дала почти идеальную картинку, стыки были практически незаметны". Если мне не изменяет память для теста были взяты около 40 фотографий в два ряда и все получилось. Но версия под Linux.

PTGui

Теперь о платном аналоге. В бесплатной версии функционал аналогичен платной, только накладываются водные знаки. На сайте (www.ptgui.com) также доступны материалы для обучения и изучения. Как и ожидалось, платная версия съела все 40 фотографий в два ряда и сразу построила правильную прямоугольную проекцию сферической фотографии. Конечный результат тоже рендерился довольно долго, около 7 минут (а на сайте обещают 25 секунд на гигапиксельную панораму), наверное.

Итог по программам

Сам лично полноценной версией Hugin я не пользовался, но судя по статьям и скринам функционал нисколько не уступает платному аналогу PTGui. Так что выбор за Вами ;)