Настройка Unreal Engine Pixel Streaming: перенос проекта в браузер

Unreal Engine Pixel Streaming передаёт изображение и звук из упакованного приложения Unreal Engine в веб-браузер, а также может отправлять пользовательский ввод в приложение. В официальных руководствах Epic Games пошагово объясняется, как настроить систему в локальной сети и пользоваться ею с компьютеров и мобильных устройств. Ниже описан способ открыть приложение, запущенное на одном компьютере, в браузерах устройств той же сети.

Чему вы научитесь в этом руководстве?

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

Этот способ не равнозначен переносу приложения в облако: в официальном руководстве для начала рекомендуется тестирование в локальной сети или через VPN. Поэтому сначала настройте подключение для одного компьютера и клиентов в той же сети. Для доступа через интернет или из других подсетей может потребоваться дополнительная настройка сети.

Требования и подготовка

Плагин Pixel Streaming поддерживает видеокодирование в Windows, Linux или Mac при наличии определённого GPU-оборудования. Для подробностей о совместимых GPU источник отсылает к документу Pixel Streaming Reference, поэтому совместимость оборудования следует проверить до установки. В руководстве не указана обязательная версия Unreal Engine. В качестве примера имени ветки для серверной инфраструктуры приводится 5.7, однако это не обозначено как требование к версии для всех проектов.

Примеры упаковки из руководства по началу работы предназначены для Windows. Для обмена данными в локальной сети должны быть открыты порты 80 и 8888, а другие веб-серверы, работающие на компьютере, на время установки следует остановить. Для тестирования на том же компьютере можно использовать localhost или 127.0.0.1. Чтобы подключиться с других устройств, потребуется IP-адрес компьютера, на котором запущены приложение и Signalling Server. В источниках не указано требование к платной учётной записи.

Установка и подключение

1. Включите плагин. Откройте проект в Unreal Editor, перейдите в Edit > Plugins и включите плагин Pixel Streaming или Pixel Streaming 2 в категории Graphics. Перезапустите проект, чтобы применить изменения.

2. Настройте адрес запуска. В разделе Edit > Editor Preferences... найдите категорию Level Editor > Play. В поле Additional Launch Parameters добавьте адрес локального подключения:

-PixelStreamingURL=ws://127.0.0.1:8888

Если проект содержит персонажа и для сенсорного управления с телефона или планшета нужен сенсорный интерфейс, его можно включить в категории Engine > Input раздела Edit > Project Settings, активировав Always Show Touch Interface. Этот параметр необязателен и зависит от того, поддерживает ли компонент Player Controller проекта сенсорный ввод.

1. Упакуйте проект. В примере для Windows из источника приложение упаковывается через Files > Package Project > Windows (64-bit). Плагин можно использовать с упакованным приложением или проектом, запущенным из Unreal Editor с параметром Standalone Game; обычный запуск в редакторе не заменяет эти варианты, указанные в руководстве. При каждом запуске упакованного приложения передавайте тот же параметр подключения.

2. Получите инфраструктуру Pixel Streaming. Компоненты веб-сервера и интерфейса находятся в отдельном репозитории Pixel Streaming Infrastructure. В руководстве Epic перечислены два варианта получения инфраструктуры: клонировать Git-репозиторий или запустить команду get_ps_servers из установки Unreal Engine. Для клонирования репозитория можно использовать формат имени ветки, приведённый в источнике в качестве примера:

git clone --branch UEX.Y https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git

Замените UEX.Y названием выбранной ветки; в руководстве в качестве примера указана ветка 5.7. Чтобы подготовить сервер в Windows, запустите SignallingWebServer\platform_scripts\cmd\setup.bat, а для запуска — SignallingWebServer\platform_scripts\cmd\start_with_stun.bat. Для Linux и Mac в руководстве предлагается использовать скрипты из каталога SignallingWebServer\platform_scripts\bash.

1. Подключите приложение к серверу. Когда Signalling Server запущен, откройте упакованное приложение с параметром, заданным на предыдущем шаге. Сообщение Streamer connected в окне сервера означает, что приложение подключилось к серверу.

2. Откройте приложение в браузере. На том же компьютере запустите поддерживаемый браузер и перейдите по адресу http://127.0.0.1; на странице установите соединение, а затем запустите воспроизведение. Для подключения с другого компьютера или мобильного устройства в сети вместо 127.0.0.1 укажите IP-адрес компьютера, который выполняет трансляцию. Стандартная страница передаёт ввод с клавиатуры, мыши и сенсорного экрана; подключённые устройства видят одну и ту же сцену и по умолчанию совместно отправляют ввод в приложение.

Распространённые проблемы и дальнейшие шаги

Если подключение не устанавливается, сначала проверьте, что приложение запущено в упакованном виде или с параметром Standalone Game, плагин включён, а параметр запуска добавлен правильно. Затем убедитесь, что порты 80 и 8888 доступны для соединений и что их не занимает другой веб-сервер. В браузере 127.0.0.1 указывает только на тот же компьютер; на другом устройстве нужно использовать IP-адрес компьютера, который ведёт трансляцию.

Если окно приложения случайно свёрнуто, поток ввода может остановиться. Чтобы избежать этого, руководство также предлагает добавить -RenderOffScreen к параметрам запуска приложения. Для доступа через несколько сетей или интернет может понадобиться более сложная настройка; при подключении из разных сетей могут потребоваться параметры STUN/TURN для Signalling Server. Страницу плеера можно настроить: для добавления интерфейса HTML5 и определения, каким клиентам разрешено отправлять ввод, можно воспользоваться официальной документацией по настройке.

Влияние на рабочие процессы архитектуры, интерьеров и archviz

Pixel Streaming может пригодиться архитектурным и визуализаторским командам, которые хотят показывать интерактивную презентацию на Unreal Engine через браузер. Изображение передаётся из удалённого приложения, поэтому клиентам не требуется устанавливать его отдельно. При этом совместимость операционной системы и GPU компьютера, на котором запускается сцена, а также сетевое подключение и настройки портов необходимо проверить заранее. Источник также отмечает, что настройки предполагают компромисс между качеством, задержкой и стабильностью, поэтому важно проводить тестирование в условиях, близких к реальной презентации. Для более масштабного использования или доступа через интернет потребуется иная настройка сети и сервера, чем для базовой установки в локальной сети.

Источник и лицензия

Это руководство адаптировано на турецкий язык на основе шагов из официальных документов Epic Games «Pixel Streaming in Unreal Engine» и «Getting Started with Pixel Streaming in Unreal Engine». Источники помечены как распространяемые по свободной лицензии, однако в предоставленных текстах её конкретное название не указано.