¿Qué estás buscando?
Engine & platform

Ya están aquí las actualizaciones del tiempo de ejecución de la web: Lleve su navegador al siguiente nivel

BEN CRAVEN, MATTHEW BUSCEMI, ANTHONY BOWKER / UNITY TECHNOLOGIESContributor
Nov 30, 2023|15 minutos
Ya están aquí las actualizaciones del tiempo de ejecución de la web: Lleve su navegador al siguiente nivel
Para tu comodidad, tradujimos esta página mediante traducción automática. No podemos garantizar la precisión ni la confiabilidad del contenido traducido. Si tienes alguna duda sobre la precisión del contenido traducido, consulta la versión oficial en inglés de la página web.

En Unite 2023 presentamos nuestras últimas ofertas de tiempo de ejecución web. Esto incluyó más detalles sobre la esperada compatibilidad con navegadores móviles, un primer vistazo a lo que la WebGPU puede hacer por los gráficos avanzados y el renderizado en los navegadores de escritorio, y un emocionante anuncio con nuestros socios de Meta para llevar los títulos de Unity a la plataforma Instant Games en Facebook y Messenger. Siga leyendo para conocer a fondo lo que le espera en su próximo proyecto basado en la web.

Para empezar: Juegos en Internet

Unity tiene una larga historia con los tiempos de ejecución web. En 2006, el reproductor web Unity debutó como complemento para navegadores web. Con la llegada de HTML5, los navegadores empezaron a eliminar la compatibilidad con plug-ins, y el reproductor web de Unity quedó obsoleto en 2015. A continuación, adoptamos WebGL para ejecutar juegos directamente en el navegador con asm.js. Unity estuvo presente al principio del proceso de diseño de WebAssembly (WASM), y desde entonces hemos evolucionado junto a WASM. Esto lleva el rendimiento casi nativo del motor Unity a la web. En 2018.2, nuestra solución WebAssembly sustituyó a asm.js por defecto.

Hace tiempo que no sabes nada de nosotros, pero creemos que estamos en un punto de inflexión para los contenidos de Unity en la web.

Además de nuestros avances tecnológicos, hemos actualizado la nomenclatura de la plataforma. WebGL se conoce ahora como Unity Web para separar la tecnología WebGL de la plataforma web de Unity. También queremos prepararnos para un futuro con más de una norma de extracción de grasas. Eventualmente podrás crear una compilación usando WebGL, una con WebGPU, o una sola compilación con ambas.

Las ventajas del juego en plataformas web

Ofrecer contenidos de este modo permite a los jugadores acceder instantáneamente a una experiencia con sólo pulsar un enlace -o escanear un código QR- sin necesidad de instalar nada en sus dispositivos. Además, cuando llevas tus contenidos al entorno seguro de los navegadores, tienes una conexión directa entre tú y tus jugadores, sin que otra tienda online se interponga.

Web no tiene un paso de instalación como otras plataformas, lo que promete una baja fricción y un compromiso instantáneo. Sin embargo, esto significa que los usuarios tienen que descargar el tiempo de ejecución y los activos de inicio en la primera carga. Esto significa que para nosotros, para usted y para todos los usuarios finales, el tiempo de carga lo es todo. Se está trabajando mucho para reducir los tiempos de carga, de lo que te hablaremos más adelante.

Contenidos para la web

La profundidad y amplitud del motor ofrece a los desarrolladores la posibilidad de manejar simulaciones y elementos interactivos más complejos en comparación con otras tecnologías web. Dicho esto, dado que los usuarios descargan por adelantado el tiempo de ejecución y los activos iniciales, en el contexto de la web casi siempre es mejor que sea más pequeño, al menos por ahora.

Teniendo en cuenta estas ventajas y desventajas, no cabe duda de que algunos tipos de juegos funcionan mejor en la web que otros, como los juegos casuales e hipercasuales, con sus pequeñas sesiones de juego y sus mecánicas fáciles de entender.

