Detectar y evitar problemas comunes de rendimiento y memoria en compilaciones de Unity WebGL

Rate this content
Bookmark

Esta sesión explora problemas comunes de rendimiento y memoria que surgen en las compilaciones WebGL producidas con el motor de juego Unity. Examine cómo identificar, solucionar y evitar trampas que pueden llevar a errores de falta de memoria. Aprenda a reducir la inestabilidad del juego y mejorar el rendimiento del juego en las compilaciones WebGL.

Oz Syed
Oz Syed
10 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy se centra en evitar problemas de rendimiento y memoria en las compilaciones de Unity WebGL. Se destaca la importancia de administrar la memoria y mantener pequeño el tamaño del montón. Técnicas como el uso de paquetes de activos o un sistema direccionable pueden ayudar a reducir el uso de la memoria. Se discuten las limitaciones de la recolección de basura en las compilaciones WebGL, junto con consejos para optimizar el código de Unity. Herramientas como Backtrace pueden ayudar en la depuración de problemas de memoria y rendimiento.

Available in English

1. Introducción a las compilaciones de Unity WebGL

Short description:

Hoy, vamos a ver algunas de las formas en que podemos evitar problemas comunes de rendimiento y memoria que surgen en las compilaciones de Unity WebGL. La memoria es una restricción importante cuando se ejecuta una compilación de WebGL en un navegador. El montón de Unity es donde se almacenan todos los objetos en tiempo de ejecución, y es importante mantener el tamaño del montón lo más pequeño posible. Al construir una aplicación WebGL, Unity genera un archivo .data que contiene todos los activos y escenas requeridos. Para reducir el uso de memoria, puedes usar paquetes de activos o un sistema direccionable. La recolección de basura también es una consideración importante en las compilaciones de WebGL.

♪♪ Hola a todos. Mi nombre es Oz, y soy un evangelista de desarrollo de juegos en Backtrace Source Labs. Hoy, vamos a ver algunas de las formas en que podemos evitar problemas comunes de performance y memoria que surgen en las compilaciones de Unity WebGL. El primer punto que vamos a examinar es la gestión del performance. Y una restricción importante al ejecutar una compilación de WebGL en un navegador con buen performance es la memoria. Entonces, en términos de memoria, ¿cuáles son los problemas y cuáles son las consideraciones que debemos examinar?

Entonces, como sabes, la complejidad del contenido que puedes ejecutar está limitada por la memoria. La memoria es asignada por el navegador, y la cantidad de memoria que tiene disponible varía en función de varios factores, incluyendo el dispositivo que usas, el sistema operativo que usas, qué navegador usas, y si se ejecuta en un navegador de 32 bits o de 62 bits, y un par de otros factores. Entonces, para entender cómo la memoria impacta en el performance, es muy importante primero ver cómo se asigna la memoria en una compilación de Unity WebGL. Para esto, necesitamos echar un vistazo al montón de Unity. Entonces, ¿qué es el montón de Unity o un montón de memoria, como lo llama Unity? Básicamente, aquí es donde se almacenan todos los objetos en tiempo de ejecución, y estos podrían incluir objetos nativos, activos que se cargan, escenas, shaders, archivos de animation, así como otros objetos gestionados. Vale la pena mencionar que este montón es un bloque contiguo de memoria asignada. Hasta hace unos años, tenías que asignar el tamaño máximo del montón en la configuración de la compilación, pero ahora, Unity soporta la expansión del montón a demanda, dependiendo de las necesidades del juego, y es expandible hasta dos juegos. Sin embargo, la misma característica puede hacer que tu juego se bloquee, especialmente cuando el navegador falla al asignar un bloque contiguo de memoria, y es exactamente por eso que es muy importante mantener el tamaño del montón lo más pequeño posible.

Ahora, para entender cómo podemos mantener el tamaño del montón de memoria pequeño, primero tenemos que echar un vistazo a lo que Unity hace con todos los activos y los datos de la escena en un navegador, y qué sucede cuando construyes una aplicación WebGL en Unity. Entonces, cuando construyes una aplicación WebGL, lo que sucede es que Unity genera un archivo .data. Y esto es básicamente todos los activos y escenas en la aplicación que se requieren en el momento del lanzamiento, y todo eso se empaqueta en un archivo .data, incluyendo las escenas de Unity, texturas, modelos, precios de UI, activos de audio, shaders, y prácticamente todo lo demás que necesitas para que el juego funcione. Y básicamente Unity WebGL no tiene acceso a un sistema de archivos real, por lo que tiene que crear un sistema de archivos de memoria virtual, y el navegador luego desempaqueta el archivo .data en este sistema de archivos virtual particular. Y el navegador, mientras el juego está en ejecución, mantiene los data sin comprimir. Ahora imagina si tienes una escena compleja con todo tipo de activos, ¿verdad? Incluyendo modelos 3D, shaders, todo. Entonces puedes ver cómo posiblemente puede tener problemas de memoria y también ralentizar el rendimiento del juego. Entonces la pregunta que surge es, ¿qué puedes hacer para reducir la memoria? Bueno, hay algunas técnicas que puedes adoptar para reducir el uso de memoria. Y una forma, la más común, es usar paquetes de activos. Entonces podrías poner todos los activos más frecuentes, pero más grandes en un paquete de activos y cargarlo, descargarlo a demanda cuando quieras. También vale la pena mencionar que los paquetes de activos se descargan directamente en el montón de Unity y por lo tanto evitan la asignación extra realizada por un navegador. Si hay paquetes grandes, una técnica es posiblemente almacenar en caché los data y esto es básicamente una cosa adicional que te ayuda a evitar la descarga cada vez que realmente juegas el juego. Entonces el tercero es algo llamado sistema direccionable, que es una alternativa a los paquetes de activos. Y a veces se inicia como una versión mejor de los paquetes de activos. Sin embargo, tiene algunos de sus propios problemas, incluyendo el soporte de las compilaciones de WebGL de serie. Pero existen algunas soluciones para hacerlo funcionar. La próxima consideración importante con respecto a las compilaciones de WebGL es la recolección de basura o GC en resumen.

