Просмотр панорамы html на телефоне
Но прогресс не стоит на месте, и, после нескольких лет царствования, формат Флеш медленно, но уверенно стал терять свои позиции в пользу формата HTML5. В отличие от "флешевых", для просмотра панорам, построенных на технологии HTML5, не требуется установка плагина. Воспроизведение сферических панорам и виртуальных туров осуществляется полностью силами браузера. Сначала формат HTML5 использовался лишь для создания «дополнительных» вариантов сферических панорам для показа на мобильных устройствах (которые, в большинстве своем, не поддерживают формат Flash). При этом «основные» варианты панорам для показа на ПК по-прежнему делались во флеше, так как большинство десктопных браузеров не поддерживало формат HTML5.
Сегодня, когда мобильные устройства стали неотъемлемой частью жизни огромного количества людей, стандарт HTML5 из разряда дополнительных опций перешел в категорию основных форматов, а неработающие на нем панорамы рискуют лишиться значительной части аудитории.
Теперь, когда не только мобильные устройства, но и почти все современные десктопные браузеры поддерживают формат HTML5, в свою очередь, в историю должен уйти формат Flash. Тем не менее, флешевые панорамы не спешат уступить свое место на рынке форматов демонстрации виртуальных туров, и для этого имеется ряд причин. Во-первых, возможности авторинга туров в HTML5 все еще несколько ограничены по сравнению с потенциалом туров на Flash, во-вторых, не все браузеры умеют корректно отображать HTML5 панорамы или вовсе не поддерживают формат HTML5.
Таким образом, оптимальным вариантом, позволяющим охватить максимальную аудиторию, является одновременное использование обоих форматов при создании панорамы и автоматическое определение нужного формата на стороне пользователя при просмотре панорамы. Если браузер пользователя не поддерживает флеш, тур откроется в формате HTML5 и наоборот. В случае, если браузер способен отобразить виртуальный тур, как в формате HTML5, так и в формате Flash, автоматически выбирается формат, заданный при создании как приоритетный. На мой взгляд, пока лучше отдавать предпочтение флешевому варианту, но в скором времени ситуация может кардинально измениться в сторону HTML5.
Для сравнения качества воспроизведения, а также для определения возможности поддержки форматов Flash и HTML5 используемым Вами браузером, посмотрите примеры сферических 3D панорам, кликнув на соответствующей картинке:
В качестве экскурсии в прошлое ниже представлена информация по разным, некогда популярным средствам просмотра виртуальных панорам. Обратите внимание, вся информация ниже приведена по состоянию на 2009 год.
Панорамы — фотографии с очень большим углом обзора (зачастую 360°), которые сделанны при помощи специального оборудования или же обычного фотоаппарата и специального программного обеспечения, обеспечивающее бесшовную склейку отдельных кадров.
Специальные программы позволяют просматривать отдельные участки такой фотографии. Пользователь сам выбирает интересующий его фрагмент при помощи манипуляций мышью. При этом достигается эффект присутствия, как-будто пользователь стоит в месте съемки и самостоятельно поворачивается в разные стороны.
Программное обеспечение для создания подобных изображений — тема отдельного разговора. Здесь же мы рассмотрим jQuery плагины, которые позволяют организовать просмотр панорамных изображений непосредственно в браузере.
Все перечисленные плагины используют библиотеку jQuery, легко встраиваются в страницы сайта и имеют множество интересных и уникальных функций.
Paver
Автор этого плагина честно признается, что подсмотрел идею в одном экспериментальном приложении Facebook. Зато теперь мы имеем бесплатную версию с доступным на GitHub исходным кодом. Как и многие плагины, участвующие в этом обзоре, он построен на jQuery и позволяет удобно просматривать широкоформатные изображения на странице сайта.
Стоимость: Бесплатно
WebGL Based Multi-Purpose 360°
Мощный премиум jQuery плагин для создания интерактивных панорам. Поддерживает метки на панораме. С их помощью можно отмечать людей или предметы. Также есть поддержка «маршрутов» как у Google Street View. То есть можно путешествовать по локации. В отличии от остальных плагинов из этой подборки, есть возможность просматривать панораму как по горизонтали, так и по вертикали. По сути — это полноценный 3D-тур.
Стоимость: 10$
iPanorama 360°
Легкий, но многофункциональный плагин, созданный с использованием библиотек jQuery и Three.js. Одной из его замечательных особенностей — возможность указывать на фотографиях так называемые «горячие точки», нажатие на которые приводит к отображению какой-нибудь информации или переходу от одной сцены к другой, создавая, таким образом, виртуальные туры.
Стоимость: $8
jQuery Panorama Viewer
Еще один jQuery плагин для интерактивного просмотра панорамных фотографий. Обладает стандартной в таких случаях функциональностью, использует цилиндрическую проекцию (возможен поворот только вправо-влево). Тестировался во многих современных браузерах (Chrome, Firefox, Safari), однако автор признается, что не проверял его работоспособность в Internet Explorer.
Стоимость: Бесплатно
360° Panoramic Viewer
360° Panoramic Viewer также поддерживает мобильные устройства и управление жестами. Имеется возможность управления «горячими точками» для отображения информации или перехода между панорамами.
Стоимость: $8
Panoramic — Street View Rotator
C помощью этого jQuery плагина можно выводить у себя на сайте панорамы Google Street View. Работает по API Google.
Стоимость: 11$
True Panorama
True Panorama — простой в использовании и легкий в интегрировании плагин, обладающий адаптивным интерфейсом и полной поддержкой мобильных устройств, включая управление жестами на тач-скринах.
Стоимость: 8$
Простой и незамысловатый плагин для показа круговых панорамных фотографий. Прокрутка горизонтальная, без «инерционного эффекта».
Стоимость: Бесплатно
SpriteSpin
Интересный плагин для получения обзорного изображения какого-либо предмета. Проигрывает набор фотографий (спрайтов) кадр за кадром. Это могут быть бесшовные панорамные фотографии или изображения одного предмета с разных углов зрения, создающие впечатление виртуального вращения.
Стоимость: Бесплатно
Panorama 360° jQuery Plugin
Достаточно интересный плагин для отображения панорамных изображений. К числу его особенностей следует отнести «бесконечную» прокрутку, полноэкранный режим, а также вращение при помощи колесика мыши.
Стоимость: Бесплатно
Виртуальные туры должны легко просматриваться на мобильных устройствах. Таково строгое требование современного рынка. Студии, которые до сих пор работают на устаревших программах и создают только версии для стационарных компьютеров, все чаще сталкиваются с отказами клиентов от их услуг.
Прошли старые добрые времена, когда можно было уповать на то, что 3D-туры будут в основном просматриваться с настольных компьютеров и ноутбуков. Уже сейчас более половины пользователей интернет открывают сайты с мобильных устройств - планшетов и смартфонов.
Таким образом посетитель вашего сайта вместо красивого интерактивного виртуального тура увидит просто "черную дыру" с непонятной надписью на английском языке. Так вы откажете в удовольствии от виртуальной экскурсии примерно половине посетителей вашего сайта. Возможно, от этого вы и не потеряете клиентов, но черная дыра или предложение скачать новый плагин для браузера вместо немедленного запуска виртуального тура на вашем сайте оставит негативное впечатление.
Если вы решили заказать виртуальный тур, обязательно следует обозначить в договоре пункт, согласно которому готовый продукт должен открываться и на стационарных и на мобильных устройствах. Это возможно при создании виртуального тура по технологии HTML5.
Иногда разработчики требуют за это дополнительную оплату, ссылаясь на необходимость дополнительных действий по созданию мобильной версии. На самом деле совместимость с планшетами и смартфонами обеспечивается банальной установкой одной единственной галочки в программе, в которой создается 3D-тур:
Надо просто поставить галочку в этом окошке и созданный продукт будет одинаково хорошо просматриваться и на настольном компьютере, и на экране вашего смартфона. Для этого разработчик продукта должен иметь лицензионную, постоянно обновляемую программу. Например, Kolor Panotour Pro, хотя есть и другие.
Пример такого тура можно увидеть в начале этой страницы. Проверьте, работает ли он на вашем смартфоне.
Сейчас поговаривают, что технология Adobe Flash в скором времени может прекратить свое существование. Таким образом, все продукты, которые были сделаны с ее применением, могут стать недоступными для просмотра даже на настольных компьютерах.
Поэтому при заказе виртуального тура стоит уделить особое внимание мобильной версии.
Мы рады сообщить, что в своей деятельности используем самое передовое лицензионное программное обеспечение, которое позволяет нам создавать виртуальные экскурсии в формате HTML5, которые без каких-либо проблем отображаются на современных мобильных устройствах.
После экспорта VR-панорамы или виртуального тура в формате HTML5 необходимо провести его отладку, в которую входят проверка корректности интерактивного оформления (кнопки, меню, хотспоты, инфоблоки) и его соответствие требуемому дизайну, проверка навигации в виртуальном туре (не упущен ли какой-то из переходов, в правильную ли локацию осуществляется переход и т.д.).
В зависимости от используемого браузера, настройки производятся по-разному.
Google Chrome, Opera (для ОС Windows)
- Закройте браузер;
- Найдите ярлык и откройте Свойства;
- В строке «Объект» добавьте в конце пробел и после него введите ;
- Откройте браузер через ярлык;
- Нажмите Ctrl + O и перейдите html-файлу или перетащите html-файл на вкладку.
Желательно для этого случая создать копию ярлыка. Аналогичным образом можно открыть браузер через командную строку или bat-файл.
Mozilla Firefox
- Откройте браузер и в поисковой строке введите . Появится предупреждение «Продолжайте с осторожностью». Нажмите «Принять риск и продолжить»;
- В поисковой строке, где написано, «Искать параметр по имени», введите ;
- Измените эту настройку с true на false.
MS Edge
Для этого браузера дополнительных настроек не требуется.
- Откройте новую вкладку;
- Нажмите Ctrl + O;
- Перейдите к html-файлу.
Garden Gnome Package Viewer – программа от разработчика Pano2VR, позволяющая в автономном режиме просматривать виртуальные туры как экспортированные в отдельный каталог, так и упакованные в один ggpkg-пакет. Открытие проекта осуществляется с помощью перетаскивания html-файла или ggpkg-пакета в область, выделенную штриховой линией. Поддерживаются операционные системы Windows и MacOS X.
Не так давно от того же разработчика появились аналоги утилиты для мобильных устройств на iOS и Android. Для работы с мобильным приложением потребуется экспортировать тур в пакет Garden Gnome Package, перенести его на устройство и импортировать в приложение.
Поддерживаются только системы Windows.
Эту утилиту я создал еще до появления решений от Garden Gnome Software. Судя по количеству загрузок, она оказалась полезной для многих.
Её использование заключается в помещении exe-файла в каталог экспорта, после запуска из которого она находит в этом каталоге html-файл. Остается только нажать на кнопку «Открыть виртуальный тур», после чего произойдет открытие html-файла в браузере, установленном по умолчанию.
Об авторе:
Сергей Дишук, фотограф-любитель. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения. Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 5-ти лет. Имею опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR.
У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.
В последнее время все чаще можно наткнуться на круговую панораму в интернете. Взять к примеру тот же сырный домик. Это эффектная штучка возможно вскоре станет обыкновенным делом для сайтов ресторанов, гостиниц, отелей и т. п. Однако, что делать, если существуют проблемы с flash на компьютере? Это реальная ситуация, которая возникла у меня на работе, по причине жесткой политики безопасности IT-отдела.
 В этой небольшой статье я расскажу вам о трудностях, которые встретил на пути создания интерактивной панорамы на WebGL + THREE.js.