Además, puedes sacar provecho de la naturaleza de baja fricción de la web tomando una pequeña parte de un juego más grande, por ejemplo, tu nivel tutorial, y haciendo su propia construcción web separada del resto del juego y disponible para todo el mundo. Esto permite una primera experiencia de juego sin fricciones, sin necesidad de instalar nada en sus dispositivos, y te da la oportunidad de convertir al jugador a la aplicación nativa completa una vez que se haya familiarizado con la mecánica.

NASA y Artemis I

El sitio web de la órbita en tiempo real de Artemis (AROW) es un rastreador interactivo en tiempo real de la misión Artemis I, lanzado el pasado noviembre y construido con Unity.

En la mitología, Artemisa es la hermana gemela de Apolo, por lo que la NASA bautizó con el nombre de la figura griega la serie de misiones que marca su regreso a la superficie lunar.

Los aficionados al espacio de todo el mundo pudieron seguir la posición de la cápsula Orion en órbita y ver su eventual amerizaje en el Océano Pacífico desde sus navegadores. La NASA tiene previsto utilizar esta herramienta en todas las futuras misiones Artemis y ampliarla para que pueda seguir no sólo a la cápsula Orión, sino a todos los componentes de la misión.

AROW fue creado por un becario, Seth Lambert, que desde entonces se ha convertido en miembro a tiempo completo del equipo de comunicaciones de la NASA.

Soporte para navegadores móviles en Unity 6

En Unite, nos sentimos orgullosos de anunciar que la compatibilidad con navegadores Android e iOS llegará a Unity 6. Pronto podrás ejecutar tus juegos Unity en cualquier lugar de la web, incluso en los propios navegadores de iOS o Android. También podrás incrustar tus juegos en una vista web en una app nativa o utilizar nuestra plantilla de app web progresiva para que tu juego se comporte más como una app nativa, con su propio acceso directo y funcionalidad offline. Estamos seguros de que si usted ha estado apuntando a Unity Web en móviles, es probable que haya tenido éxito con los dispositivos móviles de gama alta lanzados en los últimos dos o tres años, pero sus resultados pueden haber variado en función de su contenido. Cuando lancemos Unity 6, tendremos una orientación más clara sobre los requisitos mínimos de hardware para Unity Web en móviles.

Aquí puede ver nuestro reciente proyecto de muestra 2D Cosecha feliz ejecutándose en Safari en un iPhone 15 Pro.

Proyecto de ejemplo Unity 2D Happy Harvest ejecutándose en el navegador web móvil Safari en Apple iPhone 15 Pro.
Justo a tiempo

Safari ha empezado a soportar WebGL2, permitiendo que Unity Web funcione tanto en dispositivos iOS como Android. Hemos asistido a continuos avances tanto en velocidad y fiabilidad de las redes móviles como en potencia de CPU y GPU. Con un público moderno ávido de experiencias instantáneas con muy poca fricción, creemos que los jugadores están ahora preparados para contenidos interactivos breves.

Alianza estratégica Unity x Meta para Instant Games

Como se anunció en la Keynote de Unite, Unity se ha asociado con Meta para crear soporte para su plataforma Instant Games. Al desbloquear este ecosistema para los creadores, los jugadores podrán encontrar y jugar al instante en Facebook y dentro de las conversaciones de Messenger. Con una audiencia de cientos de millones de jugadores, se trata de una oportunidad fantástica para ampliar el alcance de sus contenidos a un público totalmente nuevo.

"La estrecha colaboración entre Meta y Unity ya ha producido algunos resultados prometedores en términos de mejora del rendimiento de los juegos HTML5 creados con Unity", señala Andrew Mo, jefe de producto de Facebook Gaming en Meta. "Estamos entusiasmados de continuar con este impulso en el próximo año y esperamos facilitar a los desarrolladores de juegos llevar su contenido a Facebook y Messenger."

Y añadió: "Creemos que hay mucho potencial en hacer que los juegos sean accesibles al instante, especialmente cuando están diseñados para jugar con tus amigos y tu comunidad. Y estamos encantados de asociarnos con Unity para liberar ese potencial en nuestra plataforma."

