Научная статья на тему 'ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ВИРТУАЛЬНОЙ ЭКСКУРСИИ ПО НИЖНЕВАРТОВСКОМУ ГОСУДАРСТВЕННОМУ УНИВЕРСИТЕТУ'

ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ВИРТУАЛЬНОЙ ЭКСКУРСИИ ПО НИЖНЕВАРТОВСКОМУ ГОСУДАРСТВЕННОМУ УНИВЕРСИТЕТУ Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
136
26
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
ПАНОРАМА / ПРОЕКТИРОВАНИЕПАНОРАМ / ВИРТУАЛЬНАЯЭКСКУРСИЯ / ПРОЕКТИРОВАНИЕ ВИРТУАЛЬНОЙ ЭКСКУРСИИ / PANO2VR

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Пащенко А. И., Манюкова Н. В.

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

i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

DESIGN ANDDEVELOPMENT OF A VIRTUALTOUR OF NIZHNEVARTOVSK STATE UNIVERSITY

The article is devoted to the design and development of a virtual tour of the fourthbuilding of the Nizhnevartovsk State University. A virtual tour is a combination of panoramicphotographs, when the transition from one panorama to another is carried out through active zones. Such excursions allow absolutely everyone to remotely move around any locationusing computer technology. The paper describes the requirements for creating a high-qualitypanorama. The results of the study are presented as finished panoramas and a realized virtual tour.

Текст научной работы на тему «ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ВИРТУАЛЬНОЙ ЭКСКУРСИИ ПО НИЖНЕВАРТОВСКОМУ ГОСУДАРСТВЕННОМУ УНИВЕРСИТЕТУ»

УДК 004.42 DOI 10.24147/2222-8772.2023.2.103-118

ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ВИРТУАЛЬНОИ ЭКСКУРСИИ ПО НИЖНЕВАРТОВСКОМУ ГОСУДАРСТВЕННОМУ УНИВЕРСИТЕТУ

А.И. Пащенко

магистрант, e-mail: arty.pashenko@mail.ru Н.В. Манюкова

канд. пед. наук, доцент, e-mail: manukovanv@mail.ru

Нижневартовский государственный университет, Нижневартовск, Россия

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

Ключевые слова: панорама, проектирование панорам, виртуальная экскурсия, проектирование виртуальной экскурсии, Рапо2УЯ.

Введение

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

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

1. Понятие и особенности проектирования виртуальной экскурсии

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

При фотографировании панорам важно, чтобы не попадали движущиеся объекты в кадр (например, люди, облака, транспорт, качающиеся от ветра элементы), чтобы не изменялось освещение. Стоит производить съёмку в формате RAW. Он обеспечивает дополнительные возможности по обработке каждого кадра, к примеру, смена экспозиции. Для фотографирования используется панорамная камера Ricoh ThetaZl, разрешение фото которой 6720 на 3360 пикселей, а угол обзора линз по вертикали составляет 200 градусов, благодаря чему просматривать изображение можно будет полностью, и снизу, и сверху в виртуальной экскурсии.

Важно правильно распределить точки съёмки, чтобы иметь представление о виртуальной экскурсии и получить на выходе более качественный продукт. При исследовании места съёмки были составлены схемы этажей и определены 122 точки съёмки.

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

Будет использоваться сферический тип панорам, у которого угол обзора по вертикали - 180 градусов, а по горизонтали - 360. То есть зритель может осматриваться полностью вокруг себя, как если бы это было в реальной жизни. Интерфейс не должен вызывать чувства, будто его функционал является лишним. Элементы взаимодействия должны лишь ненавязчиво дополнять экскурсию.

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

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

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

Перемещение между этажами будет осуществляться через нажатие на элемент в

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

Хоть камера и будет сама сшивать снимки, после съёмки потребуется дополнительное редактирование в Adobe Photoshop и Adobe Photoshop Lightroom.

Для создания иконок элементов интерфейса виртуальной экскурсии также используется программа Adobe Photoshop. Стоит постараться выполнить изображения в едином стиле для всего интерфейса, особенно на панели управления, где все элементы будут находиться рядом друг с другом. Иконки для функций на панорамах будут в формате png, а файлы для панели управления будут реализованы в Adobe Illustrator в формате svg.

В программе Pano2VR существует возможность преобразования панорамных картинок в сферу, цилиндр, горизонтальный крест и т. д. Можно добавить в виртуальную панораму активных областей для перехода на определённые web-страницы, например с другими панорамами. Это даёт нам возможность создавать упрощённые виртуальные экскурсии.

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

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

