Comment créer des shaders de nature avec Shader Graph en 2022 LTS

Dans ce blog, nous verrons comment créer deux shaders de nature distincts à l'aide de l'Universal Render Pipeline (URP) dans 2022 LTS. Nous examinons également de plus près un shader d'eau stylisé et un shader de sable semi-réaliste. Les actifs sont publiés avec les nouvelles scènes d'exemple URP 3D.

Les effets visuels semblent complexes à première vue, mais nous allons nous plonger dans le processus de réflexion basé sur la conception qui sous-tend ces fonctionnalités et couvrir les décompositions étape par étape des techniques qui leur donnent vie. Explorons les subtilités du développement des shaders et créons des shaders naturels époustouflants.

L'objectif, comme le montre la vidéo ci-dessus, est de créer un ruisseau stylisé qui coule au milieu d'un jardin de style japonais. À l'image du reste de l'environnement, l'atmosphère est calme et zen, et le style artistique est plus animé que photoréaliste.

D'après le terrain intégré dans la scène, l'eau est une combinaison de deux éléments : une chute d'eau et un ruisseau qui passe sous le pont. Les scènes d'eau du Studio Ghibli sont très inspirantes et comportent souvent trois éléments distincts :

1. Les conduites d'écoulement qui permettent d'établir le débit de l'eau

2. Mise en évidence des bords pour montrer l'interaction de l'eau avec le terrain environnant

3. Effets de mousse pour aider à vendre des cascades ou des chutes d'eau

L'ombre finale de l'eau utilisera tous ces éléments. Voyons maintenant en détail comment obtenir ce look.

La cascade comporte deux maillages distincts : le maillage principal de la cascade et un plan en forme de disque qui génère des ondulations. En utilisant un shader séparé non éclairé pour les ondulations, vous pouvez créer un nœud de bruit et l'utiliser comme valeur alpha du shader. Les zones restantes sont ainsi masquées, ce qui garantit que les ondulations apparaissent à l'endroit prévu.

Le plus important est de s'assurer que chaque zone du maillage peut avoir des comportements différents. Pour ce faire, vous pouvez pré-peindre les maillages avec des couleurs de vertex dans les canaux rouge (R), vert (G) et bleu (B). Les couleurs des vertex sont ensuite utilisées comme masques pour séparer les opérations dans certaines zones.

Dans le graphique des nuanceurs, utilisez le nœud de couleur de sommet pour accéder aux données de couleur de sommet prépeintes. Comme le montre la partie droite de l'image ci-dessous, vous pouvez utiliser le canal rouge de la couleur du sommet comme valeur T pour interpoler (lerp) entre la partie verticale et la partie horizontale de la chute d'eau, ce qui permet d'obtenir une transition en douceur. Pour créer un effet de cascade, combinez deux nœuds de Voronoï, chacun avec un carrelage et des décalages différents. Il en résulte une image dynamique de l'eau qui tombe.

Dans les cascades réelles, les zones où l'eau tombe en cascade depuis le niveau horizontal supérieur et où elle frappe le niveau horizontal inférieur présentent souvent des couches plus épaisses de mousse et d'éclaboussures. Dans la scène, vous pouvez pré-peindre la couleur des vertex dans le canal bleu pour vous assurer que les effets n'apparaissent que dans des zones spécifiques. L'utilisation de masques de couleur de vertex vous permet de combiner jusqu'à quatre effets différents en une seule donnée. Cette approche est plus efficace que la création de textures de masque en niveaux de gris distinctes pour chaque effet.

Pour créer l'illusion de plusieurs couches d'eau tombant du bord, utilisez des nœuds de bruit avec des échelles et des vitesses différentes. En faisant défiler un nœud de bruit à grande échelle à une vitesse plus lente, à côté d'un nœud de bruit à plus petite échelle à une vitesse plus rapide, vous obtenez l'effet désiré. Pour maintenir la cohérence avec la partie horizontale de la cascade, réutilisez les données de l'eau de ruissellement. Nous reviendrons plus en détail sur l'eau du ruisseau dans quelques instants.

Maintenant que vous avez créé une cascade apaisante, passons au ruisseau. L'eau de style animation présente généralement plusieurs caractéristiques essentielles. Contrairement à la mousse turbulente du littoral que l'on trouve dans le monde réel, un cours d'eau de style Ghibli présente généralement une mousse très fine près du littoral. En outre, la présence de queues d'eau peut donner une impression de dynamisme et de vivacité à l'eau. La scène se déroulant de nuit, un effet de réflexion convaincant est également nécessaire. Examinons de plus près comment vous pouvez obtenir ces effets dans Shader Graph.