- используем WebGL, так как Canvas панорамы просто ужас, и еще новый IE поддерживает;
- Просмотр панорамы путем перетаскиванием зажатой кнопки мыши;
- Активные элементы призванные обратить внимание и сообщить информацию;
- Возможность посмотреть несколько панорам на одной странице.
Cфера
Существует как минимум два варианта реализации панорамы: кубическая и сферическая. Я выбрал сферическую, так как размещение визуально одинаковых активных элементов предполагает равноудаленное расстояние от центра. За прототип возьмем существующий образец панорамы с сайта разработчика библиотеки. Он нам полностью подходит за одним исключением. Это сфера с текстурой вывернутая на изнанку. Трудно представить как это может выглядеть.
Кстати, это типичное создание объекта в мире THREE.js. Как правило создается геометрия объекта, материал ( текстура ), а потом добавляется на сцену.
Элементы
Теперь надо подумать о том, что из себя будут представлять те самые активные элементы. В идеале ими должны быть плоские спрайты, всегда отображающиеся лицом к камере. Да, да именно так :)
Но здесь нас ждет сюрприз. В THREE.js существует два «класса» для рендеринга: WebGLRenderer и CanvasRenderer. И два типа простых объектов: Particle (частица) и Sprite. WebGL работает с Sprite, а Canvas с Particle. При этом нам необходим именно WebGL, а объект Sprite не имеет объема в пространстве. То есть по нему невозможно попасть мышкой.
Что ж возьмем и с имитируем эти самые спрайты при помощи 3D объекта с геометрией плоскости ( PlaneGeometry):
Хочу обратить ваше внимание, почему именно так: закеширована геометрия точки и текстура, а материал будет каждый раз создаваться заново. Дело в том, что при наведении мышки на точку, мы будем подменять текстуру на более яркую, к примеру, но если MeshBasicMaterial закеширована и является для всех общей, загораться будут все. Насчет наведения мышкой, все просто — берем отсюда.
Последняя важная часть, которая вызвала затруднения — это перерасчет координат области панорамы на странице на координаты WebGL пространства для точного выделения точек. Визуально элементы видны, но их координаты на страничке не совпадают с координатами 3D пространства. На StackOverFlow нашелся ответ.
Данные
Так как предполагается возможность просматривать много панорам на одной странице, лучше все данные поместить в JSON. Примерно так:
Чтобы просматривать разные панорамы, мы будем подменять текстуру сферы, удалять точки и по координатам выстраивать новые.
Читайте также: