Дипломной практике тема диплома: Разработка библиотеки для просмотра сферических панорам средствами html5




Скачать 57.76 Kb.
НазваниеДипломной практике тема диплома: Разработка библиотеки для просмотра сферических панорам средствами html5
Дата публикации17.03.2013
Размер57.76 Kb.
ТипДиплом
odtdocs.ru > Астрономия > Диплом
МОСКОВСКИЙ ИНСТИТУТ ЭЛЕКТРОНИКИ И МАТЕМАТИКИ

(Технический Университет)

Кафедра Информационно-коммуникационные технологии

ОТЧЕТ
ПО ПРЕДДИПЛОМНОЙ ПРАКТИКЕ


Тема диплома: Разработка библиотеки для просмотра сферических панорам средствами HTML5.


Выполнил:




А. Д. Селезнев




(подпись)




Принял:




^ С. В. Кондрашов




(подпись)





Москва 2012

Содержание

1Введение 3

2Обзор платформ для решения задачи 4

Так как задача не нова, на рынке присутствуют разнообразные (в том числе открытые) решения для просмотра сферических панорам и организации виртуальных туров в вебе. Большинство из них основаны на платформе Adobe Flash, реже (поддержка большинства из них прекращена из-за широкого распространения Flash) — на Java; обе требуют дополнительной поддержки посредством плагина для браузера. Flash также не поддерживается множеством мобильных устройств. 4

Современным конкурентом Adobe Flash является стандарт HTML5, в частности его элемент Canvas, ориентированный на работу с растровой графикой и полноценную интеграцию в веб-страницу без сторонних дополнений для браузера. К сожалению, практически все просмотрщики панорам либо используют специальные функции какого-либо одного браузера, либо не поддерживают никакой интерактивности кроме прокрутки панорамы, что не позволяет реализовать виртуальный тур на их основе без существенных модификаций исходного кода. 4

Особняком стоит библиотека three.js[1] для отображения полноценной трехмерной графики на HTML5 Canvas, среди демонстраций которой есть отрисовка кубических панорам. В то же время производительность three.js сильно зависит от ЦПУ устройства и недостаточна для данной задачи. Даже кубическая панорама (12 полигонов) достаточно медленно отображается на многих современных ПК, в то время как для сферической панорамы необходим рендеринг существенно более сложной сферической поверхности. 4

Тем не менее, преимуществами HTML5 является быстрые преобразования двумерной графики и широчайшая поддержка устройствами и браузерами, поэтому был избран путь решения данной проблемы через модификацию и оптимизацию алгоритма преобразований. Отрисовка же средствами Canvas была избрана как одна из наиболее полно реализованных частей стандарта HTML5[2]. 4

3Алгоритм устранения искажений сферических панорам 6

4Реализация интерактивности 8

5Выводы 9

6Ссылки 10


1Введение


В наше время зачастую приходится сталкиваться с задачей организации виртуального тура по какому-либо помещению или местности. Широкое распространение мобильных устройств (преимущественно нетбуков и коммуникаторов), малопроизводительных в сравнении с настольными ПК, и интеграция с веб-сервисами накладывает серьезные ограничения на доступные аппаратные ресурсы.

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

2Обзор платформ для решения задачи


Так как задача не нова, на рынке присутствуют разнообразные (в том числе открытые) решения для просмотра сферических панорам и организации виртуальных туров в вебе. Большинство из них основаны на платформе Adobe Flash, реже (поддержка большинства из них прекращена из-за широкого распространения Flash) — на Java; обе требуют дополнительной поддержки посредством плагина для браузера. Flash также не поддерживается множеством мобильных устройств.

Современным конкурентом Adobe Flash является стандарт HTML5, в частности его элемент Canvas, ориентированный на работу с растровой графикой и полноценную интеграцию в веб-страницу без сторонних дополнений для браузера. К сожалению, практически все просмотрщики панорам либо используют специальные функции какого-либо одного браузера, либо не поддерживают никакой интерактивности кроме прокрутки панорамы, что не позволяет реализовать виртуальный тур на их основе без существенных модификаций исходного кода.

