En La Caída de Oriath, expansión que lanzamos en agosto de este año, mejoramos enormemente el renderizado del agua en Path of Exile. En la publicación de hoy, Alex, nuestro programador gráfico, hablará sobre cómo implementó este cambio significativo:

A medida que Path of Exile crecía, invertimos más y más recursos en su motor de renderización. Sin embargo, algunos jugadores juzgaron al motor en base a viejos elementos que fueron creados hace años, como nuestro efecto original del agua (una de las primeras cosas que ves cuando comienzas a jugar con un nuevo personaje). En realidad, hemos trabajado constantemente en mantener a este motor rápido y extensible, y quisimos que nuestros jugadores lo vieran. Cuando me encomendaron reemplazar el agua del juego, aunque tenía muchas ideas que potencialmente podía probar, sabía que algunas de ellas (probablemente la mayoría) iban a tener que ser descartadas por razones de rendimiento o simplemente por no ser lo suficientemente lindas.

Reemplazar toda el agua en el juego era una tarea realmente delicada, porque muchos recursos del juego la usaban y esta nueva agua debía ser 100% compatible retroactivamente con ellos. Hacer solo un área de agua que se viera bien no era suficiente, debía adaptarse a cualquier terreno y a cualquier condición del entorno que tuviéramos. Y, por supuesto, el rendimiento estaba entre mis primeras prioridades porque tenemos una cantidad limitada de poder de GPU para dedicar al entorno.

Mi trabajo sobre el agua consistió mayormente en escribir un sombreador (shader) para ella, que es un programa que corre en la GPU y produce su imagen en la pantalla. En casos como este primero debes romper completamente lo que actualmente funciona y después comenzar a reconstruirlo desde cero, paso a paso, para que al final sea mejor. Comencé a jugar con nuestro antiguo sombreador de agua simplemente llevando a cabo algunas depuraciones y después agregando un algoritmo de detección de límite del espacio de pantalla para renderizar espuma potencialmente en áreas en las cuales los objetos se entrecruzan con el agua. (Ten en cuenta que la Interfaz de Usuario HUD que se puede ver en estas capturas de pantalla pertenece a una versión en desarrollo de la HUD 3.0.0, antes de que se viera como ahora).



Aunque la detección de límites funcionó bien, sabía que podía tener un impacto potencialmente innecesario sobre el rendimiento, y por eso tuve que descartarla. El siguiente paso fue agregar algunas olas de superficie, reflejos básicos y color al agua:



Actualmente, la superficie se renderiza a través de un algoritmo de trazado de rayos (raytracing) dentro del espacio de la pantalla, lo que significa que el agua es en realidad plana, pero parece 3D debido a técnicas de sombreado similares al mapeo de oclusión de paralaje. En ese punto tuve que decidir qué funcionaba bien y merecía continuar con la siguiente iteración del desarrollo y qué debía rehacerse desde cero. Lo gracioso del renderizado de agua es que realmente no ves demasiado el color del agua. Ves cosas que se reflejan en su superficie y refractan, así que decidí trabajar más detalladamente en esa parte, dejar la parte del trazado de rayos como estaba y rehacer todo el resto.

Para reflejos razonablemente precisos llegué a implementar un algoritmo de espacio de pantalla que reflejaba cosas que estaban en pantalla. Un ejemplo es esta “agua” 100% reflectiva que parece mercurio:



Es una de esas cosas que debes descartar sin importar cuánto te gusten, simplemente porque no terminan de justificar su costo.

Las partes más complicadas del renderizado de agua son probablemente los algoritmos de generación de ondas de superficie y de renderizado de espuma, porque requieren mucha intuición artística (por la cual no me destaco). El resto es simplemente física, óptica y programación, que son todas significativamente más directas. Sabía que los primeros experimentos con la espuma iban a ser difíciles, pero aún así comencé:



Aunque sabía que iba por buen camino, necesitaba comprender exactamente qué hace que la espuma real parezca real. Por ejemplo, mi ruido tenía una estructura muy regular, y la espuma real es gobernada por corrientes muy turbulentas e irregulares que la distorsionan. Al mismo tiempo, hice una app simple para estudiar de cerca la forma en que las partículas de agua se mueven en un corte transversal de una ola y cuando las olas comienzan a llegar a su punto más elevado.

Después de incluir todo eso en mi sombreador, y con eso solucionando parcialmente algo de iluminación, empezó a tomar forma:



Se estudiaron innumerables videos de referencia, se reescribieron líneas de código y se habló con surfistas profesionales para lograr que esta espuma se viera lo más cercana posible a la real y que su rendimiento fuera lo más eficiente posible. Después de implementar un motor de física para telas, el renderizado de agua se transformó en mi siguiente mayor tarea: mi mente estaba completamente ocupada en ello. En nuestro gimnasio tenemos una gran vista de una piscina y fui fastidiado constantemente por parte de mis amigos por mirar a las chicas. Uf, ellos simplemente no entendían de qué manera estaba cautivado por el estudio de patrones de olas de superficie, la cáustica y los efectos de doble refracción. Veía nubes y pensaba cómo se reflejarían en el agua. Veía plantas y no podía dejar de pensar cómo difuminan la luz por debajo de la superficie de sus hojas, porque sucede lo mismo con el agua del océano.

El siguiente paso en el desarrollo era asegurar que esta tecnología funcionara con cualquier área que tuviéramos y que, con suerte, siguiera la orilla de una forma natural. Aproximadamente en ese momento, hicimos un tráiler que mostraba un poco de esta tecnología del agua y la gente tuvo una justificada preocupación sobre la forma en que el oleaje tomaba ángulos antinaturales. Las áreas extravagantes con estructuras de costa muy complejas, como el Arrecife del Rey del Mar, eran particularmente malas, por lo que decidí hacer otro proyecto paralelo para generar una orilla suavizada en una ola controlada.

Este algoritmo nos permitió suavizar la forma de las olas de una forma más natural en el grado que quisiéramos. Agregar mapas de entorno HDR también nos ayudó a mejorar la percepción total de la superficie del agua. Lo que esto significa es que nos permitió crear los patrones “animados” realmente luminosos que ves cuando el sol es reflejado por las olas.



A partir de ese momento, el resto se trataba de optimizar todo el sombreador y agregar un montón de otros efectos cosméticos. Por ejemplo, cuando los rayos del sol son refractados por la superficie, crean un patrón luminoso en la cáustica de la arena. O cuando los rayos del sol son reflejados de vuelta desde aguas profundas, los puntos álgidos de las olas obtienen un tono levemente más brillante que se llama dispersión bajo la superficie. Agregar una forma físicamente interesante para mostrar cómo la espuma se disipa sobre la arena ayudó a hacer la orilla más interesante. Todos estos cambios nos acercaron al agua que tenemos hoy:



El Litoral Crepuscular es la primera área a la que entra cada nuevo jugador. El agua es una de las primeras cosas que ve allí. Al crear este nuevo sistema de agua, lo que realmente quise era que les gustara Path of Exile desde ese momento.