Bloque A Bloque Analizar: ¿cómo Funciona El Motor Gráfico De League Of Legends

Hola, soy toni albrecht, uno de los ingenieros Render Strike Team — una nueva aventura en el League of Legends. Este equipo debe mejorar el motor de render de los juegos, y nos morimos de ganas de empezar a trabajar. Me referiré brevemente a hablar de cómo el motor de arranque funciona ahora.

Para mí es una excelente oportunidad para dar una vuelta por etapas, la canalización de gráficos para que el comando comprendido, sobre el que tenemos que trabajar. Voy a explicar como League of Legends construye y muestra la imagen individual en el juego (recuerdo a los poderosos equipos, esto ocurre más de 100 veces por segundo). El debate se llena de los detalles técnicos, pero espero sea accesible incluso para aquellos que no tienen experiencia en el procesamiento se realiza. Para empezar, un par de palabras sobre la disponibilidad de nosotros gráficos bibliotecas.

League of Legends se debe trabajar de manera eficaz en muchas plataformas. Por ejemplo, Windows XP ahora la cuarta so entre nuestros jugadores (después de la de Windows 7, 10 y 8). Cada mes, los usuarios de Windows XP participan en más de 10 millones, de los partidos, y para mantener la compatibilidad con versiones anteriores, debemos ser compatible con DirectX 9 y utilizar sólo sus fichas. Utilizamos, en general, del mismo conjunto de funciones de OpenGL 1.5 en los equipos con OS X, pero esto va a cambiar pronto.

En la mayoría de los equipos instalados CPU y la GPU (procesador gráfico). La cpu responde a la lógica y el cálculo de los juegos, mientras que la gráfica recibe triángulos (triangles) y de la textura y los muestra en la pantalla como píxeles. Pixel shaders (pixel shaders) — pequeños programas en la GPU, nos permiten influir en cómo pasa el renderizado. Por ejemplo, puede cambiar la manera en que la textura se superponen en triángulos, o hacer que la GPU realizar el cálculo para cada textura.

Por lo tanto, es posible aplicar una textura a un triángulo, o echarle muchas texturas diferentes, o de ejecutar más procesos complejos, como -el “mapping” (bump mapping), la iluminación, los reflejos o sombreado de la piel. Todos los objetos visibles se dibujan en su búfer y se muestran en pantalla, cuando la representación ha finalizado. Veamos un ejemplo. Esta es una imagen de , que muestra todos los 6336 triángulos, marco — monolítico de la modelo sin texturas.

Lo han creado nuestros artistas y exportado a un formato que puede leer y animar el motor de League of Legends. Se puede observar sombreado. Esta limitación de la aplicación utilizada para el estudio de la representación. La imagen de la modelo sin texturas no sólo aburrido, pero es ilegible.

No pasa lo que todos conocemos. Para amenizar el héroe necesita de la textura. La textura se encuentran en el disco como DDS – o TGA archivos que aparecen como un fotograma de la película de terror. Pero si correctamente aplicarlos a modelos, tenemos esta imagen:

Es ya algo similar. El sombreado que muestra nuestros cuadrícula con (skinned meshes), no sólo impone la textura en el modelo, pero todavía estamos hablaremos más tarde. Esto es lo básico, pero de League of Legends debe renderizar no sólo el modelo de campeón y la textura.

Veamos gradualmente todo el renderizado de la siguiente escena. Antes del comienzo de la escena debemos preparar la niebla de la guerra y de la sombra (la niebla y la sombra — suena inquietante). La cpu almacena la niebla de la guerra en forma de cuadrícula (grid) de 128 por 128, que escala hasta el cuadrado de la textura de 512 por 512. Después nos esta textura y con su ayuda las zonas y áreas de en el minimapa.

La sombra de una parte obligatoria del 3D de la escena, sin ellos, va a parecer que los objetos flotando en el aire. La sombra debe renderizar respecto a la fuente de la luz, para que parezca que su arrojan o campeón. La distancia de la fuente de luz hacia el objeto, que descarga la sombra, se tiene en cuenta para cada pixel RGB, componentes, y el alfa-el componente de cero.

En la primera imagen de abajo el campo de la altura de las sombras (shadow height field) sitiada de la torre, de sirvientes y a los dos campeones en RGB. En el segundo — sólo el alfa-el componente. La textura se recortan para los detalles de las sombras eran más visibles. en la parte inferior, y la torre de los campeones en la parte superior.

