Elegante cascada de RiME en el motor del juego: crea una corriente de agua

Esta es la segunda (y √ļltima) parte de la gu√≠a de cascada Unity o UE4 despu√©s de inspirarse en el juego RiME. El primero descubri√≥ las herramientas, eligi√≥ el entorno de desarrollo y cre√≥ un sombreador para los c√≠rculos de agua. ¬ŅPor qu√© empezaste con esto? Todo es simple: la mayor√≠a de los m√©todos que ahora se necesitan al crear una cascada se usan all√≠. Pero hay algunas pistas. No tiraremos, vamos debajo del gato.



Comencemos con lo obvio: tome el Panner normal y la malla. Te sorprender√°s: ¬Ņpor qu√© hay tantos pol√≠gonos? Al igual que en Simon Falls , uso el desplazamiento de v√©rtices para compensar los v√©rtices del modelo en 3D a trav√©s del sombreador. Y para que se vea hermoso, necesitamos tops adicionales. Para la optimizaci√≥n, puede crear mallas LOD (Nivel de detalle) con menos pol√≠gonos y obligar a Unity a cambiar a modelos de menor resoluci√≥n.



La costura UV se encuentra en la parte posterior. Incluso si la cascada no tiene costuras de textura visibles, es mejor ir a lo seguro y colocar las costuras UV en los lugares menos visibles para el jugador.

Al igual que con la malla del c√≠rculo de agua, la exploraci√≥n UV debe tener el menor n√ļmero de costuras en el modelo cuando se utilizan texturas de mosaico. Un lado de la cubierta UV est√° atado a 0 en la direcci√≥n de U, y el otro a 1. Recuerde que el ancho de la cubierta UV debe encajar en un valor entero del espacio U (por ejemplo, mosaico 1, 2 o 3). Si colocamos mosaico 1.2 veces en la direcci√≥n U, aparecer√° una costura en la uni√≥n. Y necesitamos una textura de mosaico sin costuras.



Así es como se ve el mapa normal en mosaico 3 veces en la dirección U. Observe cómo el lado derecho de la imagen 3D encaja perfectamente en 1 en la dirección U. Establecer el mosaico en 3 en la dirección U significa que la textura se repite 3 veces entre 0 y 1 en la dirección U (la imagen a continuación muestra el espacio UV de 0 a 1).



Por ejemplo, aquí está la misma textura en mosaico 2.2 veces: una costura apareció inmediatamente. Para muchos, esto es obvio, pero es importante entender por qué y cómo debe colocar sus escaneos UV en ciertos escenarios. Trabajamos con el panorama de las texturas de mosaico y, además, no necesitamos costuras, por lo que debemos adaptar el escaneo UV.



Para una imagen m√°s completa, mira el gif donde muevo el mapa UV. Por un lado, el ancho de la cubierta UV es exactamente 1 (perfectamente en mosaico), el otro est√° recortado para que la costura sea visible. Como solo usamos texturas de mosaico, el mapa UV no tiene que estar entre 0 y 1.



En la cascada (como con los círculos en el agua), también distorsioné el mapa UV. Por lo tanto, cuando se usa Panner, la textura se mueve más rápido o más lento en ciertos puntos de la malla. Los polígonos adicionales en este caso hacen que la transición entre áreas distorsionadas sea menos notable. Intente activar la selección suave para deformar los rayos UV y lograr transiciones más suaves.



Presta atención a cómo la textura se estira más fuerte en la curva de la cascada; este efecto se puede regular de diferentes maneras. Siempre imagine la transición de UV a 3D. Cuanto más cerca estén los vértices de los rayos UV, más rápido se moverá la textura a lo largo de estos rayos UV en el espacio 3D cuando se usa Panner. Si mueve los vértices UV más lejos, la textura aparecerá con más frecuencia en esta área de la malla y se moverá más lentamente en 3D cuando use Panner. Experimente hasta obtener el efecto deseado.


Nota: este es material nuevo. Crea un nuevo material y aplica un nuevo sombreador sobre él (ver parte 1 ).

Nuevamente usamos la misma textura con varias opciones de velocidad / dirección de Panner, así como mosaico UV (volteamos una de ellas, dando un valor negativo de U). Agréguelos entre sí para tener la sensación de un efecto más aleatorio. Y usamos su salida para agregar muchas otras configuraciones: opacidad, variación de color y desplazamiento de vértices.



