Il y a des jeux avec un visuel si mémorable qu'il est effrayant de considérer le temps passé sur son développement, prenez au moins le dernier God of War ou RDR2. Et il y a des projets qui soudoient avec leur ambiance, même s'ils sont loin de AAA. À titre d'exemple, RiME a été loué plus d'une fois pour son style, son et histoire. Et récemment, le concepteur de niveaux du jeu a
rejoint l'équipe de CD Projekt Red pour travailler sur Cyberpunk 2077. RiME a également inspiré l'artiste 3D Math Roodhuizen pour créer son propre art.
Et dans le contexte de tout cela, je suis tombé sur une ArtStation sur un guide pour créer de l'eau réaliste. Si la
dernière fois on parlait de la rivière, alors cette fois d'une cascade stylisée. Dans la première partie, nous verrons comment créer un «effet d'onde», et même directement dans le moteur de jeu. Pour plus de commodité, toutes les étapes sont accompagnées de gifs et / ou de photos.
Tout d'abord, merci à Simon Trumpler, un artiste de Tequila Games qui a travaillé sur
RiME . J'étais encore nouveau dans les shaders et les effets visuels quand j'ai trouvé son
matériel et j'ai pensé: "Wow, je peux faire la même chose?" Je vous recommande de lire le rapport pour en savoir plus sur les façons de créer des effets stylisés (comme le feu, par exemple).
Parlons maintenant de la création d'une cascade. Cela sera particulièrement utile pour les personnes qui ne connaissent pas le système Shader Graph. Notre objectif: apprendre de nouvelles façons de travailler et mieux comprendre les shaders.
J'utiliserai Unity comme exemple, mais la plupart des méthodes sont également applicables dans UE4 - si vous avez l'habitude de travailler là-bas, répétez simplement après moi. Pour plus de commodité, chaque étape est visualisée avec un gif ou une image.
Vous aurez donc besoin de:
- Unity 2018.
- Amplify Shader Editor (plugin Unity). Mais si vous ne voulez pas dépenser d'argent pour cela, installez Unity 2017 et téléchargez gratuitement Shaderforge depuis le magasin de ressources (la nouvelle version du moteur ne prend pas en charge ce plugin, mais il fonctionne toujours dans Unity 2017). Les deux outils sont presque identiques, sauf que certains points sont appelés différemment.
- Autodesk Maya.
- Tout pour créer ou éditer des textures. J'utilise Photoshop et parfois même Substance Designer (mais vous n'en aurez certainement pas besoin pour cette cascade).
Tout d'abord, sur «l'effet d'entraînement» qui se produit lorsqu'une cascade tombe à la surface. Il peut également être utilisé à d'autres fins, par exemple pour créer des ondulations autour d'objets dans l'eau.
Ouvrez Unity et assurez-vous que le plugin shader est installé. Au moment d'écrire ces lignes, Unity a son propre Shader Graph, qui est toujours en cours de développement. Et bien qu'il ne soit pas prêt, je recommande toujours d'utiliser l'éditeur Amplify Shader pour Unity 2018 ou Shaderforge dans Unity 2017.
Créez un nouveau matériau et donnez-lui un nom (j'ai MAT_WaterWrinkles). Cliquez ensuite avec le bouton droit sur le matériau dans l'onglet Projet et accédez à Créer> Amplifier le shader> Surface Shader. Dans ce cas, le nouveau shader s'applique automatiquement.
Vous pouvez sélectionner un shader à tout moment dans l'onglet Matériaux> liste déroulante des shaders (pour Shaderforge, il y aura quelque chose comme un shader PBL). N'oubliez pas que le shader doit être nommé à la fois dans la liste des dossiers et dans le shader lui-même après son ouverture.
Dès que vous ouvrez un nouveau shader, vous verrez quelque chose comme ceci:
Je n'écrirai pas de guide détaillé sur l'utilisation de Shader Graph, et si vous êtes complètement nouveau, lisez d'abord les guides d'introduction.
Dans tous les cas, pour obtenir l'effet souhaité, nous avons d'abord besoin d'un Panner régulier. Le voici avec la texture de test dans l'avion:
Panner déplace les coordonnées UV. Assurez-vous que la texture du mode Wrap est définie sur Répéter. Dans Shaderforge, vous devrez peut-être connecter un nœud temporaire à l'entrée Panner, pour Amplifier certaines de ces valeurs de base sont déjà incluses dans le nœud lui-même.
Nous avons donc une texture en mouvement. Mais nous voulons atteindre cet effet:
Et pour cela il faut qu'il défile comme ceci:
Comme vous pouvez le voir, la structure du nœud est la même - Panner déplace simplement les coordonnées UV dans les directions U et V (ou X et Y). Pour obtenir la direction de panoramique souhaitée, nous devons créer un maillage personnalisé avec UV. Gif pour plus de clarté:
En appliquant le même matériau à un autre maillage, nous pouvons contrôler la direction de la texture dans l'espace 3D lorsqu'elle se déplace dans l'espace UV.
Pour améliorer l'effet, ajoutez quelques polygones supplémentaires et déformez les UV afin que la texture au centre se déplace plus rapidement que le long des bords. Et placez les UV de sorte que la couture ne soit pas visible.
Une conclusion importante en découle: les bons effets se composent rarement d'un seul système et sont souvent une combinaison de plusieurs.
Nous avons obtenu une texture se déplaçant dans la bonne direction à la bonne vitesse. Le scan UV est positionné de sorte que le déplacement de droite à gauche dans l'espace UV avec le Panner se transforme en mouvement vers l'intérieur et vers l'extérieur dans l'espace 3D. Pour qu'il n'y ait pas de couture dans la texture sur le modèle 3D, vous devez épingler le scan UV (raccourci clavier X pour l'accrochage à la grille) aux sommets de l'espace de texture verticalement. En conséquence, nous avons obtenu l'effet souhaité.
Maintenant la transparence. Commençons par les choses de base. De nombreux calculs simples que vous effectuez dans le shader vont de 0 (noir) à 1 (blanc). Autrement dit, 0,5 est une nuance de gris et 0,2 est une nuance de gris foncé. Lors de l'application de ces valeurs (dans ce cas, au canal d'opacité du nœud de sortie principal), vous contrôlerez le niveau de transparence du matériau. N'oubliez pas que vous devez d'abord activer cette fonction. Dans Amplify, vous pouvez changer le type de rendu (en mode de fusion) d'opaque en, par exemple, transparent. Dans ce cas, nous utiliserons le type de rendu Découpe transparente - le pixel affiché par ce matériau est soit complètement transparent soit complètement opaque. Cela peut être vu dans le gif ci-dessus - il n'y a pas de pixels "translucides" affichés par ce shader.
Nous prenons une texture dégradée avec une étape et la plaçons dans le shader. Ici, il se connecte à la sortie albédo (couleur) du nœud principal.
Et ici, il est connecté à la sortie du masque d'opacité (ce paramètre est activé lorsque le type de rendu est Transparent Cutout).
On peut voir que la texture dégradée utilise des valeurs de pixels noir et blanc pour déterminer la transparence ou l'opacité. Tout de 1 (blanc) à 0,5 (gris) devient opaque, et tout de 0,5 (gris) à 1 (noir) devient complètement transparent (ou ne s'affiche pas du tout). Le masque d'opacité crée une ligne dure et arrondit les valeurs à 0 ou 1, selon le nombre le plus proche.
Une autre texture en niveaux de gris:
Connecté au masque d'opacité:
Vous avez l'idée. Et vous devinez comment il peut être utilisé:
Vous voyez essentiellement une image bleue défiler dans le graphique Shader. Et le fait que j'utilise uniquement la sortie R (rouge) de ce noeud. Par souci d'optimisation, j'ai regroupé deux textures en niveaux de gris (textures en niveaux de gris) dans un fichier, mais ce n'est pas nécessaire. Des images similaires peuvent être regroupées à l'aide de Photoshop ou de Substance Designer.
L'effet d'entraînement est un bon début, mais il peut être meilleur. Pourquoi ne pas empiler deux textures en niveaux de gris l'une sur l'autre pour rendre l'effet d'entraînement plus aléatoire?
J'utilise la même texture, mais j'ajoute des canaux différents. Je les fais défiler à différentes vitesses et un peu dans des directions différentes. La texture a un bon gradient de valeurs de gris, ce qui donne un sentiment d'effet d'onde aléatoire.
Sur le gif suivant, il y a encore une chose dont nous n'avons pas encore discuté - donc votre version peut sembler un peu différente:
Vous pouvez voir, par exemple, un pixel avec une valeur de 0,2 (qui ne rend pas) passe sur un pixel avec une valeur de 0,4 (qui ne rend pas non plus) et devient soudainement un pixel avec une valeur de 0,6 - puisque nous utilisons un nœud supplémentaire (0,2 ajoutés à 0,4 et 0,6). L'ajout de ces deux textures de niveaux de gris des vagues les unes sur les autres à des vitesses différentes donne un effet proche de l'effet souhaité.
Ici, pour démontrer le résultat, j'ai ajouté des textures de niveaux de gris les unes aux autres dans Photoshop.
Cependant, la couture à la fin du maillage est toujours distincte. Et nous devons obtenir ceci:
Au lieu de cela:
Sur le premier des deux GIF, les ondulations disparaissent lentement et deviennent plus petites lorsqu'elles approchent du bord de la grille. La façon la plus simple de procéder consiste à utiliser la couleur de sommet (couleur de sommet).
Chaque sommet du modèle contient ses propres données (par exemple, les coordonnées X, Y et Z), ainsi qu'une couleur ayant une valeur de 0 à 1. La couleur des sommets peut également être définie dans l'éditeur 3D.
La plupart des sommets extérieurs sont noirs (c'est-à-dire qu'ils ont une valeur de 0). Ils deviennent blancs (plus près de 1) à l'approche du centre. Notez que vous aurez besoin de subdivisions supplémentaires pour obtenir des sommets qui peuvent être colorés.
Par exemple, dans Maya, pour la coloration, vous pouvez aller dans le menu Affichage du maillage> Couleur du sommet de la peinture et cliquer sur le champ Plus d'options.
Nous pouvons maintenant combiner Vertex Color dans notre shader en utilisant Multiply.
J'ai appliqué un dégradé au-dessus des textures utilisées et défini le mode de calque sur Multiplier.
Le gradient augmente la valeur de gris à 0 (noir), donc le rendu des pixels sera plus difficile (ils n'apparaissent pas en dessous de la valeur de 0,5). Cela conduit au fait que les lignes de pulsations sont compressées plus près du bord (les couleurs des sommets agissent principalement comme un gradient).
J'ai ajouté quelques nœuds supplémentaires pour contrôler l'épaisseur des lignes d'ondulation. Voici le graphique complet:
Expérimentez simplement la vitesse / la direction du défilement, ajustez la texture et essayez de changer la mosaïque pour tirer le meilleur parti de l'effet.
Cela nous aidera à créer un shader plus complexe - une cascade. Nous parlerons de lui dans la prochaine partie.