Интерактивные виртуальные инсталляции Текст научной статьи по специальности «Компьютерные и информационные науки»

ИНТЕРАКТИВНЫЕ ВИРТУАЛЬНЫЕ ИНСТАЛЛЯЦИИ

Баданов Александр Геннадьевич,

методист Марийского республиканского колледжа культуры и искусств имени И.С. Палантая Баданова Надежда Михайловна,

старший преподаватель, Поволжский государственный технологический университет, ФГБОУ ВПО «ПГТУ»

• образовательные технологии • мобильный • инсталляция • экскурсия • проект

• виртуальная экскурсия • панорама • синт • МООС

Введение

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

Слово «инсталляция» в английском языке в отличие от русского появилось очень давно - в XV веке. Оно обозначает процесс сооружения, сборки, составления чего-либо.

«Виртуальная инсталляция» - визуализация объектов в цифровом воплощении.

Время от времени приложение Google Фото автоматически создаёт из загружен-

ных пользователем фото и видео различные объекты (коллажи, панорамы и др.). Такие объекты попадают в раздел «Ассистент». Обычно это происходит, когда пользователь загружает на свой Google-диск материалы. Все модифицированные и автоматически сгенерированные объекты можно найти в своём аккаунте здесь (https://photos.google.com/search/_taa_). И вот, получив очередное сообщение, что из загруженных фотографий «волшебные сервисы Google» автоматически сгенерировали новую панораму и её теперь можно посмотреть, сохранить и скачать, авторы попробовали поискать, а можно ли в Google Фото самим создавать панорамы?

Как выяснилось, пока нет, но есть возможность создавать (https://photos.google.com/ assistant) альбомы, анимации и коллажи (от 2 до 9 фото). Автоматически сгенерированная панорама школьного двора (https://goo.gl/

Поиск в Google Мне понезёг!

QZoabb) - статична (использованы фотографии, сделанные с помощью обычного смартфона). Сейчас современные школьники постоянно имеют при себе фотокамеру, которая встроена в мобильное устройство. Впереди лето - это поездки, экскурсии, лагеря, походы и путешествия. Использовать в работе с обучающимися возможность генерации панорам (в особенности если панорамы будут ещё и интерактивными) очень заманчиво. Можно создать виртуальные экскурсии с помощью созданных панорам. Привлекут внимание школьные панорамы (праздники, линейки, флешмобы, соревнования и др.) Для образовательного учреждения (ОУ), пополнения его сайта возможно создать виртуальные панорамы школьного музея, столовой, зала, класса или целую виртуальную экскурсию по школе, которая может состоять из нескольких панорам. Рассчитывать на то, что Google-ас-систент будет создавать при загрузке фотографий панорамы, бессмысленно. Поэтому возьмём в свои руки весь процесс.

Панорамная фотография - обобщённое название всего, что связано со съёмкой панорам, это:

• фотография с большим углом обзора, превышающим возможности обычных объективов, зачастую больше 180 градусов;

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

В зависимости от области применения панорамы могут быть планарными и виртуальными.

(¡1 Оповещения Google

X

Google Фото

Новая панорама на основе ваших

фото

Праи^ттанные (Ооод1е+)

Оборудование, которое понадобится для создания интерактивных фотопанорам

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

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

Если есть возможность, желательно воспользоваться качественным фотоаппаратом. Разницу в готовых панорамах и снимках можно посмотреть в примерах (ниже по тексту). При применении зеркального фотоаппарата штатив не будет лишним. Желательно отключить автоматическую настройку в фотоаппарате и настроить его вручную. Для упрощения можно воспользоваться шаблонными, определёнными под конкретную тематику (спорт, портрет, вечеринка, пейзаж и т.д.) настройками. Это позволит выдержать параметры фотоснимка близкими на разных фотографиях, которые будут использованы в одной панораме.

Если планируется съёмка в маленьком помещении, то имеет смысл воспользоваться съёмным широкоугольным объективом для панорамной съёмки. От количества света зависит качество панорамы.

Создание снимков для панорамы

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

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

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

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

Панорамы могут быть круговыми или в виде сектора, который охватывает объект(ы) съёмки. Фотографированию может поме-

Генерируем виртуальную панораму

Для быстрого и несложного создания виртуальных панорам можно воспользоваться онлайн-сервисом Dermandar (http://www. dermandar.com/).

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

SDK Create Share Embed

Sign Up Login Info *

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

Есть возможность точной привязки панорамы к географической карте. Это позволит находить нужные панорамы не только по тегам, но и используя карту. У сервиса существует бесплатный тарифный план. В ком-

мерческих тарифных планах возможно создание панорам с более высоким качеством финальной интерактивной панорамы.

Инструкция по работе с сервисом в виде презентации доступна по ссылке https:// goo.gl/rFFVTv. Инструкция в виде видеоролика доступна здесь (https://youtu.be/n-IbFKOYNAM).

Примеры панорам, сделанных с помощью описываемого сервиса и простого смартфона:

• Школьный двор (http://pnr.ma/agfXug).

• Этнографический музей (http://pnr.ma/ bHFzPp).

• Кукольный театр (http://pnr.ma/exbNAz).

Примеры панорам, созданных с помощью цифрового фотоаппарата (в отдельные панорамы интегрированы звуки и музыка):

• Вид со склона Каменной горы (https:// доо.д1/иЬ^Х1Р).

• Табашинское озеро - самое глубокое озеро Республики Марий Эл (http://badanov1. narod.ru/panorama/tabashino_2012.swf).

• Капустник луга Волжск (здесь проводится музыкальный фестиваль «Мамака-бо») (http://badanov1.narod.ru/panorama/ luga_volzhsk_out.swf).

• Шереметевский замок в Юрино (http:// badanovl .narod.ru/panorama/sheremetevo_ zamok_out.swf).

Объединяем несколько панорам на одной странице

Так как на этом этапе создания виртуальных панорам (групп панорам) возможности ранее рассмотренного WEB-сервиса не позволяют создавать коллективную работу (хотя можно использовать специально придуманный тег или организовать привязку к карте), в которой и будут объединены панорамы всех участников школьного проекта, то это можно дополнить с помощью простых средств, доступных для обучающихся. Обратите внимание, что виртуальная экскурсия (группа связанных между собою панорам) может состоять и из одной панорамы, если она дополнена рассказом об объекте съёмки.

Можно воспользоваться отличным сетевым решением - картами Google (https://www. google.ru/maps).

Задача педагога создать карту и организовать к ней доступ для совместного редактирования. В этом случае каждый пользователь, который подключён к проекту, может

работать с картой и добавлять на неё свои панорамы. Рекомендуется каждому пользователю создавать свой слой и на этот слой добавлять маркеры со ссылками. Здесь же, в текстовом контейнере, можно прикреплять и небольшой рассказ о достопримечательности. Для работы с картами Google нужно иметь аккаунт Google.

Инструкция по созданию карты доступна здесь (https://goo.gl/w9wVDb). Ссылка на карту для чтения доступна по ссылке https:// goo.gl/UASrOX.

Создаём панорамы и виртуальные экскурсии. Усложняем задачу

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

Именно так и работают виртуальные экскурсии, которые опубликованы в сети Интернет, и многие с успехом используют эти виртуальные экскурсии в образовании, культуре и коммерции...

Сшиваем фотографии в панораму

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

Воспользуемся бесплатным приложением от компании Microsoft Research Image Composite Editor (http://research.microsoft. com/en-us/um/redmond/projects/ice/) - это программа, которая склеивает отдельные фотографии в большую панорамную фотографию. В зависимости от разрядности (32-или 64-разрядная) версии пользовательской операционной системы, скачиваете нужный дистрибутив на свой компьютер и устанавливаете программу. Размер дистрибутива небольшой - около 7 Мб.

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

• Грузим фотографии.

• Выделяем фото для генерации панорамы.

• Собираем панораму.

• Подрезаем неровности.

New Panorama

И*Д From Images

Pg^ New Panorama

From Video

^^m Open

I Existing Panorama

Ö ? _ П X

Popular Photosynth.net panoramas Also from Microsoft Research

t'-jl

Pool De de Before TheDonAnton, 19.05,2016

autterBtesteri-2016Ü526A LeaderHelper, 21,05,2016

Murale dl tift. bmiioteea îcl andranik1%6, 21,05,2016

Mourrtaimriew Hariey-Davidsen MountainviewPid, 22.05.2016

Microsoft Hyperfapse Mobile

A mobile version for Android customers who want to capture hyperlapses on the go.

• Сохраняем на свой компьютер (можно выбрать качество сжатия).

Инструкция по использованию программного продукта доступна здесь. (https://youtu. be/uS1p51OVryE). Пример сшитой панорамы (собрана из фотографий, сделанных с помощью смартфона) здесь (https://img-fotki.yandex.ru/get/62868/15740959.67/0_9a са7_а4а46655_опд). Пример сшитой панорамы (собрана из фотографий, сделанных с помощью фотоаппарата) здесь (https:// img-fotki.yandex.ru/get/26439/15740959.67/ 0_9асЬ0_ес6е927с_опд).

Генерация панорам и экскурсий

Теперь начинается самый ответственный этап по сборке интерактивной панорамы, которая готовится из одной панорамной фотографии. Для такой сборки воспользуемся программой от Garden Gnome Software Pano2VR (http://gardengnomesoftware.com/). Это приложение предназначено для преобразования сферических или цилиндрических панорамных изображений в различные форматы (QuickTime VR (QTVR), Adobe Flash (SWF), HTML5 и CSS3).

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

поддержка различных скинов, автопрокрутки. Есть поддержка русского языка.

К сожалению, эта программа распространяется платно и стоит около 100 Евро. Но существует возможность использовать её и бесплатно. На официальном сайте программы есть тестовая версия. При создании тура тестовый вариант программы добавляет свой логотип. В сети часто можно встретить несколько устаревшие версии этой программы в виде портативных (portable) версий. В таком виде программу не нужно устанавливать на свой компьютер, а просто переписать или запускать с флешки. Готовую панораму можно масштабировать, прокручивать, использовать интегрированный медиаконтент. Для этого используются кнопки навигации и курсор мышки.

Видеоуроки от создателей программного продукта доступны здесь. (http://gardengno mesoftware.eom/tutorial.php#pano2vr). Инструкция на примере создания интерактивной презентации «Комсомольская площадь» (http://mrkkii.ru/other/komsomol_platc_ out.swf) доступна здесь. (https://youtu.be/ vQOAchvjlbk).

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

J ЗПОРМ

Software

ММЁШ

Objet t2VR Documentation

, What are you looking for?

a

Buy a ¡¡cense standard version for

ONLY «ДОС OKL, VAT

PAN02VR

Create virtual tours and interactive 360" panoramas. Update to 5.0.1 (2016-04-08 12:15)

чальном этапе работы, но для получения достаточно качественных панорам необходимо наличие хорошего фотоаппарата.

Ещё примеры:

• Мини-экскурсия «Старая школа» (http:// badanovl .narod.ru/mio-8000_out.swf). Переход из помещения в помещение, подписи и обозначения объектов, направленный звук.

• Панорама «Замок Шереметевых». (http://badanov1 .narod.ru/panorama/ sheremetevo_zamok_out.swf). Герб рода Шереметевых интегрирован заранее в панорамное фото.

• Панорама «Комсомольская площадь» (http://mrkkii.ru/other/komsomol_platc_out. swf ). Использованы фотографии, сделанные с помощью простого смартфона. Заметны неровности сшивания отдельных деталей панорамы.

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

Синты и панорамы от Photosynth

Photosynth (http://photosynth.net/) - проект известной компании Microsoft. Проект очень популярен в мире. Этому активно способ-

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

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

Для установки программного продукта на компьютер пользователю необходимо будет ввести идентификационные данные Microsoft Live. Это позволит установить программу-клиент на пользовательский компьютер для совмещения фотографий и загрузки их на сервер сервиса и последующей привязки к карте. Таким образом, пользователь осуществляет обработку программ на своём локальном компьютере, а синтезированная панорама будет опубликована на сервисе. Это позволяет ускорить работу с массивными фотографиями, не грузить их на сервер, позволит организовать доступ к созданным панорамам и синтам. Некоторые синты могут создаваться из нескольких сотен фотоснимков. Photosynth объединяет две мощные современные технологии: возможность реконструкции сцен или предметов (ло-

кальный компьютер) на основе набора двухмерных фотографий и технологию, обеспечивающую доступ (сервис) к объёмным панорамам для любых пользователей сети Интернет.

Применяя технологии распознавания объектов, программа РЬю^уп^ обнаруживает на изображениях схожие элементы и использует эти данные, чтобы определить объект съёмки и точку, откуда была сделана фотография. Программа использует данные анализа для отображения фотографий в виде панорамы или синтезированного изображения.

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

Требования к фотографиям для создания панорам

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

О качестве сбора панорамы можно судить по проценту подключённых фотографий в сгенерированную панораму. Замечательно, если удаётся добиться 100-процентного результата.

Photosynth 2 114.807.1507

^ A Microsoft v' Photosynth twdanov£*ve,ru

Storage quota: ^^^^^^^ 0.1GB used of 20.0G6 ШЯ КЭЯ

primer PANORAMA

•У Compteted (100% synthy)

Требования к фотографиям для создания синта

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

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

Требования к фотоаппарату

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

Программа Photosynth при анализе фотографий, загруженных пользователем, сама выбирает, что получится в результате генерации. Это может быть как синт, так и панорама. Всё зависит от набора фотографий, сделанных автором и загруженных в программу-клиент.

Мобильное приложение Photosynth доступно в App Store (http://itunes.apple.com/ru/app/ photosynth/id430065256?mt=8).

Руководство от компании Microsoft по работе с программным продуктом доступно здесь (https://education.microsoft.com/Story/ Tutorial?token=0DAB8). Инструкция по работе с сервисом доступна здесь (https://goo. gl/6WBoiK).

Я 1,0, 1-0= 1 И 1

Структура

VI*!

i ВКДОНИС J Панс0аи>ше фотографии А Обору допагек;

Виртуальные инсталляции 5 Сним>и для юлдания паноряиы 6 Сервисы it гехнйлогин 7. ТЕСТ В Создаем виртуальную ижггаллчи .. 9 Примеры to. Встроенный пример

11. №сгруктнтыа маюрнлпы 12. Заданно

Фрагмент электронного курса 13. Дапйпмтшы«*« материалы ч, Рефлексия

© Александр Бэдэнов, 2017

Пример встроенного синта «Царевокок-шайский кремль» на страничку блога здесь (http://badanovag.blogspot.com/2011/08/blog-post_16.html).

Пример (фотографии предварительно уменьшены в размерах) синта «Троицкий храм» (https://goo.gl/PplG6z). Пример панорамы (фото с мобильного устройства) «Фрагмент площади Никоно-ва» (https://goo.gl/xMdiHH). Пример (полноценные фото с фотоаппарата) панорамы «Драматический театр» (https://goo.gl/asA269).

Но, помимо создания панорам, возникает необходимость виртуализации отдельных объектов. Когда объект, в буквальном смысле слова, можно «покрутить в руках» и рассмотреть со всех сторон с помощью собранных в единый файл набора фотографий. Режимы просмотра синтов доступны здесь (https://youtu.be/sVUfJrXg-jA). Также приводится зрительно анализ фотографий и интеграция снимков в виртуальную инсталляцию.

Электронный курс «Виртуальные инсталляции»

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

ный подход к обучающимся. В программированном обучении учебный материал подаётся небольшими порциями (модулями) с контролем усвоения материалов. Алгоритмизированные инструкции позволяют ученикам уверенно выполнять предусмотренные в модуле практические задания. Работа ведётся в системе дистанционного обучения (СДО). В примере (по ссылке ниже) этот же модуль реализован в качестве самостоятельного ресурса в формате Flash. Подобным образом обычно организуется материал на так популярных в мире и в РФ массовых открытых курсах (МООС).

Модуль (с пояснениями модератора) электронного курса «Виртуальные инсталляции» http://mrkkii.ru/bad/virt2/index.html

В статье рассмотрены различные сервисы и программные продукты, решения которые могут оказаться полезными в урочной и внеурочной деятельности педагога. □

Литература

1. Баданов А.Г. Интерактивности. WEB-сервисы для образования // Сайт Александра Баданова. - 2012. [Электронный ресурс]. URL: https://sites.google.com/ site/badanovweb2/ (дата обращения: 20.04.2017).

2. Баданов А.Г. Тропинки. Идеи, технологии, сервисы для учителей // Личный блог Александра Баданова. - 2013. [Электронный ресурс]. URL: http:// badanovag.blogspot.ru/ (дата обращения: 20.04.2017).