Por último, nos sombra, allanando sus fronteras (visualización de los cuales recientemente optimizado para aumentar la frecuencia de fotogramas). El resultado es una textura que se puede aplicar en la estática de la geometría para crear el efecto de sombra. Una vez que tengas la niebla de la guerra y la textura de las sombras, comenzamos a dibujar el resto de la escena en el marco.

En primer lugar es la estática, la geometría estática, geometry), es decir, los objetos sin animación. Se integra de la niebla de la guerra y la información acerca de las sombras con su propio principal textura. El resultado es esta imagen: Tenga en cuenta la sombra de los minions, así como en la niebla de la guerra, en los límites de la escena.

En el mapa de la Garganta (The Summoners Rift) para la estática de la geometría no se renderiza la dinámica de la sombra. La principal fuente de luz no se mueve, por lo tanto, la sombra de mallas estáticas (static meshes) “” en sus texturas. Así los artistas pueden controlar mejor el aspecto de la tarjeta, y la mejora de la productividad (ya que no es necesario renderizar sombras de muestras de las mallas). Las sombras pueden descartar sólo , de la torre y de los campeones de la.

En el relieve y la sombra ya se puede lanzar objetos. En primer lugar — los minions, de la champions y de la torre, — es decir, aquellos que deben realista de moverse y tener las articulaciones (bending el tratamiento de la ar). Cada animada de malla (animated mesh) contiene el esqueleto (estructura en forma jerárquica rodean los huesos) y la malla de triángulos (mesh of triangles), como en la imagen arriba. Cada vértice está relacionado con los huesos (de una a cuatro), con el movimiento que los vértices se mueven en las maneras de la piel y de aquí el nombre de “skin”.

Nuestros artistas crean de la malla, y la animación de todos los objetos y se exportan en el formato que se carga en el League of Legends en el comienzo del juego. Todos los huesos de la malla del modelo demostrado en las imágenes de arriba. A la izquierda — sus huesos con los nombres de.

A la derecha de la cima (azul de cuba) y la línea amarilla, que muestran el enlace a los huesos, que controlan su situación. Además de dibujar cuadrículas con en la dotación de personal de búfer de shaders mallas su profundidad en otro buffer, que utilizaremos más adelante para circuitos de. Y shaders realizan el cálculo del efecto fresnel (Fresnel) y de la irradiación de la iluminación, calcula la reflexión y modifican la luz de niebla de guerra.

La selección de trazados de forma predeterminada se aplica a las cuadrículas con y hace sus contornos más nítidos. Esto ayuda a separarlos del fondo, especialmente en las zonas de bajo contraste. En la primera de las imágenes en la parte inferior de contorno de apagado, en el segundo se encuentra habilitada.

Los contornos se obtienen mediante de la profundidad de la etapa anterior, a la que se aplica el filtro de (Sobel filter), que recupera la frontera, que sólo estamos renderizando en cada una malla por separado. Si la GPU no puede realizar el renderizado en varios objetos a la vez, se aplica el método de reserva con el uso de la plantilla del búfer. La sombra de la hierba de la parte de la textura de la tierra no se renderiza dinámicamente.

Ahora añadimos la hierba: Los manojos de hierba también de la malla con . Así podemos animar, cuando a través de ellos pasan los personajes o al de viento en el Desfiladero de (Summoners Rift).

Después de la hierba hace rendering agua transparente de malla ligeramente animados, texturas de las olas. Después se agregan los nenúfares, con hoyuelos en las piedras y de la costa, los insectos. La animación de estos objetos revitaliza la escena. Para subrayar efectos de agua (que no son para llamar la atención), he quitado la geometría bajo el agua, pero manteniendo la transparencia.

Esto pone de relieve los efectos que nos fue más fácil de aprender de ellos. En la siguiente imagen resaltada en el armazón de toda la ondulación. Aquí son bien visibles los efectos del agua frente a las costas del río, alrededor de las piedras y los nenúfares.

Animación y de forma normal, cuando el agua se ve así: Después de la hierba y el agua se agregan simples planos de los elementos de la geometría con la textura, superpuestas a la tierra, como indicador de su alcance los cañones de la torre en la imagen de abajo. Algunos circuitos se vuelve más grueso al mover el ratón sobre el objeto o la inclusión de los estados especiales, como el de la torre en la imagen de abajo.

