Configuración de Unreal Engine Pixel Streaming: guía para llevar el proyecto al navegador

Unreal Engine Pixel Streaming puede transmitir imagen y sonido de una aplicación empaquetada de Unreal Engine a un navegador web y enviar también las entradas del usuario a la aplicación. Las guías oficiales de Epic Games explican paso a paso cómo configurar el sistema en una red local y utilizarlo desde computadoras y dispositivos móviles. Esta guía se centra principalmente en abrir en los navegadores de la misma red una aplicación que se ejecuta en una sola computadora.

¿Qué aprenderás en esta guía?

Una vez completada la configuración, un proyecto de Unreal Engine puede ejecutarse en una computadora y otros dispositivos pueden conectarse a la aplicación desde el navegador. La imagen y el sonido se transmiten al dispositivo remoto; la página predeterminada del reproductor admite la transmisión de entradas de teclado, ratón y pantalla táctil. Así, no es necesario instalar la aplicación por separado en cada dispositivo para una presentación arquitectónica, la revisión interactiva de una escena o una demostración del proyecto.

Este método no equivale a trasladar la aplicación a la nube: la guía oficial para comenzar recomienda probar primero en una red local o mediante una VPN. Por eso, conviene seguir estos pasos primero con una computadora y clientes conectados a la misma red. El acceso a través de Internet o desde distintas subredes puede requerir una configuración de red adicional.

Requisitos y preparación

El plugin Pixel Streaming puede funcionar en Windows, Linux o Mac para codificar vídeo y con determinado hardware de GPU. La fuente remite al documento Pixel Streaming Reference para consultar los detalles de las GPU compatibles, por lo que conviene comprobar la compatibilidad del hardware antes de la instalación. La guía no exige una versión específica de Unreal Engine. Aunque se indica 5.7 como ejemplo del nombre de una rama para la infraestructura del servidor, no se presenta como requisito de versión para todos los proyectos.

Los pasos de empaquetado del ejemplo de la guía de inicio son para Windows. Para la comunicación en una red local, deben estar abiertos los puertos 80 y 8888 y, durante la configuración, se deben detener los demás servidores web que se ejecuten en la computadora. Para probar en la misma computadora, se puede usar localhost o 127.0.0.1. Para conectarse desde otros dispositivos, se necesita la dirección IP de red de la computadora donde se ejecutan la aplicación y el Signalling Server. Las fuentes no indican que se necesite una cuenta de pago.

Pasos de instalación y conexión

1. Activa el plugin. Abre el proyecto en Unreal Editor, ve a Edit > Plugins y activa el plugin Pixel Streaming o Pixel Streaming 2, dentro de la categoría Graphics. Reinicia el proyecto para aplicar el cambio.

2. Configura la dirección de inicio. En Edit > Editor Preferences..., busca la categoría Level Editor > Play. Añade la dirección de conexión local en el campo Additional Launch Parameters:

-PixelStreamingURL=ws://127.0.0.1:8888

Si se desea usar controles táctiles desde un teléfono o una tableta en proyectos con personajes, se puede activar Always Show Touch Interface en la categoría Engine > Input de Edit > Project Settings. Esta configuración es opcional y depende de que el componente Player Controller del proyecto admita entradas táctiles.

1. Empaqueta el proyecto. En el ejemplo para Windows de la fuente, la aplicación se empaqueta seleccionando Files > Package Project > Windows (64-bit). El plugin se puede usar con una aplicación empaquetada o con un proyecto ejecutado desde Unreal Editor mediante la opción Standalone Game; ejecutarlo en la vista normal del editor no sustituye a estas opciones indicadas en la guía. Pasa el mismo parámetro de conexión cada vez que inicies la aplicación empaquetada.

2. Obtén la infraestructura de Pixel Streaming. Los componentes del servidor web y la interfaz están en un repositorio independiente llamado Pixel Streaming Infrastructure. La guía de Epic presenta dos opciones: obtener esta infraestructura desde el repositorio de Git o ejecutar el comando get_ps_servers incluido en la instalación de Unreal Engine. Quienes opten por clonar el repositorio pueden usar el formato de rama de ejemplo que aparece en la fuente:

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

El valor UEX.Y debe sustituirse por el nombre de la rama elegida; la guía muestra la rama 5.7 como ejemplo. En Windows, para preparar el servidor se ejecuta SignallingWebServer\platform_scripts\cmd\setup.bat y, para iniciarlo, SignallingWebServer\platform_scripts\cmd\start_with_stun.bat. Para Linux y Mac, la guía indica que se realiza el mismo proceso con los scripts de SignallingWebServer\platform_scripts\bash.

1. Conecta la aplicación al servidor. Con el Signalling Server en ejecución, abre la aplicación empaquetada con el parámetro definido en el paso anterior. El mensaje Streamer connected en la ventana del servidor indica que la aplicación se ha conectado.

2. Accede desde el navegador. En la misma computadora, abre un navegador compatible y ve a http://127.0.0.1; inicia la conexión y, después, la reproducción en la página. Para conectarte desde otra computadora o dispositivo móvil de la red, sustituye 127.0.0.1 por la dirección IP de la computadora que transmite. La página predeterminada transmite entradas de teclado, ratón y pantalla táctil; los dispositivos conectados ven la misma escena y, de forma predeterminada, envían entradas compartidas a la aplicación.

Problemas frecuentes y próximos pasos

Si no se establece la conexión, comprueba primero que la aplicación se esté ejecutando empaquetada o como Standalone Game, que el plugin esté activado y que el parámetro de inicio se haya añadido correctamente. Después, verifica que los puertos 80 y 8888 estén abiertos para la comunicación y que ningún otro servidor web los esté utilizando. En el navegador, 127.0.0.1 apunta únicamente a la misma computadora; desde otro dispositivo, se debe usar la dirección IP de la computadora que transmite.

La transmisión de entradas puede detenerse si la ventana de la aplicación se minimiza por error. Para evitarlo, la guía también ofrece la opción de añadir -RenderOffScreen a los parámetros de inicio de la aplicación. Si se prevé el acceso desde varias redes o por Internet, puede hacer falta una configuración de red más avanzada; para conexiones desde distintas redes, pueden ser necesarios los ajustes STUN/TURN del Signalling Server. También se puede personalizar la página del reproductor: es posible consultar la documentación oficial de personalización para añadir una interfaz HTML5 y definir qué clientes pueden enviar entradas.

Impacto en los flujos de trabajo de arquitectura, interiorismo y archviz

Pixel Streaming puede ser útil para los equipos de arquitectura y visualización que quieran compartir una presentación interactiva de Unreal Engine a través del navegador. La imagen se transmite desde la aplicación remota, por lo que los clientes no necesitan instalarla por separado. Sin embargo, es necesario comprobar de antemano la compatibilidad del sistema operativo y la GPU de la computadora que ejecuta la escena, así como la conexión de red y la configuración de los puertos. La fuente también señala que hay que ajustar distintos parámetros para equilibrar calidad, latencia y estabilidad, por lo que es importante probar en las condiciones reales de la presentación. El uso a mayor escala o a través de Internet puede requerir una configuración de red y del servidor distinta de la instalación básica en una red local.

Fuentes y licencia

Esta guía se ha adaptado al turco a partir de los pasos incluidos en los documentos oficiales de Epic Games “Pixel Streaming in Unreal Engine” y “Getting Started with Pixel Streaming in Unreal Engine”. Las fuentes aparecen indicadas como de licencia libre, pero los textos proporcionados no especifican el nombre concreto de la licencia.