При создании иконок (рис. 1, 2) используются цвета корпоративного стиля Нижневартовского государственного университета. На каждый элемент реализовано два варианта иконки - обычный и с инвертированными цветами. При наведении курсора мыши на объект цвет будет меняться. Результаты представлены ниже.

Рис. 1. Иконки для элементов интерфейса на панорамах

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

йЮ

©10101©

Рис. 2. Иконки для панели управления

После съёмки локаций с несколькими вариантами параметров получилось более 650 панорам. Изображения снимались на 360 градусов, т.е. против света и по свету одновременно, и для решения некоторых проблем на этапе редактирования фотографии делались в нескольких экземплярах с разной выдержкой. Следующий этап - определить, какие из вариантов больше подойдут для обработки. Делается это на глаз методом пробы. Редактировать панорамы нужно так, чтобы они не выбивались по освещению между соседними панорамами. Делается это для большего эффекта присутствия и реализма. Выбрав нужный вариант, обрабатываем его в Adobe Photoshop и Lightroom. Если выбранная панорама не совсем подходит для обработки в нужном общем стиле ближайших панорам, пробуется для редактирования другая версия изображения. Закончив с обработкой, на выходе получаем 133 файла с панорамами локаций для реализации виртуальной экскурсии. Панорама до и после обработки представлена на рис. 3.

Рис. 3. Панорама до и после обработки

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

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

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

Кнопка - это основной элемент управления виртуальной экскурсией. В виде кнопки можно использовать изображение в формате jpg, bmp, gif, png, текст или swf-файл. Кнопке можно присвоить несколько значений сразу, если они не будут противоречить друг другу. Например, можно использовать такие функции как: управление движением и масштабом панорамы, переключение между панорамами, включение/отключение полноэкранного режима, включение/отключение звукового сопровождения, открытие/закрытие всплывающего окна. Карта виртуальной экскурсии даёт возможность облегчить ориентацию в пространстве виртуальной реальности.

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

2. Разработка виртуальной экскурсии

После съёмки и редактирования панорам в Adobe Photoshop можно перейти к созданию виртуальной экскурсии. Для реализации будет использована программа Pano2VR. После импорта панорамы (рис. 4) задаётся её тип - эквидистантная, чтобы не ограничивать управление панорамой только по горизонтали.

Файл: Панорамы/1-ый этаж/start.jpg *

Преобразовать импорт

Импортировать видео: i

Файл: Я

Альтернативные Файл(ы): Я

Тип: Эквидистантная *

Рис. 4. Импорт изображения панорамы

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

подсказки, которая будет появляться при наведении курсора на выделенный нами объект. Также полигональная активная зона может содержать ссылку (URL).

Добавить полигональную активную зону можно нажав кнопку с пиктограммой или горячей клавишей «O» (рис. 5). Далее определяем место расположения первой точки и нажав дважды левую кнопку мыши, производим её установку. Нажатием расставляются следующие точки. Создать связи между панорамами, изменить заголовок и добавить описание можно во вкладке «Свойства».

Рис. 5. Полигональная активная зона

Свойство «Объект» для веб-ссылок принимает значения _Ыапк, _рагеп1, _ве1/, _Ъо'р. Для панорам это свойство записано в формате Рап/ТШ/РоУ, что определяет целевые параметры просмотра панорамы, в которую будет осуществлён переход. Например, если в «Объект» записано 70/-20/90, то после перехода на панораму она будет повёрнута на 70° влево относительно своего центра, наклонена вниз на 20° относительно горизонта и угол обзора установится в 90°. Если свойство «Объект» пусто, будут использованы параметры вида по умолчанию, установленные в параметрах проекции. Зададим такие параметры, чтобы если мы перешли из одной первой локации во вторую, а затем вернулись обратно, ракурс был бы не тот же, что был до этого по умолчанию на первой локации, а параллельно второй локации, в которую переходили до этого, точно так же, как если бы мы перемещались в реальной жизни.

У активных зон на закрытых дверях стоит произвести окрашивание в полупрозрачный цвет, например, в синий. Изменить параметры активной зоны по умолчанию можно в разделе «Активные зоны» (рис. 6). У остальных активных зон в индивидуальных свойствах меняем вручную цвет на полностью прозрачный. Так пользователю будет удобно понимать, в какие аудитории можно войти из данной локации,

а в какие - нельзя.