Se crean de la misma manera, como trazados regulares, pero se utiliza más fuerte de blur, para hacerlos más grueso. También estos circuitos se destacan más fuerte que el resto, porque se crean en una etapa posterior interpretación y pueden solaparse con algunos efectos. Luego viene una de las etapas más importantes de. Las partículas de.

Ya he escrito sobre ellos en el artículo antes. Cada hechizo, la ganancia y el efecto es un sistema de partículas, que desea animar y actualizar. Concretamente, esta escena no es tan dinámica como, por ejemplo, el combate de 5 en 5, pero de todos modos muchas partículas. Mostrar sólo las partículas (en general, quitando el fondo), veremos lo siguiente:

Si visualiza los triángulos de partículas (sin texturas), veremos violeta geometría: Y así se ven las partículas de la representación.

Ahora, cuando la parte principal de la escena , la necesidad de “pulir”. Para ello, hacemos primero un pasaje con (aa) — tanto suavizado los bordes y hacemos un fotograma de “más limpio”. En estático de la imagen, este efecto no es muy visible, pero está genial, ayuda a reducir el efecto de los destellos de píxeles, que se produce cuando se mueve el alto contraste de las fronteras de la pantalla. En League of Legends utilizamos un algoritmo rápido suavizado de Fast Approximate Anti-Aliasing.

En la imagen de la izquierda — mignon sin suavizado, y el de la derecha graduado con FXAA. Observe cómo se han ablandado de la frontera. Al finalizar FXAA realizamos la corrección de gamma para ajustar el brillo de la escena. Recientemente, para la optimización de la pantalla después de la muerte del personaje que hemos añadido en este proceso, el efecto de la baja de la saturación de la pantalla.

Ahora, cuando el campeón muere, no es necesario reemplazar todo lo que es visible shaders de mallas en el opción. En esta etapa se renderiza juegos de los indicadores de. Tiras de salud, los indicadores de daño, y el resto el texto de la pantalla. Además, se muestran no están incluidos en el post-tratamiento de pantalla completa de efectos, por ejemplo, el efecto de daño en la imagen de abajo.

Por último, se dibuja la interfaz de usuario. El texto, iconos y objetos se superponen sobre todo, como texturas individuales. En esta escena alrededor de un millar de triángulos se utilizan para la interfaz, alrededor de 300 para la mini-tarjeta y 700 para el resto.

Toda la escena contiene alrededor de 200 mil triángulos, cerca de 90 mil de ellos se utilizan sólo para partículas. Por 625 llamadas de dibujo (draw calls) hace rendering 28 millones de píxeles. En el juego debe hacerse lo más rápido posible. Puede alcanzar más de 60 fotogramas por segundo, si todos los pasos son pasados menos de 16,66 milisegundos.

Lo que hemos descrito, se produce por parte de la gpu. La cpu durante este tiempo todo el juego de la lógica, la procesa el comando de entrada de usuario, los conflictos, las partículas, animación y saca el equipo en la GPU. Si la velocidad de fotogramas usted llega a 300, significa todo esto se produce en menos de 3,3 milisegundos.

Ahora usted entiende, ¿a qué dificultades se asocia render de un fotograma individual de League of Legends. Pero es sólo desde el lado de la salida de datos. En la pantalla, puede ver el resultado de cientos de miles de llamadas a funciones al motor de renderizado — él está constantemente cambiando y evolucionando para adaptarse a los tiempos. En la base de código de juego, hay diferentes formas de interpretación para apoyar el nuevo y el antiguo equipo.

Tarjetas funcionan de manera diferente. El desfiladero de (Summoners Rift) realiza el renderizado de manera un poco diferente que abismo (Howling Abyss) o el Maldito bosque (Twisted Treeline). Partes de un motor de renderizado quedado de las versiones anteriores League, otros no han descubierto su potencial. El comando Render Strike Team debe revisar el código para el renderizado de que se ejecute a través de la misma interfaz.

Si con esto somos capaces de hacerlo — los jugadores no notarán la diferencia (salvo, tal vez, mejorar el rendimiento en algunos momentos). Pero después de la finalización de trabajo podemos realizar cambios en todos los modos de juego al mismo tiempo.

Leave a Reply