También utilicé el desplazamiento normal del mapa. Solo uno, porque se mueve tan rápido con dos Panner para variación, que en este caso no habrá diferencia. Multiplíquelo por el valor de azul igual a 1 (255 se indica en el gif, esto es cuando cada canal tiene 256 pasos, de 0 a 255), así como por los valores de rojo y verde igual a 60 (o el valor de 0.23 si usa la escala de 0 a 1). Como resultado, un mapa normal demasiado saturado se ha vuelto más uniforme y tranquilo. Para devolver normales más intensas, mantenga los valores de R y G iguales y aumente. Entonces obtienes un poco más de personalización dentro del sombreador.



Configuramos la malla, los rayos UV y otros componentes que ser√°n necesarios para que la cascada funcione. Analicemos algunas cosas en este GIF:



En él, una corriente de agua se desplaza a través de una malla 3D y se rompe a continuación. Se puede ver que aquí se usa el tipo de representación de recorte transparente: la cascada es completamente opaca o completamente transparente. El agua cambia de color cuando se acerca al suelo y se ve menos suave en las áreas blancas. El desplazamiento del vértice, del que hablamos anteriormente, se nota de inmediato. Todos estos factores le dan a la cascada un aspecto más vivo y natural. Ahora con más detalle, comencemos con el color.

Utilizo Lerp (interpolaci√≥n lineal) con dos colores y una textura de desplazamiento en blanco y negro que hice al principio como un alfa (se√Īal de entrada). Esta textura b√°sicamente sirve como una m√°scara para elegir si mostrar azul o blanco. Y Agregar est√° conectado al nodo de color de v√©rtice (nodo con colores de v√©rtice).



Los colores de vértice utilizados se muestran a continuación. Funcionan como los colores de vértice de la primera parte, es decir, como un degradado. Se necesitan colores para asegurarse de que el agua se vuelva más blanca hacia el fondo de la cascada. Como agregamos colores de vértice sobre el color existente (el color de vértice de punto más blanco = 1), puede exceder fácilmente el valor 1. Si esto sucede, obtendremos resultados demasiado brillantes y sobresaturados. Por lo tanto, la abrazadera está al final, de modo que los valores máximos no excedan 1 (para la abrazadera, mínimo = 0 y máximo = 1). El uso de colores blanco y azul asegura que cuando el agua se "rompa", estará en el área blanca (espumada) de la malla y obtendrá un borde blanco alrededor de las áreas transparentes. Cuanto más claro sea el color del vértice, más vértices sobresalen hacia afuera. Por lo tanto, el final de la cascada, que es más claro en color de vértice, se mueve más al azar. La curva de la cascada también es un poco más ligera, de ahí su velocidad.



Luego, hice dos mallas adicionales dentro de la cascada principal, para que apareciera una sensación de volumen. Las otras dos mallas son versiones modificadas de la malla principal, con los mismos rayos UV. Están ligeramente desplazados y modificados para que el material se vea diferente en las tres mallas. Este método no requiere rendimiento, pero ayuda mucho.



Además, conecte el fresnel en el canal de emisión para crear luz falsa que pase a través del agua. Fresnel hace que el píxel sea más claro ya que el vector normal en la superficie del objeto 3D se desvía de la cámara y tan oscuro como el vector normal se dirige a la cámara (perpendicular a la cámara).

Si observa un √°ngulo, la cascada se vuelve "m√°s delgada". Fresnel es √ļtil aqu√≠ para mostrar m√°s luz falsa en estas √°reas. Al mismo tiempo, es imposible que la cascada brille: para debilitar el efecto, us√© min node. Fresnel a menudo se usa con sombreadores de agua para cambiar el color seg√ļn el √°ngulo de visi√≥n. Conectar 0 (negro) a la emisi√≥n no har√° nada, y conectar 1 (blanco) lo convertir√° en un sombreador sin luz que se ver√° completamente iluminado desde todos los lados (incluso si est√° a la sombra).



Para suavizar, volteé el color del vértice usando un nodo menos. Si te desplazas un poco más arriba, verás que el color del vértice es claro debajo y oscuro arriba. Dándoles la vuelta (para que quede claro arriba y oscuro abajo), puede hacer que la parte inferior de la cascada sea menos suave en comparación con la superior. Los valores más oscuros son iguales a una superficie menos lisa, y los valores más claros son más suaves.