w Активные зоны

V Текстовые модули активных зон

Размер: 180 i л 20 Авто

Текст: Цвет: Ц V Перенос слов Фон: Видимый: V Цвет: | Рамка: Видимый: "J Цвет: Q Радиус: 1

Многоугольные активные зоны

Режим просмотра: Всегда виден

Фоновый цвет: Q

Цвет рамки: Q Курсор: Включить

Рис. 6. Раздел «Активные зоны»

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

Для этого используется инструмент «Заплатка» (рис. 7). Ставим на месте штатива и в свойствах выбираем файл с форматом ри§ и выставляем высокое качество.

Рис. 7. Результат использования инструмента «Заплатка»

Иногда нужно добавить информацию о каком-либо объекте на панораме, например, указать информацию о каком-либо преподавателе, оборудовании или аудитории. Для добавления аннотации нужно добавить точечную активную зону (рис. 8). В

свойствах активной зоны выбираем тип «Информация», а в «Название» записываем необходимую информацию.

Свойства - Точка активной зоны

ГО: Тип:

Шаблон-Ю:

РсмпЮ1

Информация * Ьо1ароЫп1Ь_3

робототехники и нехатроники

Целевая ЦЩ ссылка:

Рис. 8. Добавление точечной активной зоны

Создать оформление и функционал точечной зоны и других кнопок можно в «Редакторе шаблона».

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

\ Ьойро1_(пй>_2 4142,107

▼ ¡п*Ъ_сарЬоп_Ьаг_2 138, -95

1 1 ¡пЛ>_та1п_1ех12 ТО,-64

1 I юГ_сарЙоп_1ех12 ^75,-10

X юЛэ_с1о5е_|пЛ>_2 ч244,2

1 Я Ыл_1П<о_2 ♦ 1,1

Рис. 9. Элементы в редакторе шаблона

Окно с текстом «ш1?_сар11оп_1ех12» расположится на прямоугольнике «т£о_сар11Юп_Ьаг_2». В нём будет лишь заголовок. Справа в углу будет расположена кнопка «ш!?о_с1о8е_т1?о_2», которая отвечает за закрытие окна с информацией. Всё

это будет находиться выше кнопки «btn_info_2», нажатие на которую и открывает нашу аннотацию.

Перейдём к настройке элемента «inf_caption_text2». Зададим выравнивание по левому краю, а в свойстве «Text» введём строку <b><p class=«info_caption»>ИНФОРМАЦИЯ</p></b>. Как видим, используется разметка HTML. С помощью CSS можно изменять стили, цвет, размер текста и др. В нашем случае мы сделали шрифт жирным.

В качестве изображения для кнопки выбираем заранее изготовленный при помощи Adobe Photoshop файл со значком «i». При создании картинки использовались корпоративные цвета НВГУ. Изображение при наведении ставим с той же картинкой, но с уже инвертированными цветами.

Перейдём к настройке текстового окна, в котором будет отображаться текст аннотации - «info_main_text2». С помощью свойства «Перенос слов» текст переносится по словам, причём ширина поля остаётся неизменной, а высота изменится в зависимости от объёма текста. Если отключить это свойство, текст будет показан в одну строку. Поле с информацией также окрашено в корпоративные цвета НВГУ. Данная настройка окна с информацией больше подходит для небольших строк текста.

Для объёмных данных необходимо включить свойство «Полоса прокрутки». В свойстве «Text» введём строку <p class=«info_main_text»>$hs</p>. Вместо $hs будет подставляться название активной зоны, т.е., текст с информацией.

Можно перейти к созданию сценариев. Создадим действие для кнопки информации (рис. 10).

Источник Действие Параметры Объект

Клик мыши Показать элемент infö_caption_bar_2 О

Клик мыши Скрыть элемент Sself о

Мышь наведена ... Изменить масшт... VI Sself о

Мышь за предел... Изменить масшт... 0.7/0.7 Sself о

1

Рис. 10. Настройка действий для кнопки вывода информации

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

Нажатие кнопки мыши будет отображать элемент «ш!о_еар1;юп_Ьаг_2», так как он родительский для остальных элементов. Сама кнопка на момент показа аннотаций будет скрываться. При наведении и отведении курсора на кнопку она будет изменять масштаб.

Нажатие на кнопку «т!о_с1о8е_т!о2» будет скрывать информацию, а кнопка отображения аннотации, наоборот, станет видима.

Расставляем точечные активные зоны и делаем аннотации на всех панорамах, на которых нужно разместить информацию (рис. 11).

Рис. 11. Готовая аннотация

Для точечной активной зоны для большого объёма текста применяются те же действия с разницей высоты окна и изображения. У текстового окна включаем параметр «Полоса прокрутки».

Иногда в экскурсии нужно показать какое-либо изображение. Например, фото объектов с другого ракурса, для более детального рассмотрения.

Создаётся элемент активной зоны. В свойствах зададим идентификатор «Ио18ро1;_рИо1;о» (рис. 12). Свяжем элемент активной зоны с кнопкой «ЬШ_рЬо1;о».

hotspot_photo

Ыл _photo

photo_con tainer

^^ dose_photo

s624,-l

Рис. 12. Элементы в редакторе шаблона

Добавляется контейнер с идентификатором «photo_container» и нужными нам размерами (624x320 точек). Изображения, отображающиеся в контейнере, должны иметь тот же размер, так как больший размер приведёт к тому, что кадр выйдет за пределы предполагаемого окна, а меньший - к тому, что будут большие рамки у изображения.

Кнопке «btn_photo» создаются действия для обработки нажатия ЛКМ. Нажатие кнопки мыши будет осуществляться с помощью действия «Выбрать значение» для контейнера значение URL для активной зоны, которое мы определили в свойствах активных зон. Это будет адрес изображения. По нажатию станет виден контейнер, а кнопка для показа контейнера исчезнет. Изображения для отображения и для отображения при наведении, как и в случае с кнопкой информации, выполнены с использованием корпоративных цветов НВГУ.

Для элемента «close_photo» задаются действия для обработки нажатия кнопки мыши. Нажатие будет скрывать контейнер с изображением, а кнопку для показа контейнера будет делать видимой.

Для перемещения между этажами будут реализованы отдельные кнопки лифта и лестницы (рис. 13).

Рис. 13. Элементы в редакторе шаблона

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

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

Рассмотрим метод реализации карты виртуального тура. За основу карты будут взяты составленные ранее схемы точек съёмки, но уже без обозначенных точек. В редакторе шаблона (рис. 15) создадим маркер узла (Node Marker), который будет иметь два состояния (активный и неактивный). Для их отображения будут использоваться два изображения в формате png.

В настройках маркера узла в одноимённой группе в свойствах «Дублировать как обычный» (Clone as Normal) и «Дублировать как активный» (Clone as Active) выбираем созданные нами элементы «inactive», «active» соответственно.

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

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

Рис. 14. Активная зона лифта и окно с выбором этажа

®| С Marker \384,103

®| active ✓ 24.41% ДО. 54%

ф) 1 ® inactive ✓7.53%, 20.05%