"Hay mucho potencial en hacer que los juegos sean accesibles al instante, especialmente cuando están diseñados para ser jugados con tus amigos y tu comunidad [...] estamos entusiasmados de asociarnos con Unity para liberar ese potencial en nuestra plataforma." - Andrew Mo, jefe de producto de Facebook Gaming, Meta

El equipo de la plataforma web Unity está trabajando en varias cosas para facilitar esta asociación, incluido un objetivo de compilación dedicado para que puedas probar, optimizar y publicar juegos en un flujo racionalizado adaptado a Instant Games. Habrá un SDK de C# para interactuar con las API de juego instantáneo y multitud de nuevas optimizaciones de la red para garantizar que los jugadores puedan entrar en las partidas en cuestión de segundos.

También estamos colaborando con estudios de videojuegos para validar estas nuevas herramientas. ¡Entre los socios de lanzamiento se encuentra Coatsink, que tiene algunos juegos en las plataformas de Meta, como Ready, Set, Cook! Poco después de que Coatsink firmara como socio de lanzamiento, el equipo de Unity aplicó algunas de las primeras optimizaciones a este juego, y los resultados fueron muy prometedores.

Arte clave para Ready, Set, Cook! de Coatsink

Con sólo una reducción del 25% en el tiempo de carga, las sesiones activas aumentaron un 50% y el porcentaje de clics pasó del 35% al 58%. Esto significa que al principio de este trabajo de optimización, Ready, Set, Cook! pasó de que la mayoría de los jugadores nunca vieran una partida a que la mayoría se metiera en una partida con sus amigos. Esto es sólo la punta del iceberg de nuestra optimización, pero puede ver cómo reducciones relativamente pequeñas en el tiempo de carga pueden suponer una gran diferencia en el compromiso.

Este gráfico muestra una comparación entre la compilación original proporcionada por Coatsink y la versión optimizada con nuestras últimas herramientas Instant Games-ready aplicadas. Como puede ver, ya hemos reducido el tiempo de interactividad de ¡Listos, listos, a cocinar! en más de un 50%. Esta prueba en particular se ejecutó en un Pixel 5 acelerado a 48 Mbps.

Gráfico de barras que muestra la diferencia de tiempo de carga -en segundos- entre la versión original y la optimizada de ¡Listos, listos, a cocinar! Para 48 Mbps (de 12 a 5,5), 86 Mbps (de 8,2 a 3,7) y 176 Mbsp (de 6,1 a 3,6)

En el gráfico anterior, puede ver cuáles eran los tiempos de carga antes de la optimización y en qué punto nos encontramos actualmente utilizando ¡Listos, listos, a cocinar! como título de prueba. En primer lugar, estrangulada a 48 Mbps: esta es la velocidad media mundial de la red móvil según Ookla, ni siquiera 5G. Con la velocidad media mundial de banda ancha, 86 Mbps, somos aún más rápidos. En una conexión 5G sólida a 176 Mbps, vimos velocidades aún más rápidas, pero también encontramos rendimientos decrecientes a medida que el ancho de banda de la red ya no es el principal factor limitante.

Cómo alcanzar velocidades de vértigo

Para conseguir tiempos de carga rápidos, es necesario tener en cuenta todos los aspectos de la descarga y la inicialización del juego en el navegador web.

Anatomía de una web

Una compilación web consta de varios archivos:

  • Archivo WebAssembly (.wasm): Este es el ejecutable binario que incluye el motor Unity y la lógica de tu juego.
  • Un archivo de recursos de gran tamaño (.data): Esto incluye metadatos globales y recursos de activos para las escenas incluidas en la compilación.
  • Puede haber paquetes de activos o Addressables.
  • Tu plantilla WebGL (HTML y CSS), y algunos archivos JavaScript de Unity Framework para ponerlo todo en marcha.
Buenas prácticas para el desarrollo de sitios web para móviles