Il existe de multiples façons de capturer un reflet à la surface de l'eau. L'option la plus efficace est un nœud de fonction personnalisé qui appelle la fonction GlossyEnvironmentReflectionintégrée à URP. Cette fonction renvoie la couleur de la réflexion, qui est échantillonnée à partir d'une sonde de réflexion de projection de boîte dans la scène. Il suffit de transmettre la position dans l'espace mondial, la direction de la vue, la normale et la position de l'écran requises par la fonction.

Si vous avez besoin d'une qualité visuelle plus élevée et de réflexions plus ancrées, les réflexions planaires d'URP peuvent être une excellente option. La réflexion planaire crée un reflet miroir d'une surface plane, ce qui est idéal pour la maille de l'eau, étant donné sa structure plane.

Pour obtenir une réflexion planaire, vous devez créer une caméra et une texture de rendu distinctes pour stocker les données de réflexion. Le concept de base consiste à placer une caméra de réflexion sous le plan de réflexion (dans ce cas, le flux de la scène) et à la mettre à jour en fonction de la position et de l'orientation de la caméra du joueur. La texture du rendu sera également mise à jour en temps réel.

L'un des avantages est que vous pouvez définir le plan proche de la caméra de réflexion comme étant le plan de réflexion lui-même. Il n'est donc pas nécessaire de découper les objets situés sous le plan de réflexion, ce qui simplifie le processus de mise en œuvre. Dans Shader Graph, vous créez une propriété de texture et dans le script, vous lui affectez la texture de rendu que vous avez précédemment créée.

Afin de lier la texture de rendu avec succès, assurez-vous que lors de la définition de la propriété du shader, le jeu de propriétés correspond à l'ID de référence de la propriété de texture que vous avez créée dans le graphique des shaders. Assurez-vous que le script appelle l'identifiant exact de la propriété lors de la mise à jour de la texture de rendu. Ensuite, la position de l'écran est utilisée comme UV pour échantillonner la texture. Vous avez maintenant réussi à obtenir une réflexion planaire dans notre nuanceur.

La mise en œuvre de la réflexion planaire implique plusieurs considérations et détails techniques. Pour une compréhension plus approfondie et un exemple de sa mise en œuvre, n'hésitez pas à jeter un coup d 'œil à cet exemple d'URP. Il convient de noter que la réflexion planaire est plus coûteuse en termes de calcul que l'utilisation de sondes de réflexion, car elle rend les objets deux fois.

Pour obtenir l'effet de mousse sur les bords, vous devez calculer les différences de profondeur. L 'option Linear01 du nœud de profondeur de la scène renvoie une valeur de profondeur linéaire échelonnée de 0 à 1 pour les objets opaques. En multipliant cette valeur par la distance du plan éloigné de la caméra, vous pouvez déterminer la distance entre la caméra et l'objet opaque - le rocher, dans le cas présent. La composante z de l'option Raw dans le nœud de position de l'écran fournit la profondeur de l'espace oculaire. Vous pouvez alors calculer facilement la différence de profondeur entre la surface transparente de l'eau et la roche opaque, et passer la valeur de profondeur dans la sortie Emission pour créer un effet de mousse.

Afin de récupérer les valeurs de profondeur de la scène, assurez-vous d'activer la texture de profondeur dans les paramètres du projet. L'option Depth Texture se trouve dans la section General de l'actif du pipeline de rendu. L'actif actuel du pipeline de rendu est accessible via Edit > Project Setting > Graphics > Render Pipeline Asset ( Édition > Paramètres du projet > Graphiques > Actif du pipeline de rendu).

La création des pistes, qui montrent le mouvement de l'eau le long du cours d'eau, est simple. En posant des tuiles et en décalant deux nœuds de Voronoï et en masquant les zones souhaitées à l'aide de couleurs de vertex, vous pouvez créer des traînées d'eau stylisées qui s'écoulent le long de la surface de l'eau. Ajustez ensuite la vitesse du nœud de bruit pour qu'elle corresponde à celle de la chute d'eau précédente. Vous avez maintenant des traces d'eau stylisées qui s'écoulent à travers la surface de l'eau. Cette technique est très similaire à celle utilisée pour créer les lignes de courant de la cascade.

Passons maintenant à la vitesse supérieure et examinons un shader moins stylisé et plus réaliste. Le shader de sable se trouve dans une scène de désert réaliste, ce qui nécessite que le terrain soit très proche visuellement du sable réel.

Le rendu de sable est un défi intéressant. Un simple nuanceur PBR ne permet pas de reproduire l'aspect du sable du désert sous un soleil intense. Il y a deux caractéristiques principales à couvrir dans l'ombre de sable : le scintillement du sable, qui est un aspect subtil mais remarquable, et la poussière soufflante, une caractéristique dynamique qui ajoute de la vivacité.