®1 ® markertemplate ✓82.35% ДО. 53%

Рис. 15. Элементы в редакторе шаблона

Теперь в том же редакторе шаблона реализуется панель управления (рис. 17). Используется тот же метод реализации, что и у кнопок с информацией, но с иными операциями в сценариях.

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

Последним созданным элементом станет индикатор загрузки. Создадим окно с размерами 200 х 50 пикселей. Это будет основой поля. На нём расположится ещё один прямоугольник в виде узкой полосы. Он будет изменять свои размеры во время загрузки. Текстовое поле будет отображать состояние загрузки в процентах.

1 !f

Четвертый этаж

Третий этаж

Второй этаж

Первый этаж

Цокольный этаж

Рис. 16. Карта виртуальной экскурсии

Рис. 17. Панель управления

Поле загрузки будет располагаться в центре окна просмотра (рис. 18). Чтобы его положение относительно центра окна при изменении размеров браузера или области просмотра оставалось неизменным, параметр Anchor установлен в центральный сегмент.

2 <Ь>Загружено $р%</Ь

1

»; ^ -1? ; г»*«пе>

Рюцж ит»: 5 nr¥,ctnefl т ^

высот«- *) w ****tnd> *

Vnm М1

СЬфнйЛь: "С 1(

«а«-£j ¡..«О ;

Фол: Вынмл: V

Рис. 18. Свойства элемента поля загрузки