El desplazamiento del vértice o el desplazamiento del vértice es una cosa importante necesaria para realizar este efecto. Moviendo los picos, la cascada se ve menos estática y, por lo tanto, más viva.

Esta es una cascada sin desplazamiento de vértice:



Y aquí con desplazamiento de vértice:



Al mover los picos en función de nuestra textura de desplazamiento en blanco y negro, la cascada se vuelve más suave. Si dirige el valor 0.5 a la salida de desplazamiento de vértice del nodo principal, entonces no sucederá nada. Intente mantener el gris con un valor de 0.5 como valor de vértice estándar. Todo lo que esté por debajo de 0.5 se moverá en la dirección negativa, y todo lo que esté por encima de 0.5 en la dirección positiva.

Entonces, ¬Ņc√≥mo sabemos en qu√© direcci√≥n se mover√°n los picos? ¬ŅQu√© es arriba y abajo?

En nuestro caso, queremos alejar los vértices de la superficie de la malla. Una dirección negativa significará que el vértice se mueve "hacia adentro" en relación con la dirección del vértice normal en la superficie, y una dirección positiva se moverá "hacia afuera". Para tal movimiento de vértice, podemos usar vértices normales. Cada vértice, incluso si es solo un "punto" en el espacio 3D, tiene una dirección asignada: vértice normal. Se utiliza para calcular cómo se debe sombrear la superficie de la malla. En este ejemplo, hice una bola y configuré Maya para que muestre las normales de vértice (pantalla> polígonos> normales de vértice). Cada vértice tiene una dirección que, por defecto, indica la distancia desde la superficie. También puede editar cualquier vértice normal y cambiar su dirección, pero ahora el actual nos conviene. Ahora puede usarlo en el sombreador y especificar en qué dirección desplazar los vértices.



El nodo normal V√©rtice genera valores RGB basados ‚Äč‚Äčen la direcci√≥n normal de los v√©rtices de la malla. En sombreadores y con normales en general, los valores RGB se utilizan para expresar un objeto de coordenadas XYZ 3D en un espacio 2D. Para que nuestro Panner en blanco y negro en el sombreador pueda moverse a lo largo de la superficie de un objeto 3D, podemos usar valores normales de v√©rtice RGB. Agregu√© color de v√©rtice a la parte superior para hacer que la parte inferior de la malla sea m√°s convexa. Y tambi√©n algunos nodos para controlar el valor de desplazamiento (esto es normal si sus valores est√°n por debajo de 0 o por encima de 1).



Para demostrarlo, le daré una esfera con un nodo normal de vértice aplicado directamente a la salida albedo (color) del nodo principal.



La salida RGB (XYZ) del nodo normal de vértice se basa en los vértices normales de la malla, lo que nos da este resultado.

Aquí está la estructura completa de los nodos. Muestra dónde y cómo se conecta todo.



Espero que hayas aprendido algo nuevo por ti mismo. Mi objetivo era proporcionar suficiente conocimiento y puntos de partida para la creación independiente de tal cascada. Para hacer tales cosas, no es necesario saberlo todo: suficientes cosas básicas. Por supuesto, no solo abrí Amplify y creé este efecto de una sola vez: hubo otros intentos que no funcionaron.

Algunos enlaces m√°s √ļtiles sobre el tema:

  • Informe de Julian Love , quien trabaj√≥ en Diablo como artista de efectos visuales. El rendimiento es principalmente sobre habilidades de efectos, pero muchas de las cosas que se muestran se aplican tambi√©n a otros tipos de efectos visuales en tiempo real.
  • Blog de la empresa Little Chicken Game . Se dedica a crear juegos art√≠sticos sin texturas y t√©cnicas interesantes para crear un entorno hermoso.
  • Mi cerebro, Simon Trumpler, tiene muchas otras cosas interesantes en el sitio. Uno de mis favoritos es la p√°gina con los llamados Game Art Tricks .
  • Canal de YouTube con videos de sombreadores . Mis favoritos son aquellos que recrean efectos espec√≠ficos de los juegos (en Unity).

Source: https://habr.com/ru/post/442074/


All Articles