Magia en milisegundos: Cómo se genera un frame

Os contamos cómo multitud de complejos cálculos se da la mano para dar forma a las imágenes que dan vida a nuestros juegos favoritos.
Magia en milisegundos: Cómo se genera un frame
·

Todos los aquí presentes, más o menos, tenemos cierta idea de cómo funcionan los gráficos de un juego. Sabemos lo que son los polígonos, las animaciones, la iluminación, los reflejos… Pero ¿sabemos cómo se genera un frame? ¿Cómo se van superponiendo diferentes efectos y procesos hasta dar forma a esas imágenes que luego vemos en movimiento? Hay multitud de artículos técnicos donde encontrar información detallada al respecto, pero nuestro objetivo es hacer una versión sencilla y fácil de entender para todo el mundo. Además, vamos a usar como referencia uno de esos artículos: el fantástico análisis de Adrian Currèges del Fox Engine en Metal Gear Solid V: The Phantom Pain.

Creando la base

Lo primero que queremos dejar claro es que cada juego y, sobre todo, cada motor, genera el frame de manera diferente. En el caso del Fox Engine en Metal Gear Solid V: The Phantom Pain comienza dibujando el suelo… incluso cuando no lo vemos. En la escena del hospital que vamos a analizar, el terreno bajo el suelo del hospital se genera antes que el propio hospital, para, seguidamente, hacer lo propio con los personajes y demás elementos del escenario. Si os preguntáis por qué el suelo tiene prioridad, la razón es que, seguramente, en los escenarios abiertos, es muy útil para el juego saber qué se esconde tras colinas y montañas para seleccionar qué mostrar y qué no, ayudando a optimizar el rendimiento.

Esta es la imagen que vamos a utilizar para explicar todos los procesos tras su generación.
Esta es la imagen que vamos a utilizar para explicar todos los procesos tras su generación.

El siguiente paso es calcular la iluminación, y lo hace con cuatro mapeados que, para que nos entendamos si no sois muy técnicos, son como cuatro capas que calculan diferentes aspectos de la imagen tridimensonal. El primero es el llamado albedo map, que contiene el color de las texturas que cubren los polígonos, así como su opacidad. El segundo, el normal map, añade un efecto de relieve a las mallas poligonales, permitiendo que iluminación añada mucho más detalle y volumen a superficies planas o menos detalladas. El siguiente es el specular map, que indica cómo refleja la luz ese elemento, incluyendo cómo la luz penetra superficies como la piel. El último es el depth map que, como bien recoge su nombre, calcula la profundidad de la imagen.

Los cuatro mapeados que se combinan para crear la base de la imagen.
Los cuatro mapeados que se combinan para crear la base de la imagen.

Añadiendo detalle

Con la base más o menos lista, llega el momento de comenzar a añadir detalle. Así, el Fox Engine comienza a calcular la velocidad de los elementos en pantalla para añadir el desenfoque de movimiento. Al tratarse de una escena muy estática, tan sólo el personaje en llamas (cuyo nombre no vamos a mencionar, tranquilos) se considera dinámico, en un esfuerzo por optimizar recursos en personajes que no se mueven lo suficientemente rápido para justificar aplicarles desenfoque de movimiento. Como nota, aquí sólo se calcula qué elementos se van a desenfocar y cuánto, y el efecto como tal se aplicará más adelante. Lo siguiente es la oclusión ambiental, una técnica que sombrea las zonas que recibirían menos luz ambiental, como esquinas, puntos donde convergen varios elementos, zonas estrechas, etcétera. Es importante destacar que el objetivo de esta técnica no es tanto recrear sombras, sino recrear la falta de luz. El motor de Konami combina dos técnicas diferentes, sobre las que podéis descubrir más en el artículo que enlazamos al inicio.

PUBLICIDAD
El pase final de la ‘SSAO’, una de las dos técnicas de oclusión ambiental que utiliza el juego de Kojima Productions para añadir zonas donde no incide la luz.
El pase final de la ‘SSAO’, una de las dos técnicas de oclusión ambiental que utiliza el juego de Kojima Productions para añadir zonas donde no incide la luz.

Los ingenieros y artistas de Kojima Productions trabajaron en un interesante sistema para integrar la iluminación global en el juego –la técnica que emula cómo la luz ilumina un escenario tanto de manera directa como indirecta–, consistente en esferas que recogen la iluminación en diferentes partes del escenario. Estas esferas se generan durante el desarrollo para evitar que el motor tenga que hacer los cálculos en tiempo real, limitándose a representar y aplicar los resultados en función de la posición del jugador y la información generada por los mapeados que comentábamos antes. Como nota, este cálculo se hace a la mitad de la resolución del juego, y se escala internamente a la resolución nativa.