Особняком стоит библиотека three.js[1] для отображения полноценной трехмерной графики на HTML5 Canvas, среди демонстраций которой есть отрисовка кубических панорам. В то же время производительность three.js сильно зависит от ЦПУ устройства и недостаточна для данной задачи. Даже кубическая панорама (12 полигонов) достаточно медленно отображается на многих современных ПК, в то время как для сферической панорамы необходим рендеринг существенно более сложной сферической поверхности.

Тем не менее, преимуществами HTML5 является быстрые преобразования двумерной графики и широчайшая поддержка устройствами и браузерами, поэтому был избран путь решения данной проблемы через модификацию и оптимизацию алгоритма преобразований. Отрисовка же средствами Canvas была избрана как одна из наиболее полно реализованных частей стандарта HTML5[2].
^

3Алгоритм устранения искажений сферических панорам


Сферическая панорама вносит существенные искажения в прямые линии изображения. В связи с этим требуется эффективный метод устранения возникающей деформации для удобства восприятия изображения пользователем.



^ Рис. 1: Сферическая деформация. (а) стена комнаты до деформации и (б) после.

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

  • Вместо полноценной матрицы пикселей изображения размером ^ M x N используются вертикальные фрагменты m x N (m < M) для упрощения задачи. Это ведет к незначительному снижению качества и заметному ускорению обработки изображения стандартными библиотеками платформы.

  • Так как искажения в центре экрана более заметны, чем по краям, ширина каждого конкретного фрагмента будет mi зависеть от координат, чтобы повысить качество обработки центральной части изображения. В сумме ширина всех фрагментов все равно составляет полную ширину изображения: Σmi = M

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

Иллюстрация принципа работы данного алгоритма на основе предыдущего изображения:



^ Рис. 2: Устранение деформации. (а) разбиение на фрагменты и (б) их деформация.
Функция, описывающая искажение каждого фрагмента, может быть впоследствии также использована для преобразования координат исходного изображения панорамы в координаты восстановленного изображения для упрощения реализации интерактивного взаимодействия с панорамой.
^

4Реализация интерактивности


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

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

В связи с отсутствием реализации html area map для canvas[3] в текущих версиях основных веб-браузеров, для определения клика на объект используется перехват события нажатия на Canvas с последующим определением попадания курсора в пределы области нажатия.

5Выводы


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

6Ссылки


[1] http://mrdoob.github.com/three.js/

[2] https://secure.wikimedia.org/wikipedia/en/wiki/HTML5_in_mobile_devices

[3] http://www.w3.org/TR/html5/the-map-element.html

Добавить документ в свой блог или на сайт

Похожие:

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

Дипломной практике тема диплома: Разработка сетевой инфраструктуры...
Тема диплома: Разработка сетевой инфраструктуры единой информационной среды кафедры икт

Дипломной практике тема диплома: Разработка распределенной системы управления хостингом
То есть, фактически описываемые модели маршрутизаторов являются небольшими компьютерами. Далее везде под понятиями «маршрутизатор»...

Техническое задание Первый лист тз
В данной дипломной работе спроектирован и разработан кросс-платформенный просмотрщик панорам, интегрируемый в состав веб-страниц....

Отчет по преддипломной практике тема диплома
Федеральное государственное автономное образовательное учреждение высшего Профессионального образования

План диплома «Разработка методов балансировки нагрузки для платформы...
План диплома «Разработка методов балансировки нагрузки для платформы моделирования сетей ns-3»

Разработка статической библиотеки Буфер
Цель создание общей библиотеки для программных решений. Область действия — детализация алгоритмов на языках программирования

Отчет о преддипломной практике Тема «Разработка решения для централизованного...
Тема «Разработка решения для централизованного мониторинга ресурсов еис кафедры икт»

Наиболее распространенными в практике являются
Для чего предназначены запросы: для хранения данных базы;  для отбора и обработки данных базы; для ввода данных базы и их просмотра;...

Курсовая работа по дисциплине «Сети ЭВМ и Средства Телекоммуникаций»
Данная курсовая работа посвящена организации потокового вещания видео в браузер средствами html5

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница