Cómo Toca Boca construyó un backend de renderizado escalable y de alto rendimiento.

BERTRAND GUAY-PAQUET / TOCA BOCASenior Graphics Engineer
Mar 20, 2026
Toca Boca
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.

Para satisfacer las demandas de rendimiento de nuestro ambicioso juego móvil 3D multiplayer, Toca Boca Days – especialmente en dispositivos de gama baja – necesitábamos innovar. El juego (ahora en pausa) presentaba niveles expansivos y soportaba hasta 32 jugadores con avatares altamente personalizables.

A finales de 2022, lanzamos nuestro sistema backend de Batch Renderer, construido sobre la API BatchRendererGroup de Unity. Este nuevo sistema ofreció ganancias de rendimiento significativas, que hemos seguido refinando.

En este artículo, compartiré insights sobre la arquitectura del sistema mientras nos preparamos para usarlo en nuestro próximo juego.

Resumen de la arquitectura de datos

A un alto nivel, nuestro sistema divide los datos de un GameObject y su componente Renderer en tres capas.

Arquitectura de datos en capas
Arquitectura de datos en capas

En la primera capa, cada componente Renderer corresponde a una única instancia de culling. Esta capa contiene todos los datos necesarios para determinar la visibilidad en función de los planos de culling de la cámara, la máscara de capa y cualquier grupo LOD padre.

La segunda capa representa el/los material(es) de cada Renderer, donde cada par Renderer-material forma una instancia de dibujo. Las instancias de dibujo almacenan datos relacionados con el renderizado, como la malla y el material.

La tercera capa consiste en lotes de BatchRendererGroup (de ahí el nombre Batch Renderer) y sus instancias. Cada lote tiene su propio GraphicsBuffer que contiene propiedades por instancia integradas, como la matriz ObjectToWorld, junto con un conjunto opcional de propiedades de material por instancia.

El conjunto de propiedades de material por instancia de un Renderer determina su tipo de lote.

Toca Boca Days | Toca Boca
Muchos libros con valores de propiedades de material por instancia

Nuestro sistema almacena todos los datos del lado de la CPU en una estructura compacta y orientada a datos de diseño de arreglos (SoA). Se basa en tipos que se pueden copiar dentro de contenedores nativos siempre que sea posible, lo que permite el uso de trabajos de Burst de alto rendimiento para tareas como la eliminación de instancias y la generación de comandos de dibujo. Esta arquitectura permite al sistema manejar de manera eficiente grandes cantidades de instancias.

Propiedades de material por instancia

Para asignar propiedades de material por instancia a un Renderizador, añadimos un componente que hace referencia a un conjunto de propiedades activo de ScriptableObject. Los conjuntos de propiedades deben limitarse en número, ya que cada uno define un tipo de lote separado; las instancias de diferentes lotes no se renderizan juntas.

Para facilitar la creación, proporcionamos un componente para establecer valores de propiedades instanciadas iniciales, junto con una ventana de Inspector personalizada. Sin propiedades por instancia, estos valores tendrían que establecerse en materiales únicos, reduciendo la eficiencia del agrupamiento.

Inspector de propiedades de material por instancia
Inspector de propiedades de material por instancia

Esqueletos y pieles

En Toca Boca Days, los avatares presentaban una extensa personalización de personajes. Para soportar ropa y accesorios variados, dividimos las partes esqueléticas de la malla de cada avatar en 17 componentes de Renderizador de Malla Esquelética (por ejemplo, brazo superior izquierdo). La mayoría de los artículos de ropa añaden componentes de Renderizador esquelético adicionales, que pueden acumularse rápidamente a medida que aumenta el número de jugadores.

Toca Boca Days | Toca Boca
Avatares de Toca Boca Days

Debido a que nuestros avatares son complejos, evitamos usarlos para mapas de sombras, lo que sería costoso. En su lugar, utilizamos sombras similares a blobs, y en la mayoría de los casos, los avatares se renderizan solo una vez por cuadro. Esto significa que no podemos amortizar el costo de la piel de vértices incorporado de Unity a través de múltiples comandos de dibujo para una sola malla.