Estas esferas se utilizan para representar cómo un disco metálico brillaría al recibir cierta luz del juego, y ese efecto se extrapola para recrear la iluminación global del escenario.
Estas esferas se utilizan para representar cómo un disco metálico brillaría al recibir cierta luz del juego, y ese efecto se extrapola para recrear la iluminación global del escenario.

Con la base de la iluminación lista, toca añadir más luces. Primero, se añaden las luces dinámicas que no proyectan sombra, y su iluminación se calcula, esta vez sí, a resolución completa. Se hacen dos pases, uno que calcula cómo ilumina y otro que calcula cómo se refleja la luz en los diferentes elementos a su alrededor. Después de las luces sin sombras, llegan las luces que proyectan sombras. Estas son mucho más exigentes, ya que requieren generar un mapeado de sombras para cada luz. El proceso es similar, calculando la iluminación (esta vez incluyendo las sombras que proyectan) y cómo se reflejan. En este punto se combinan todas las «capas» y se genera la imagen base sobre la que se ajustará el color y se añadirán los efectos.

Al combinar todas las capas generadas con los efectos de iluminación y sombras, todo empieza a tomar una forma mucho más conocida.
Al combinar todas las capas generadas con los efectos de iluminación y sombras, todo empieza a tomar una forma mucho más conocida.

Los múltiples toques finales

Con la imagen base terminada, el Fox Engine comienza añadir multitud de efectos, empezando por los objetos que emiten luz, como el cartel de salida o las llamas de personaje. A la vez, se dibujan los objetos transparentes. Lo siguiente es añadir los reflejos. Como en muchos juegos, aquí encontramos dos tipos. Por una parte tenemos los llamados cubemaps, un cubo que contiene una imagen prerrenderizada (es decir, que no se genera en tiempo real) de nuestra ubicación y que modifica su perspectiva en función de la posición de la cámara. Como nota, en Metal Gear Solid V: The Phantom Pain hay una cantidad enorme de cubemaps, teniendo en cuenta la variedad de localizaciones, que las fases transcurren a diferentes horas del día y con diferentes condiciones atmosféricas. Luego, se añaden las screen space reflections, que son los reflejos basados en elementos que vemos en la pantalla. Estos sí son en tiempo real, pero tienen la importante limitación de que, si no están fuera de la imagen renderizada, no se pueden mostrar.

Es muy habitual tener ‘cubemaps’, una imagen cúbica, generalmente de una resolución no demasiado alta, que se puede utilizar para recrear reflejos estáticos.
Es muy habitual tener ‘cubemaps’, una imagen cúbica, generalmente de una resolución no demasiado alta, que se puede utilizar para recrear reflejos estáticos.

La imagen sigue ganando en detalle con la distorsión del calor de las llamas de personaje, los decals (texturas que se aplican de manera dinámica, como por ejemplo, agujeros de bala que generamos al disparar), y las partículas, como el fuego. Después, se genera el bloom, ese brillo/aura que generan ciertas luces en un proceso sorprendentemente complejo que os animamos a ver en el artículo original. El siguiente paso es la profundidad de campo, que enfoca y desenfoca objetos en función de la cámara. El motor genera una imagen cercana y una lejana, las modifica en función del enfoque deseado y las combina.

Humo, fuego y otros efectos comienzan a hacer acto de presencial
Humo, fuego y otros efectos comienzan a hacer acto de presencial

La imagen ya está casi completa, y ahora es el turno de los efectos de polvo y resplandor en la cámara, que imitan cómo la lente reflejaría la luz en la vida real. Finalmente, se usan los datos del desenfoque de movimiento que se generaron al principio par distorsionar los elementos necesarios. Los desarrolladores tienen la opción también de modificar el color de la imagen para darle un toque más personal, ya sea ajustando los blancos, aplicando filtros… y el motor introduce esos cambios en este momento. Con la imagen prácticamente terminada se aplica el antialiasing, que suaviza los píxeles para reducir, en medida de lo posible, los bordes serrados y, por último, se añaden unos sprites que permiten iluminar u oscurecer zonas en pantallas. Esto es algo muy característico en Metal Gear Solid V: The Phantom Pain, y es, sencillamente, una opción para que los desarrolladores tengan control total sobre la apariencia del juego.

Los toques finales nos dejan la imagen que finalmente jugaremos.
Los toques finales nos dejan la imagen que finalmente jugaremos.

Este es un ejemplo de un motor en concreto, y el proceso, lógicamente, varia en función del motor, del juego y de las necesidades de cada desarrollador. Lo que no suele variar es que, una vez terminada la imagen, esta se mandará a nuestra pantalla y la GPU volverá a repetir todo este proceso desde cero para general el siguiente. 30, 60, o 120 veces por segundo.

Juan Rubio
Colaborador
En forosComentar en nuestros foros

En forosComentar en nuestros foros

Flecha subir