Unreal Engine en WebAssembly/WebGPU

Rate this content
Bookmark

Tradicionalmente, los juegos de navegador no han sido tomados en serio. Si quieres dirigirte a la web, eso tradicionalmente ha significado comprometer tu visión como desarrollador de juegos. Nuestro equipo en Wonder Interactive está en una misión para cambiar eso, llevando uno de los motores de juegos nativos más importantes del mundo al navegador - Unreal Engine. En nuestra charla, nos adentraremos en nuestros esfuerzos por portar el motor al navegador y continuar con el pionero trabajo inacabado iniciado en Epic Games hace casi una década en colaboración con Mozilla. Profundizaremos en lo que esto significa para el futuro de los juegos en el navegador y el metaverso abierto en la web.

Alex St. Louis
Alex St. Louis
33 min
08 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Alex Saint-Louis, cofundador de Wunder Interactive, comparte la misión de llevar Unreal Engine al navegador, permitiendo aplicaciones y juegos 3D multiplataforma. Están trabajando en un back end de WebGPU para Unreal Engine para empujar los límites del 3D en la web. Wunder Interactive ha mejorado la compresión, ha construido su propio sistema de archivos de activos y ofrece potentes herramientas para los desarrolladores de juegos. Están utilizando tecnologías web modernas como WebAssembly, WebGL y WebGPU, y planean apoyar otros motores como Unity y Godot. El equipo tiene como objetivo transformar la industria trayendo juegos de calidad de consola al navegador y proporcionando una ruta de distribución alternativa. Están emocionados de llevar Unreal Engine 5 a la web con soporte de WebGPU y están trabajando en el soporte de WebXR para experiencias 3D multiplataforma, incluyendo VR.

1. Introducción a Unreal Engine en el navegador

Short description:

Alex Saint-Louis, cofundador y COO de Wunder Interactive, comparte la misión de llevar Unreal Engine al navegador. Su objetivo es habilitar aplicaciones y juegos 3D en tiempo real y multiplataforma, permitiendo a los desarrolladores distribuir directamente en línea sin pasar por tiendas. La pasión de Alex por los medios y los juegos comenzó con los juegos de navegador, y su fascinación por la intersección de cine y juegos le llevó a investigar sobre Unreal Engine. Junto con su cofundador Rob Stewart, creen en la creación de una plataforma abierta en la web para que los desarrolladores de juegos distribuyan libremente sus aplicaciones. Comenzaron Wonder Interactive después de darse cuenta de la oportunidad comercial presentada por WebAssembly y WebGL. Realizaron investigaciones sobre Unreal Engine en la web y descubrieron que Mozilla se asoció con Epic Games para llevarlo a la web.

♪♪ Bueno, hola y bienvenidos. Mi nombre es Alex Saint-Louis, soy el cofundador y director de operaciones de Wunder Interactive. Estoy encantado de hablarles hoy sobre Unreal Engine en el navegador.

Solo un poco de contexto sobre mi empresa. Estamos en una misión para llevar uno de los principales motores de juegos nativos al navegador, habilitando cross-platform, aplicaciones y juegos 3D en tiempo real, permitiendo a los desarrolladores enviar sus aplicaciones sin la necesidad de pasar por tiendas de jardín amurallado y pagar tarifas del 30% a las tiendas y distribuir directamente en línea a sus usuarios.

Entonces, un poco sobre mi formación. En realidad vengo del mundo del cine y la televisión. Tuve un agente durante un tiempo, hice algo de cine aquí en Canadá. La pasión de toda la vida por los medios, los juegos, me puso en el camino hacia la industria de los videojuegos. Creo que los juegos de navegador fueron los primeros juegos a los que tuve acceso en una computadora normal. La capacidad de hacer clic en un enlace y saltar instantáneamente fue como magia para mí. Club Penguin, RuneScape, esos fueron algunos de mis primeros juegos reales que recuerdo haber jugado de niño.

Y comencé a investigar sobre Unreal Engine hace unos años. Me metí mucho en ello, bastante fascinado por la intersección del cine y los juegos y hacia dónde va el 3D en tiempo real. Mi cofundador Rob Stewart, que no está presente para esta charla, tiene formación en ciencias de la computación, y ha estado trabajando con Unreal Engine durante varios años ahora.

Entonces, como mencioné, nuestra visión es crear la plataforma más abierta en la web, una plataforma de aplicaciones alternativa para los desarrolladores para distribuir libremente sus juegos en aplicaciones 3D en tiempo real en la web. Y deberías poder enviar un code base, un binario, y debería funcionar igual en todos los dispositivos. Esa es nuestra creencia. No deberías estar limitado por jardines amurallados que exigen un corte, tienen reglas y regulaciones en su lugar. Deberías poder alojar, implementar, monetizar en tus propios términos como desarrollador de juegos.

Entonces, cómo empezamos, uno de los primeros clientes de Rob con una de sus empresas de desarrollo de software estaba interesado en el soporte basado en web para su juego Unreal Engine. Yo estaba interesado en el soporte web. Alrededor del mismo tiempo, Rob y yo nos conectamos y nos dimos cuenta de la verdadera oportunidad comercial en torno a las nuevas tecnologías, WebAssembly y WebGL y cómo una vez más simplemente interrumpirían el método de distribución de juegos en línea. Y empezamos a trabajar juntos. Fundamos nuestra empresa, Wonder Interactive, recaudamos algo de financiación inicial. Y el año pasado comenzamos oficialmente.