Le sable étant composé d'innombrables petits grains, il scintille lorsqu'il est exposé à la lumière du soleil. Comment obtenir cet effet pailleté ? Comme pour la réflexion spéculaire, calculez d'abord le vecteur de réflexion à l'aide de la normale de la surface. S'inspirer de Voyageau lieu de calculer le produit de points entre le vecteur normal et le vecteur médian, on calcule le produit de points entre la normale et la direction de la vue. Ce réglage garantit que le motif des paillettes varie en fonction des angles de vue, ce qui améliore l'attrait visuel de l'ombrage.

Vous avez deux cartes de bruit dans le nuanceur. L'un est utilisé pour échantillonner les scintillements et l'autre pour masquer la texture de bruit principale afin d'obtenir un résultat plus dynamique et captivant. Utiliser le vecteur de réflexion calculé précédemment pour déformer l'UV utilisé pour l'échantillonnage du masque de bruit.

L'effet de sable soufflant est une combinaison de deux éléments : des traînées de sable en mouvement et des vagues de sable. Le concept est assez simple. Vous mettez en place différentes cartes de normalité pour obtenir le résultat souhaité. Pour les pistes de sable, il est essentiel d'utiliser un masque pour masquer la carte de normalité et rendre l'effet plus dynamique. Au lieu d'utiliser l'UV par défaut, échantillonnez deux cartes de bruit avec la position absolue du monde.

Il convient de noter que l'option Monde du nœud de position change en fonction des paramètres des différents pipelines de rendu. Sélectionnez donc l'option Monde absolu pour éviter tout changement de comportement lorsque vous changez de pipeline. Ensuite, vous pouvez carreler les deux cartes en diagonale, ce qui créera un effet d'ondulation. Faites ensuite défiler une autre carte de bruit le long de la direction de la vague de sable pour ajouter à la sensation de sable qui se déplace.

Un aspect important est la manière de réaliser le mélange normal dans l'ombre. Sur un terrain de sable, où la carte d'albédo peut ne pas être aussi complexe que sur d'autres terrains, les normales jouent un rôle important dans l'apparence visuelle. Mélange de plusieurs cartes normales dans le nuanceur. Contrairement au mélange des cartes d'albédo, les cartes normales enregistrent les directions, et différentes méthodes de mélange peuvent donner des résultats très différents.

Prenons l'exemple du nœud Normal Blend dans le Shader Graph. Lors du mélange des cartes de normales A et B, l'option par défaut du nœud Mélange de normales ajoute les canaux x et y des deux cartes, tout en multipliant les canaux z pour obtenir le troisième élément de la normale mélangée. L'option réorientée, comme son nom l'indique, implique un processus plus complexe. Elle fait pivoter les normales de la carte B pour les aligner sur la direction de la carte A. Cette approche permet de conserver le plus grand nombre de données des deux cartes, mais c'est aussi l'option la plus coûteuse en termes de calcul.

Dans notre nuanceur, nous avons opté pour une méthode de mélange simple pour les normales. La principale raison de mélanger les normales est de créer une sensation vivante de sable soufflant ou se déplaçant à la surface du désert. La précision n'est pas la priorité absolue. En outre, le shader est appliqué à un maillage de terrain relativement important, de sorte qu'il est important de minimiser les coûts de calcul.

Compte tenu de ces facteurs, voici une approche simple : Additionnez les canaux rouge et vert des cartes normales et, pour le canal bleu, passez une valeur de 1. Il suffit ensuite d'augmenter légèrement l'intensité de la force normale pour obtenir un résultat très satisfaisant.

En plus des caractéristiques mentionnées, il existe d'autres contrôles mis en œuvre dans le nuanceur. L'une d'entre elles est un contrôle général de l'évanouissement, qui détermine où les effets apparaissent sur le terrain en fonction de la distance de la caméra. Cela permet une transition progressive et un affaiblissement des effets au fur et à mesure que la caméra s'éloigne.

Vous pouvez également ajuster la valeur d'adoucissement dans la distance, ce qui permet d'obtenir un meilleur mélange des dunes de sable et du terrain d'arrière-plan. Au fur et à mesure que l'observateur zoome, une carte de normalité de grain détaillée remplace les normales du terrain. Cette substitution offre une expérience plus réaliste du désert, en ajoutant des détails et des textures plus fins à la surface du sable.

Maintenant que vous avez parcouru toutes les fonctionnalités de chacun de ces deux shaders, n'hésitez pas à créer vos propres versions. Si vous êtes passionné par la création de shaders avec Shader Graph, rejoignez notre forum ou retrouvez-nous sur Discord. Ne manquez pas les prochaines analyses techniques des développeurs Unity dans le cadre de la série permanente Tech from the Trenches.