Para empezar, hay algunas buenas prácticas iniciales que debes seguir para crear una buena compilación de lanzamiento, entre las que se incluyen:

  • Indicar al compilador y al enlazador que generen código de tamaño óptimo
  • Uso de la compresión Brotli
  • Añadir etiquetas HTTP de precarga a su plantilla web para cargar cualquier paquete de activos y Addressables necesarios para la primera escena por adelantado.

Haremos que estos sean los predeterminados en la próxima versión de Instant Games.

Además, considere cómo reducir el tiempo de carga percibido por sus jugadores mostrando una pantalla de bienvenida o una animación mientras el motor Unity se carga e inicializa.

Reducir los archivos de recursos

Dependiendo de su juego, los activos pueden ser más grandes o más pequeños que el WebAssembly.

En primer lugar, considere algunas de las mejores prácticas. Dado que el tiempo que se tarda en cargar esa primera escena es crítico, considere la posibilidad de utilizar el sistema Unity Addressables para dividir cada activo en una descarga independiente. A continuación, añada etiquetas de precarga HTTP para precargar los Addressables necesarios para la primera escena. Las escenas posteriores cargarán activos a petición del sistema Addressables.

Si tu juego utiliza mucho audio, asegúrate de utilizar audio comprimido y considera la posibilidad de forzarlo a mono y reducir la calidad del audio.

En segundo lugar, veamos la configuración gráfica utilizada. La elección de texturas comprimidas ETC Crunch ofrece los tamaños de descarga más pequeños y mantiene bajo el uso de memoria de GPU en dispositivos móviles. Si utilizas texturas comprimidas ASTC, fíjate bien en el tamaño de los bloques, eligiendo tamaños de bloque mayores para texturas más pequeñas. Del mismo modo, configure la eliminación de sombreadores en la configuración del reproductor de su proyecto.

WebAssembly de nueva generación

La tecnología WebAssembly no se detiene, y estamos llevando las actualizaciones a Unity. Estamos increíblemente agradecidos por el trabajo realizado en las Comunidades Web del W3C para apoyar estas tecnologías avanzadas. Los juegos web no son posibles sin la inversión y el apoyo de todos los desarrolladores de navegadores. Apreciamos especialmente nuestra colaboración con el equipo Chrome de Google. Juntos hemos trabajado en el refuerzo de los casos de uso de WebAssembly para juegos y en el rendimiento gráfico de cargas de trabajo de juegos complejas.

El compilador Emscripten lleva tu compilación il2cpp de Unity a WebAssembly. Con cada nueva versión de soporte a largo plazo (LTS), incluimos la última versión de Emscripten, lo que permite construcciones de desarrollo más rápidas y construcciones de lanzamiento más pequeñas y optimizadas (que pueden tardar un poco en construirse).

En Unity 6, podrás habilitar el soporte de memoria de 4GB. Esto permite disfrutar de mayores experiencias 3D en tiempo real en la web, aprovechando la mayor memoria de que disponen los navegadores de escritorio. En el futuro, esto allanará el camino para el soporte de memoria de 64 bits una vez que todos los navegadores liberen soporte para ello.

En la actualidad, cuando se habilita el soporte de excepciones para las compilaciones web, se produce cierta sobrecarga, como cuando se añade código a todas las funciones para soportar try/catch. Con el manejo de excepciones nativo de WebAssembly, que estará disponible como opción en Unity 6, las excepciones estarán disponibles con poca sobrecarga.

También en Unity 6, puedes habilitar el soporte SIMD de WebAssembly. Esto acelera los cálculos matemáticos de la CPU con instrucciones vectorizadas. Funciona tanto en dispositivos x64 como Arm, mapeando las instrucciones SIMD de WebAssembly a SSE o ARM NEON cuando se carga la página web. Las mejoras aquí varían según el dispositivo y el navegador, pero son notables.

Estas funciones son opcionales y sólo están disponibles en las versiones más recientes de los navegadores web.

De WebGL a WebGPU

La introducción de un nuevo backend WebGPU marca un hito importante para la aceleración de gráficos basada en web, allanando el camino para saltos sin precedentes en la fidelidad de renderizado de gráficos para juegos web Unity.