En su lugar, manejamos la piel directamente en el shader de vértices. Todas las matrices de piel se almacenan en un único GraphicsBuffer global, y cada Renderizador recibe un desplazamiento en este búfer para ajustar los índices de hueso por vértice y obtener sus matrices de piel correspondientes.

El desplazamiento del esqueleto se almacena como datos de instancia de BatchRendererGroup, lo que nos permite agrupar llamadas de dibujo entre personajes que comparten la misma malla (por ejemplo, todos los brazos superiores derechos juntos), mejorando el rendimiento.

Calcular matrices de skinning normalmente requiere un conteo de renderizadores × un conteo promedio de huesos por renderizador en cálculos. Para reducir esto, combinamos dos estrategias:

Asegúrese de que todos los componentes de Renderer con skinning en un avatar utilicen índices de huesos consistentes; por ejemplo, el índice de hueso 2 siempre se refiere al pecho, incluso para un Renderer de pie derecho que no lo referencia.

Preprocesar mallas para identificar conjuntos únicos de índices de huesos y matrices de pose de enlace, idealmente resultando en un solo conjunto por avatar.

Componente preprocesador de rig de esqueleto
Componente preprocesador de rig de esqueleto

Con este enfoque, podemos consolidar el skinning de todos los componentes Skinned Mesh Renderer de un avatar en un solo par de "esqueleto de animación" y "esqueleto de renderizador".

Esqueletos de animación y renderizador (mostrando dos esqueletos de renderizador)
Esqueletos de animación y renderizador (mostrando dos esqueletos de renderizador)

En cada cuadro, nuestro administrador de esqueletos realiza los siguientes pasos:

Extracción de animación: Los trabajos de animación extraen las transformaciones actuales de los huesos del esqueleto de animación a través de la API Playables (Mecanim).

Cálculo de pose: Los trabajos de Burst generan matrices de pose animadas a partir de la jerarquía de huesos y las transformaciones extraídas.

Ensamblaje de matrices de skinning: Los trabajos de Burst combinan matrices de pose animadas y matrices de pose de enlace en matrices de skinning.

Carga en GPU: Las nuevas matrices de skinning se cargan en el GraphicsBuffer global utilizando un shader de cómputo.

Este proceso es complejo pero altamente eficiente, reduciendo las matrices de skinning en un factor de dos para un avatar desnudo y en un factor de cuatro o más cuando se aplica ropa.

Mirando hacia adelante

Desarrollar un backend de renderizado personalizado para Toca Boca Days y ahora modernizarlo para Unity 6.3 ha demostrado ser valioso. La actualización de Unity 2022.3 fue fluida, y nuestro sistema de Renderizador por Lotes sigue ofreciendo un rendimiento sólido para juegos con personalización extensa de personajes y propiedades de material por instancia.

Tener control total sobre la generación de comandos de dibujo a través de la API BatchRendererGroup permite estrategias de culling personalizadas, como portales de oclusión y culling de oclusión personalizado, y optimizaciones de animación, como limitar las actualizaciones de la matriz de skinning según la proximidad y la importancia de la cámara.

La extensibilidad de Unity, combinada con soluciones eficientes listas para usar como Universal Render Pipeline (URP) y el Drawer Residente en GPU (con acceso a la fuente), nos permitió alcanzar nuestros objetivos de rendimiento mientras manteníamos un pipeline de renderizado personalizado altamente optimizado.

Toca Boca Days | Toca Boca
El Renderizador por Lotes volverá

Toca Boca está desarrollando un juego que aún no se ha anunciado; sigue al estudio en Instagram, TikTok y YouTube para actualizaciones. Explora más historias de desarrolladores de Unity móvil en nuestra página de soluciones móviles y nuestro hub de Recursos.