Así que hicimos un poco de investigación sobre Unreal Engine en la web. Y resulta que desde Unreal Engine 3, Mozilla en realidad se asoció con Epic Games para llevar Unreal Engine a la web. Y como pueden ver aquí en este GIF, eso es una representación de lo que en realidad era un juego móvil llamado Epic Citadel. Así que algo así como gráficos al estilo de World of Warcraft.

2. Empujando los límites del 3D en la web

Short description:

Ahora, WebGL 2 se basa en OpenGL, que es una API antigua. Tiene décadas de antigüedad. Por lo tanto, WebGPU es claramente el futuro del 3D en la web, porque vas a obtener esa API de gráficos de calidad Vulkan que puede aprovechar al máximo el hardware moderno. Y esto es un salto cuántico de lo que puedes hacer hoy. Por lo tanto, actualmente estamos trabajando en un back end de WebGPU para nuestra plataforma para Unreal Engine.

Ahora, eso es aproximadamente OpenGL ES 3.1. Así que, sobre un juego móvil, un juego móvil de hace varios años. Eso estaba funcionando en el navegador y también en los teléfonos. Fue un esfuerzo y una colaboración entre Mozilla y Epic para ver hasta dónde se podía empujar la web y el 3D en la web.

Y esto se convirtió en un soporte robusto en Unreal Engine 4 con el lanzamiento. Una vez que salió la versión 4.23 del motor, el soporte de HTML5 fue oficialmente deprecado y eliminado. Solo había soporte WebGL1 presente en el motor en ese momento. No había optimización para el tamaño de los archivos. Así que tendrías estos binarios muy grandes que estarías solicitando al usuario descargar a través de la red.

Como saben en la web, como muchos de ustedes saben desarrollando juegos, un tiempo de inicio instantáneo, más bien, es crucial. El tiempo desde que tus usuarios hacen clic en un enlace hasta que saltan a la acción, tiene que ser lo más mínimo posible para tener éxito. Eso es lo que esperan los usuarios. De la misma manera que esperan que una página web 2D se cargue rápidamente y se llene de contenido, también esperan lo mismo para los juegos en la web. Cualquier tipo de contenido en la web, francamente. Y abajo hay una entrada de blog si quieres obtener más información sobre la historia del trabajo conjunto de Mozilla y Epic.

Como mencioné, recaudamos una pequeña ronda de financiación inicial el año pasado, comenzamos a completar el equipo. También nos acercamos a Epic Games y queríamos ver dónde estaban, para ver si estarían interesados en que nosotros recogiéramos la antorcha de donde dejaron lo que consideramos trabajo inacabado. ¿Hasta dónde hemos llegado? Hemos añadido soporte a las últimas versiones de Unreal Engine. Me complace decir que desde la 4.24 hasta la 4.27. Desde la 4.23, como mencioné, Epic eliminó públicamente el soporte y lo convirtió en una extensión de plataforma soportada por la comunidad. Pero realmente no se ha hecho nada con ello. Así que hemos construido soporte para los últimos lanzamientos del motor. Unreal Engine 5 está en proceso.

Ahora, WebGL 2 se basa en OpenGL, que es una API antigua. Tiene décadas de antigüedad. Y así, WebGPU es claramente el futuro del 3D en la web, porque vas a obtener esa API de gráficos de calidad Vulkan que puede aprovechar al máximo el hardware moderno. Y esto es un salto cuántico de lo que puedes hacer hoy. Así que actualmente estamos trabajando en un back end de WebGPU para nuestra plataforma para Unreal Engine. Algunas de las otras innovaciones son inicialmente, como mencioné con las versiones anteriores de soporte HTML5 en Unreal, tendrías que enviar un binario muy grande. No había división de código.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
Durante esta sesión, veremos un par de demostraciones de lo que puedes hacer usando WebXR, con Babylon.js. Desde experimentos de audio en VR, hasta juegos casuales en VR en una máquina de arcade hasta un uso más serio para crear nuevas formas de colaboración usando AR o VR, deberías tener una comprensión bastante buena de lo que puedes hacer hoy.
Consulta también el artículo para ver el contenido completo, incluyendo ejemplos de código: artículo. 
Creando juegos increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Creando juegos increíbles con LittleJS
LittleJS es un motor de juegos súper ligero que es fácil de usar y extremadamente rápido. El desarrollador hablará sobre por qué lo creó, qué hace y cómo puedes usarlo para crear tus propios juegos. La charla incluirá una demostración de cómo construir un pequeño juego desde cero con LittleJS.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la mirada de mi propio viaje de redescubrir mi pasión por la programación y construir un videojuego desde cero con JavaScript y React, exploraremos los compromisos entre soluciones fáciles y rendimiento rápido. Obtendrás información valiosa sobre prototipado rápido, infraestructura de pruebas y una variedad de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
WorkshopFree
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.