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.

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Wunder Interactive es una empresa cofundada por Alex Saint-Louis, enfocada en llevar motores de juegos nativos al navegador. Su misión es habilitar aplicaciones y juegos 3D en tiempo real en plataformas cruzadas, permitiendo a los desarrolladores distribuir sus aplicaciones directamente en línea sin tener que pagar tarifas del 30% a tiendas de aplicaciones.

La visión de Wunder Interactive es crear la plataforma más abierta en la web, donde los desarrolladores puedan distribuir libremente sus juegos y aplicaciones 3D en tiempo real, sin estar limitados por jardines amurallados que demandan comisiones y tienen reglas restrictivas.

Wunder Interactive está trabajando con tecnologías como WebAssembly, WebGL y WebGPU para optimizar la experiencia de los juegos 3D en navegadores, y está en proceso de integrar Unreal Engine 5 y WebXR para experiencias VR.

Wunder Interactive ha implementado mejores técnicas de compresión y un sistema de archivos de activos que carga dinámicamente solo los activos necesarios en cada momento, lo que reduce significativamente los tamaños de los archivos y mejora los tiempos de carga.

WebGPU es una API de gráficos moderna que permite un mayor aprovechamiento del hardware moderno para gráficos 3D. Es importante para los juegos en navegador porque puede ofrecer una calidad de gráficos similar a la de las consolas, mejorando significativamente la fidelidad y el rendimiento de los juegos en línea.

Wunder Interactive planea expandir su soporte a otros motores de juego como Unity y Godot, y está trabajando en integrar soporte de WebXR para permitir aplicaciones VR multiplataforma, con el objetivo de crear un metaverso accesible y abierto.

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
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
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
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
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
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

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.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.