2. Gestión de Memoria y Depuración en Unity WebGL

Short description:

GC en Unity WebGL se ejecuta una vez después de cada fotograma debido a las limitaciones en JavaScript. Manipular cadenas puede causar problemas de rendimiento y de memoria. Ejemplos incluyen la actualización de un texto de temporizador de cuenta regresiva y el uso de enlarged para un bucle. Para optimizar el código de Unity, use StringBuilder para la manipulación de cadenas, cache las matrices antes de iterar y use CompareTag en lugar de comparar cadenas. Herramientas como Backtrace pueden ayudar a depurar problemas de memoria y rendimiento. Si tienes preguntas sobre WebGL o Unity, no dudes en ponerte en contacto.

Entonces, típicamente lo que hace GC es localizar y recoger la memoria no utilizada y luego reasignarla al montón de Unity. En otras plataformas, cuando se ejecuta GC, todos los hilos en ejecución se pausan para dar tiempo para que GC revise la pila. Esto no es posible en WebGL debido a las limitaciones en JavaScript. Entonces, lo que hace Unity aquí es simplemente ejecutarlo una vez después de cada fotograma porque la condición para que GC se ejecute en WebGL es que la pila tiene que estar vacía y esto solo sucede después de que se renderiza cada fotograma.

Ahora veremos algunos ejemplos de code que aumentan GC y reducen el performance y cómo podemos realmente escribir un mejor code. Entonces, en el primer ejemplo que tengo aquí, puedes ver cómo la manipulación de una cadena es una causa principal de problema de performance y a veces también puede causar que una aplicación se quede sin memoria. Y la razón principal por la que esto sucede es porque cualquier manipulación de cadena hace que Unity cree una nueva cadena cada vez y esto puede sumar rápidamente. Por ejemplo, si el code fuera parte del bucle de actualización. Este ejemplo que puedes ver aquí es donde tienes un temporizador de cuenta regresiva mostrando en un UI y el texto del temporizador de cuenta regresiva se está actualizando continuamente en el bucle de actualización al agregar el prefijo de cuenta regresiva con el valor de cuenta regresiva. Y cada vez que haces eso, está creando una nueva cadena que puede sumar rápidamente y no es bueno para la memoria. A la derecha, puedes ver cómo este code se está reescribiendo en un mejor code donde separamos la etiqueta y el valor y por lo tanto evitamos la manipulación de la cadena por completo. Aquí hay otro ejemplo de manipulación de cadena. Si se está utilizando enlarged para un bucle. Ya sabes, en una compilación no-WebGL, esto podría funcionar tan bien como podría ser porque el recolector de basura estará involucrado pero no tanto en una compilación de WebGL porque en una compilación de WebGL no tiene la oportunidad de involucrarse hasta el final del fotograma y por lo tanto es probable que se quede sin memoria y se bloquee. Aquí tengo algunos otros ejemplos donde puedes optimizar el code de Unity para reducir la asignación de memoria y reducir la necesidad de recolección de basura frecuente. Entonces, cuando usas cadenas, por ejemplo, si necesitas manipular y pegar cadena, usa StringBuilder en lugar de Plus. Si estás usando funciones de Unity donde la función devolvería una matriz y tienes que hacer algunas manipulaciones de matriz o iterar a través de una matriz, deberías almacenarla en caché antes de usarla en un bucle for. Para comparaciones como comparar un nombre o etiqueta, no muchos de nosotros sabemos que estos accesorios en realidad devuelven una nueva cadena cada vez, por lo que es mejor usar, por ejemplo, para comparar con una etiqueta, usa la función CompareTag. Y por último, pero no menos importante, en el caso de las coroutines, una cosa común que tendemos a hacer como programadores es usar una línea que devuelve new WaitForSeconds o WaitUntil o WaitWhile. Así que en su lugar, almacénalo en caché y úsalo, especialmente si lo estás usando en un bucle for.

Mientras hablamos de las formas en que la memoria puede ser gestionada en algunas situaciones y cómo podemos reducir el uso de memoria, hay algunas situaciones inesperadas que pueden hacer que las aplicaciones se queden sin memoria o incluso hacer que las aplicaciones se bloqueen, así que aquí es donde las herramientas que pueden ayudar a debugging estos problemas entran en juego. Así que una de esas herramientas es Backtrace, que uso en las aplicaciones y juegos que hago para cualquier plataforma. Y por supuesto, WebGL no es una excepción. Así que cuando lo integro, puedo ver errores en tiempo real y en el panel de control y me ayuda a solucionar problemas de performance y de falta de memoria. Cosas como las que vemos hoy, estas pueden ser realmente utilizadas y luego esa información puede ser recogida para solucionar problemas futuros antes de que se salgan de control.

Eso es prácticamente el final de la masterclass. Si tienes alguna pregunta sobre WebGL o Unity, no dudes en ponerte en contacto conmigo. Mis datos de contacto están en esta diapositiva. Gracias por sintonizar. ♪♪♪

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.