WebGPU se ha diseñado con el objetivo de aprovechar y exponer las modernas funciones de la GPU en la web. Esta nueva API web lo consigue proporcionando una moderna interfaz de aceleración de gráficos que se implementa internamente a través de API de GPU nativas como DirectX 12, Vulkan o Metal, en función del dispositivo de escritorio que utilices.

La WebGPU desbloqueará la compatibilidad con nuevas e interesantes funciones de renderizado, permitiendo un nivel de fidelidad gráfica nunca visto hasta ahora en la web de escritorio. Al igual que otras API gráficas modernas, el control de bajo nivel sobre la configuración del renderizado y la ejecución en la GPU abre nuevas oportunidades de optimización, lo que podría reducir la sobrecarga de la CPU y la GPU y mejorar el rendimiento y la latencia.

WebGPU también lleva por primera vez los sombreadores de cálculo a la web. GPU Compute Skinning mejora radicalmente el rendimiento del renderizado de personajes con malla skin. Ahora, las transformaciones de vértices se descargan en la GPU. La demostración anterior aprovecha las ventajas de GPU Skinning para engranar la piel de estos robots con el esqueleto subyacente, manteniendo al mismo tiempo una velocidad de fotogramas relativamente alta. Si esto se hiciera en la CPU, funcionaría a FPS de un solo dígito.

Demostración interactiva de skinning por ordenador con el personaje Adam en WebGPU

Otro ejemplo es el VFX Graph de Unity, que genera geometría de forma procedural directamente dentro de los sombreadores de cálculo. En la siguiente simulación de partículas, tenemos algo más de medio millón de partículas animándose, y todas ellas se mueven a través de sombreadores de cálculo en la GPU.

Demostración interactiva de VFX Graph con el logotipo de Google Chrome, el icono del cubo de Unity y el logotipo de WebGPU.

Es posible que hayas visto la demo de Ataque al Barco de arriba en el pasado. Ahora, puedes verlo funcionando completamente en WebGPU. WebGPU está habilitada desde hoy en Google Chrome y Microsoft Edge en macOS y Windows. En este último ejemplo, mostramos un Ataque al Barco interactivo, renderizado en WebGPU.

Captura de pantalla de la demo WebGPU Boat Attack

Durante el desarrollo del backend de Unity para WebGPU, los ingenieros gráficos de Unity han colaborado estrechamente con el equipo de Chrome para someter a WebGPU a pruebas de estrés con grandes escenas y sombreadores complejos, lo que ha rendido unos resultados fantásticos.

El backend gráfico WebGPU aún está en desarrollo y no recomendamos su uso para casos de producción. Sin embargo, ya está disponible en acceso anticipado. Encontrará más información sobre cómo empezar en el foro de gráficos.

Repasemos

La web es increíblemente poderosa por su potencial para el compromiso sin fricciones y una conexión directa con sus jugadores. Dado que descargan el WASM y los activos iniciales por adelantado, reducir el tiempo de carga es fundamental para los proyectos web. Por eso, los contenidos más pequeños suelen ser los más adecuados para la web.

A finales de 2024, crea y despliega tus juegos instantáneos en Facebook y Messenger para acceder a un público totalmente nuevo. Si quieres trabajar directamente con Unity y Meta para obtener acceso anticipado a herramientas y recursos para que tus Instant Games sean un éxito, o quieres mantenerte al día sobre esta nueva iniciativa de apoyo a la plataforma, registra tu interés hoy mismo.

La compatibilidad con la web móvil comienza en Unity 6. Más información sobre Unity 6 en la Keynote de Unite.

Si eres de los que les gusta trastear, lee nuestro post en el foro sobre WebGPU - que llegará en Unity 6 - para obtener información sobre el acceso anticipado al backend WebGPU. A continuación, descubre aún más sobre los últimos avances del motor en las sesiones a la carta de Unite 2023, que ya están disponibles, incluida la sesión de Unite "Consigue al instante que tu juego Unity llegue a más jugadores en la web" (incrustada a continuación).