Création d'un effet de sommet interactif à l'aide de Shader Graph

Nous avons créé un exemple d'effet de déplacement de vertex interactif avec Shader Graph et Lightweight Render Pipeline pour vous aider à utiliser ces fonctionnalités dans la conception d'effets. Ce billet vous guidera à travers notre processus. Obtenez le projet de démonstration avec le shader Shader Graph, la scène d'exemple et quelques exemples de matériel de jeu du kit de jeu 3D, et suivez le mouvement !

La sphère dans l'exemple vidéo ci-dessous a un effet de déplacement basé sur un shader qui s'active lorsque nous appuyons sur la barre d'espacement. Dans votre jeu, vous l'attribuerez à un événement de jeu pertinent. Dans cet article, nous verrons comment créer ce shader à l'aide du package Shader Graph, et comment intégrer le déclencheur de la barre d'espacement. L'objectif est de vous aider à comprendre comment concevoir des effets dans Shader Graph et interagir avec eux à partir de vos autres scripts C#. Le projet de démonstration contient le nuanceur, le script qui contrôle le nuanceur, un actif LWRP (Lightweight Scriptable Render Pipeline) préconfiguré et une scène d'exemple pour commencer. Si vous préférez voir ce tutoriel en vidéo plutôt qu'en texte, vous pouvez le trouver sur la chaîne YouTube d'Unity.

Tout d'abord, voyons comment configurer le Shader Graph et le Lightweight Render Pipeline. Ouvrez le gestionnaire de paquets et sélectionnez installer sur le paquet Lightweight RP. Cela installera automatiquement la bonne version de Shader Graph.

Une fois que nous avons installé Lightweight RP, nous devons créer une nouvelle ressource Pipeline dans le projet. Sélectionnez Créer->Rendu->Lightweight Render Pipeline Asset.

Nous pouvons ensuite activer ce pipeline en allant dans Édition->Paramètres du projet->Graphiques, et en faisant glisser le LightweightRenderPipelineAsset dans le champ Scriptable Render Pipeline Settings (Paramètres du pipeline de rendu scriptable). Si vous suivez les actifs téléchargés, cette étape a déjà été réalisée pour vous.

Maintenant que le Lightweight Render Pipeline est installé, nous pouvons créer un nouveau Shader Graph. Créons un nouveau graphique dans notre projet en sélectionnant Create->Shader->PBR Graph. Le graphique PBR nous permet de créer un nouveau shader qui prend en compte les données du système de rendu physique de Unity, de sorte que notre shader puisse utiliser des fonctions telles que les ombres et les réflexions. Une fois ce shader créé, nous l'ajoutons à un nouveau matériau et l'attachons à une sphère dans notre scène d'exemple en glissant-déposant le matériau sur la sphère.

Pour obtenir cet effet, nous déplacerons les sommets de notre maillage le long de ses normales en modifiant la position de sortie dans le nœud de sortie PBR Master. Nous allons déplacer en utilisant un nœud Add sur la position de l'objet de base de chaque sommet. En ajoutant le vecteur normal à la position de l'objet de base, nous pouvons voir que tous les sommets sont extrudés, ce qui fait paraître la sphère plus grande. Pour faire varier ce déplacement, nous allons multiplier ce déplacement vectoriel normal de manière semi-aléatoire en utilisant un nœud Simple Noise.

Lorsque nous cliquons sur Enregistrer l'actif, nous pouvons voir dans la vue de la scène que la sphère est maintenant déplacée en fonction du bruit simple.

Malheureusement, il y a des joints dans le déplacement parce que le bruit simple est échantillonné sur la base de l'espace UV. Pour corriger les coutures en utilisant l'espace objet pour le bruit simple au lieu de l'espace UV, nous pouvons simplement ajouter un nœud Position réglé sur Object.

Pour créer l'effet de pulsation, nous ferons défiler cette sortie Position en l'ajoutant à un nœud Time, avant de l'envoyer au nœud Simple Noise. Nous pouvons également utiliser une multiplication avec le nœud Time pour faire varier la vitesse du défilement.

Pour contrôler notre déplacement, nous exposons une nouvelle propriété de nuanceur dans notre graphique de nuanceur. Les propriétés du shader nous permettent de fournir des entrées à notre shader via des valeurs saisies dans l'inspecteur ou via nos propres scripts C#, comme dans le cas présent. Nous allons créer une nouvelle propriété Vector1 nommée Amount et changer la référence en _Amount. Le champ de référence est le nom de la chaîne par laquelle nous accèderons et modifierons le déplacement par le biais du script. Si nous ne modifions pas cette valeur, elle sera générée automatiquement. Si la chaîne ne correspond pas exactement, nous ne pourrons pas nous adresser à notre bien par l'intermédiaire d'un script.

Nous utilisons cette propriété de l'ombrage de quantité dans un nœud de multiplication avec le bruit simple avant qu'il ne soit multiplié par le vecteur normal. Cela nous permet de mettre à l'échelle le bruit avant qu'il ne soit appliqué aux positions des vertex. La variable Amount permet de contrôler le déplacement de chaque sommet du maillage.

Pour contrôler cette variable Montant, nous avons créé un script C# appelé DisplacementControl et l'avons attaché à l'objet de jeu DisplacementSphere. Ce script contrôle la variable _Amount en interagissant avec la propriété que nous avons créée dans notre matériau et qui est assignée au composant MeshRenderer. Nous stockons une référence au composant MeshRenderer dans la variable meshRender et déclarons une nouvelle variable float displacementAmount.

Nous utilisons un simple lerp dans la fonction Update pour interpoler la variable displacementAmount à la valeur 0. Nous fixons ensuite la variable _Amount du shader à la valeur stockée dans la variable displacementAmount. Cela mettra à jour la variable _Amount du graphique des ombres, en la lissant dans le temps jusqu'à 0.

Nous utilisons l'axe d'entrée "Jump" par défaut de Unity (qui est assigné à la barre d'espacement par défaut) pour définir la valeur de displacementAmount à 1 lorsqu'il est pressé.

Maintenant, lorsque nous entrons en mode lecture dans la scène, nous pouvons voir qu'en appuyant sur la barre d'espacement, displacementAmount prend la valeur 1, puis revient lentement à 0 par interpolation.

Pour créer l'effet de lueur réglable, nous allons utiliser l'émission dans le nœud PBR Master. Nous utilisons un nœud de bruit de Voronoï et le multiplions par un nœud de couleur. Cela créera une petite modulation dans l'effet de lueur avec quelques points sombres. Ensuite, nous utilisons un nœud Lerp avec un autre nœud Color comme couleur de base, et nous utilisons la variable Amount dans l'entrée T. Cela nous permettra d'effectuer un mélange entre un nœud de couleur de base et le nœud de couleur du bruit de Voronoï à l'aide de la variable Amount.

Ensuite, nous ferons défiler l'éclat en utilisant une configuration similaire à la précédente. Nous utilisons un nœud Position défini sur Object et l'ajoutons à un nœud Time, puis nous connectons la sortie à l'emplacement UV de notre nœud Voronoi Noise.