Для прямоугольника, отображающего ход загрузки, добавляется модификатор, обрабатывающий событие Loading. Целью модификатора будет Scale X (масштаб по

X) - изменение масштабирования прямоугольника по оси X от нуля до его фактических размеров. Значения параметров объекта (Factor и Offset) оставим как есть. Событие Loaded (изображения готовы) сигнализирует о завершении загрузки, поэтому в нём будет выполняться действие на скрытие самого себя. Событие Reload (перед изменением узла) сигнализирует о начале загрузки. Здесь будет выполняться действие на отображение самого себя. В разделе «Экспорт» можно начать сборку виртуальной экскурсии. Сразу после этого можно открыть HTML-документ или здесь же нажать «Открыть Экспорт» (рис. 19).

Рис. 19. Открытый файл экспорта

В результате экспорта мы создали html-файл, который в дальнейшем можно использовать для размещения экскурсии на сайте.

В качестве среды для размещения экскурсии на сайте было решено использовать Visual Studio Code. В папке с файлами сайта помещаем наш html-файл c экскурсией (pano.html) и файлы, которые так же были получены после экспорта (pano.xml, pano2vr_player.js, skin.js). Файл страницы сайта добавляем тег <iframe>, с помощью которого встраиваем виртуальную экскурсию на сайте. Внутри тега ссылаемся на pano.html (рис. 20).

<section class="iframe">

<iframe class="iframe2" src="pano.html"> </iframe> </section>

Рис. 20. Тег <iframe>

3. Заключение

Таким образом, разработанная экскурсия предоставляет возможность использования данной разработки в целях дистанционного ознакомления с четвёртым корпусом Нижневартовского государственного университета. Виртуальная экскурсия будет добавлена на сайт НВГУ в 2023 году и станет доступна для просмотра студентам, преподавателям, абитуриентам и другим пользователям сайта.

Литература

1. Виртуальная экскурсия по Третьяковской галерее в Москве. URL: https: //artsandculture.google.com/partner/the- state-tretyakov-gallery (дата обращения: 20.03.2023).

2. Виртуальные туры и панорамы. URL: http://1panorama.ru/ (дата обращения: 20.03.2023).

3. Виртуальные экскурсии. URL: http://mirznanii.com/a/226005/ virtualnye-ekskursii (дата обращения: 20.03.2023).

4. Виртуальные экскурсии по музеям России. URL: http://journal-shkolniku.ru/ virtual-ekskursii (дата обращения: 20.03.2023).

5. Возможности использования виртуальной экскурсии для адаптации студентов вуза. URL: https://elibrary.ru/item.asp?id=28313607 (дата обращения: 20.03.2023).

6. Дикань П.О., Манюкова Н.В. Анализ языков программирования для разработки вебсайтов // Инновационные процессы в науке и технике XXI века : материалы Международной научно-практической конференции. Тюмень. 2021. С. 88-92.

7. Пащенко А.И. Анализ программ для создания панорамных фотографий // Инновационные процессы в науке и экономике. Материалы Международной научно-практической конференции. Тюмень, 2022. С. 132-137.

8. Пащенко А.И., Манюкова Н.В. Основы создания панорам для реализации виртуальной экскурсии // Современное программирование : материалы III Международной научно-практической конференции. Нижневартовск. 2021. С. 125-131.

9. Пащенко А.И., Манюкова Н.В. Разработка виртуальной экскурсии // Инновационные процессы в науке и технике XXI века. Материалы XIX Международной научно-практической конференции. Тюмень. 2021. С. 251-256.

10. Юленков С.Е., Котельникова С.В., Касаткин А.С. Возможности использования виртуальной экскурсии для адаптации студентов вуза. URL: https://elibrary.ru/item. asp?id=28313607 (дата обращения: 20.03.2023).

DESIGN AND DEVELOPMENT OF A VIRTUAL TOUR OF NIZHNEVARTOVSK

STATE UNIVERSITY

A.I. Pashchenko

undergraduate, e-mail: arty.pashenko@mail.ru N.V. Manyukova Ph.D. (Ped.), Associate Professor, e-mail: manukovanv@mail.ru

Nizhnevartovsk State University, Nizhnevartovsk, Russia

Abstract. The article is devoted to the design and development of a virtual tour of the fourth building of the Nizhnevartovsk State University. A virtual tour is a combination of panoramic photographs, when the transition from one panorama to another is carried out through active zones. Such excursions allow absolutely everyone to remotely move around any location using computer technology. The paper describes the requirements for creating a high-quality panorama. The results of the study are presented as finished panoramas and a realized virtual tour.

Keywords: panorama, panorama design, virtual tour, virtual tour design, Pano2VR.

Дата поступления в редакцию: 22.03.2023

i Надоели баннеры? Вы всегда можете отключить рекламу.