Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Инновационные цифровые решения для профессиональной подготовки педагогов. Монография
.pdf
Инновационные цифровые решения для профессиональной подготовки педагогов 31
женную на рисунке 1.5.2 «Insta360 Pro 2» с штативом. Это
профессиональная панорамная камера 360 градусов, позво-
ляющая снимать фото 360° в разрешении 8К. Запланировано
затратить четыре часа.
Рис. 1.5.2. Панорамная камера «Insta360 Pro 2»
Далее было запланировано обработать эти фотографии с
использованием программы «Adobe Photoshop 2024». Заплани-
ровано затратить от восьми до десяти часов.
Следующим шагом стала сборка из панорам виртуаль-
ной экскурсии на основании пробного периода программы
«Pano2VR». Согласно плану работ, создание виртуальной экс-
курсии по кванториуму ФГБОУ ВО НГПУ необходимо было
организовать работу в объеме двадцати шести часов работы, из
которых четыре приходились на съемку данных на объекте, а
двадцать два на камеральную обработку фотографий и работу с
ними.
1.6 Организация учебно-исследовательской
деятельности обучающихся в технопарке
При разработке виртуального тура, важен ряд компонен-
тов, которые работают вместе, чтобы обеспечить уникальный и
информативный опыт для пользователей. Определим, что вир-
туальный тур – это интерактивное представление объектов,
32 Инновационные цифровые решения для профессиональной подготовки педагогов
местах или событиях, предоставляющее пользователю возмож-
ность визуально изучать и оценивать их [6].
Компоненты виртуальной экскурсии имеют важное зна-
чение для создания уникального и увлекательного опыта для
пользователей. Они помогают передать атмосферу и информа-
цию об объекте или месте, позволяя участникам погрузиться в
историю и культуру места без физического присутствия. Каче-
ственное использование компонентов, таких как интерактив-
ные карты, аудио- и видео-элементы, 3D-моделирование, муль-
тимедийные материалы и интерактивные задания, способствует
созданию привлекательной и познавательной виртуальной экс-
курсии. Кроме того, использование различных технологий, та-
ких как виртуальная реальность или дополненная реальность,
может значительно обогатить и углубить впечатление от экс-
курсии, делая ее более захватывающей и запоминающейся. Не-
которые из ключевых компонентов виртуального тура и их
значение при разработке:
1. 3D моделирование: центральный компонент вирту-
ального тура — это создание трёхмерных моделей объектов,
мест или событий. Это позволяет пользователям визуализиро-
вать пространство и интерактивно исследовать объекты.
2. Интерактивные элементы: интерактивные элементы,
такие как кнопки, ссылки и меню, позволяют пользователям
перемещаться по виртуальному туру и получать дополнитель-
ную информацию. Они обеспечивают пользователю возмож-
ность погрузиться в опыт, управляя темпом и направлением
своего прохождения.
3. Звуковые эффекты и музыка: звуковые эффекты и му-
зыка могут значительно улучшить опыт пользователя, добавляя
атмосферу и эмоциональный контекст. Они помогают создать
потрясающие иммерсивные опыты и делают виртуальный тур
более привлекательным.
4. Визуализация информации: визуализация информа-
ции, такая как интерактивные графики, таблицы и диаграммы,
может быть полезна для комплексной информации. Она может
Инновационные цифровые решения для профессиональной подготовки педагогов 33
помочь пользователям лучше понять данные и контекст, свя-
занный с объектом или местом.
5. Управление освещением и видео: освещение и видео
играют важную роль в создании реалистичной атмосферы и
настроения. Они могут быть использованы для подчеркивания
ключевых аспектов объекта или места, а также видео может
нести дополнительный обучающий контент.
6. Навигация и поиск: навигация и поиск являются важ-
ными компонентами для обеспечения простого и удобного
пользовательского интерфейса. Они позволяют пользователям
легко перемещаться по виртуальному туру и находить инфор-
мацию, которая им интересна.
7. Мобильность: Виртуальные туры должны быть дос-
тупны на различных устройствах, таких как смартфоны, план-
шеты и компьютеры. Это позволяет пользователям изучать и
оценивать объекты и места на туре из любого места и в любое
время.
Компоненты виртуальной экскурсии могут быть исполь-
зованы для создания более интерактивного и увлекательного
опыта для пользователей. Например, можно включить компо-
ненты для показа 360-градусных панорам, интерактивных карт,
аудио- и видео-элементов, анимации, слайд-шоу и т.д. Пользо-
ватель сможет взаимодействовать с компонентами, чтобы уг-
лубить свое понимание места или объекта, который он изучает.
Далее в работе представлен процесс создания компонен-
тов виртуального тура, включающая в себя разработку и инте-
грацию различных элементов.
На первом шаге разработки проекта осуществляется
сьемка 360-градусных панорам. Перед съемкой панорам были
определены места, с которых просматривается полностью по-
мещение. На рисунке 1.6.1. изображен готовый смонтирован-
ный снимок одного из помещений кванториума НГПУ
34 Инновационные цифровые решения для профессиональной подготовки педагогов
Рисунок 1.6.1. Панорамный снимок одного
из помещений кванториума НГПУ
Второй шаг при создании виртуальной экскурсии, это
добавление интерактивных элементов, например в виде точка
перехода. Точки перехода в виртуальном туре представляют
собой активные зоны, которые размещают непосредственно на
изображениях и используют для перехода от одного панорамы
к другому. В данном туре точки перехода были использованы
для перемещения от одной панорамы к другой. С их помощью
пользователь может передвигаться в желаемом темпе и в удоб-
ном для конкретного зрителя порядке.
На следующем шаге разработки проекта над виртуаль-
ным туром были предусмотрены добавление дополнительных
компонентов, таких как анимированные элементы, звуковые
эффекты, видеоролики и текстовые описания. При их разработ-
ки особое внимание было уделено соответствие требуемому
стилю и дизайну виртуального тура.
На рисунке 1.6.2 и 1.6.3. представлены дополнительные
компоненты виртуального тура.
Инновационные цифровые решения для профессиональной подготовки педагогов 35
Рисунок 1.6.2. Точка перехода для запуска
и просмотра видеоконтента
Рисунок 1.6.3. Всплывающая фотография
с дополнительной информацией
Фотография в виртуальном туре может использоваться
для добавления всплывающих изображений, которые можно
повернуть под любым углом или увеличения картины на стене.
Для расширить возможности зрителя, почерпнуть боль-
ше информации из просмотра панорамы можно интегрировать
внутрь сцен видеоролик. По этой причине было добавлено по
одному обучающему видео в каждом из кабинетов кванториу-
ма. Если нажать на интерактивную доску или экран, находя-
щиеся в кабинетах, поверх панорамы откроется окно видео-
36 Инновационные цифровые решения для профессиональной подготовки педагогов
проигрывателя, в котором начнёт демонстрироваться заранее
добавленный ролик.
Завершающим шагом в разработке проекта является тес-
тирование программного продукта и выявление технических
проблем. В процессе тестирования проекта были усовершенст-
вованы и оптимизированы некоторые компоненты виртуально-
го тура, такие как: улучшении качества панорам, уменьшении
размера файлов и/или увеличении производительности вирту-
альной среды.
Для разработки технической части виртуальной экскур-
сии была выбрана программа Pano2Vr. На рисунках 1.6.4.-
1.6.7. показано часть снимков реализации технической прора-
ботки и сборки проекта.
Рисунок 1.6.4. Стартовая страницы программы Pano2Vr
для редактирования виртуальной экскурсии
Инновационные цифровые решения для профессиональной подготовки педагогов 37
Рисунок 1.6.5. Настройка «правильного» горизонта панорамы
Рисунок 1.6.6. Определение свойств точки перехода
38 Инновационные цифровые решения для профессиональной подготовки педагогов
Рисунок 1.6.7. Настройка анимации для перехода
между панорамами
Создание переходов между панорамами в панорамиче-
ской 360-градусной виртуальной реальности – это процесс, ко-
торый включает в себя различные этапы: сборочный процесс,
оптимизацию и настройку. Перед созданием переходов между
панорамами, необходимо собрать все необходимые ресурсы и
файлы, такие как панорамы, звуковые элементы и другие ау-
диовизуальные элементы. В пано2вр обычно используются
файлы форматов cubemap или png для панорам, а для звука -
форматы wav, mp3 или ogg.
Чтобы у участника виртуальной экскурсии было ощуще-
ние погружения в тур, можно настроить анимацию для перехо-
да между панорамами. Можно использовать различные мето-
ды, представленные в программе, такие как затухание, замед-
ление, поворот или смещение. В зависимости от желаемого
эффекта, можно выбрать подходящий метод анимации. Напри-
мер, затухание — это эффект, при котором одна панорама по-
степенно сменяется другой, снижая свою видимость.
Было решено выбрать один вид перехода для всех пано-
рам. Зритель будет видеть только один вид перехода, что по-
зволит ему быстро перемещаться между сценами. А также это
Инновационные цифровые решения для профессиональной подготовки педагогов 39
позволяет сохранить целостность проекта. Анимация перехода
между панорамами должна быть интегрирована в пано2вр-
проект. Это может включать в себя добавление скриптов и ко-
дом, которые отвечают за управление переходами между пано-
рамами, а также настройку интерфейса пользователя для
управления анимацией.
В случае с данным виртуальным туром, было принято
решение сделать авто вращение комнаты в центральных точках
кабинета при помощи HTML кода. Авто вращение панорамы в
виртуальном туре создаст эффект погружения и обеспечит бо-
лее детальное представление. Пользователь сможет вращать
панораму и исследовать виртуальное пространство, а также
сможет остановиться у каждой детали или архитектурного эле-
мента и вернуться назад.
Ниже представлен фрагмент кода для реализации про-
цесса авто вращения панорамы в виртуальном туре.
<div id="container"
style="width:100%;height:100%;overflow: hidden;"> == $0
<div style="top: 0px; left: 0px; position: relative; touch-
action: none; t
ext-align: left; user-select: none; z-index: auto;">
<div style="top: 0px; left: 0px; width: 1311px; height:
912px; overflow:
hidden; position: absolute; touch-action: none; user-select:
none;">
<canvas width="1311" height="912" style="width: 1311px;
height: 912px;
display: inline; touch-action: none; position: absolute;">
<img style="-webkit-user-drag: none; max-width: none;
pointer-events:
none; position: absolute; left: 655.5px; top: 456px; width:
1010px;
height: 854px; transform-origin: 0% 0%; transform: perspec-
tive(419px)
40 Инновационные цифровые решения для профессиональной подготовки педагогов
translate3d(0px, 0px, 419px) rotateZ(0deg) rotateX(-
8.81692deg)
rotateY(353.262deg) rotateY(-255.04deg) rotateX(-
11.87deg)
translate3d(0px,px, -4279.84px) rotateZ(-3deg) rotateY(-
30deg) rotateX(0deg)
translate3d(-505px, -427px, 0px); visibility: visible;"
class="ggmedia" src=
"media/117.jpg" width="1010" height="854">
</div>
<canvas style="top: 0px; left: 0px; width: 1311px; height:
912px;
overflow: hidden; position: absolute; user-select: none;"
width="1311" height="912">
<div style="top: 0px; left: 0px; width: 1311px; height:
912px; overflow:
hidden; position: absolute; user-select: none; z-index: 4; cur-
sor: none;
">
<div style="position: absolute; user-select: none; -webkit-
tap-highlig
ht-color: rgba(0, 0, 0, 0); left: -1000px; top: -1000px; transi-
tion:
none 0s ease 0s; visibility: hidden;">
<img style="position: absolute;width: 28px; height:
28px;top: -14px;
left: -14px; -webkit-user-select: none; max-width: none;"
src=
"data: image/png; base64,
iVBOR…6HSDa90AAAABJRU5ErkJggg%3D%3D">
</div>
Для более наглядной навигации по виртуальному туру
была добавлена карта, представляющая собой план перемеще-
ния. Пример плана перемещения по виртуальному туру реали-
зовано на рисунке 1.6.8.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]