L'art qui bouge : Créer des matériaux animés avec Shader Graph
Dans Unity 2018.2, nous avons ajouté l'entrée "Vertex Position" au Shader Graph, ce qui vous permet d'ajuster et d'animer vos maillages. Dans cet article, je vous montrerai comment créer vos propres vertex animation shaders, et je vous donnerai quelques exemples courants tels qu'un shader de vent et un shader d'eau.
Si vous ne connaissez pas encore Shader Graph, vous pouvez lire l'article de blog de Tim Cooper pour en apprendre davantage sur les principales fonctionnalités ou regarder la présentation d'Andy Touch "Shader Graph Introduction" sur la chaîne YouTube d'Unity.
Cette scène n'utilise pas de textures ou de ressources d'animation ; tout ce que vous voyez est coloré et animé à l'aide de Shader Graph.
Les shaders sont un aspect incroyablement puissant du pipeline de rendu, permettant un grand degré de contrôle sur la façon dont les éléments de la scène sont affichés. À l'aide d'une série d'entrées et d'opérations, nous pouvons créer des shaders qui modifient les diverses propriétés de rendu de nos ressources, telles que la couleur et la texture de leur surface, et même la position des vertex du maillage. Vous pouvez également combiner tous ces éléments pour créer des animations complexes et riches. Cet article de blog montrera comment vous pouvez commencer avec les animations de vertex, introduira le concept d'utilisation des masques et des propriétés, et terminera en expliquant comment nous avons créé les shaders pour la scène de l'île du Désert.
Cloner le dépôt de GitHub ou Télécharger .Zip depuis GitHub
Téléchargez le projet d'exemple Desert Island Scene pour commencer à expérimenter et à interagir avec les shaders vous-même ! Ce projet contient tout ce dont vous avez besoin pour commencer à utiliser Shader Graph. Assurez-vous de lancer le projet en utilisant la version 2018.2 ou supérieure de Unity.
Chaque nuanceur de la Scène de l'île déserte a été conçu dans un souci de personnalisation, alors n'hésitez pas à jouer avec les valeurs des nuanceurs dans l'inspecteur ! Chaque objet dispose également d'un fichier de préréglage qui rétablit les valeurs par défaut.
Ce travail est placé sous la licence Creative Commons Attribution 4.0 International License.
Pour pouvoir utiliser Shader Graph, votre projet doit remplir les conditions suivantes :
- Fonctionne avec la version 2018.2 ou supérieure de Unity.
- Utilisation des nouveaux pipelines de rendu Lightweight ou High Definition (LWRP est suggéré pour l'expérimentation en raison des temps de compilation plus rapides).
- Le paquet Shader Graph doit être installé dans le gestionnaire de paquets.
Pour installer Shader Graph, créez ou mettez à jour un projet à la version 2018.2 ou supérieure, naviguez vers Fenêtre > Gestionnaire de paquets > Tous, trouvez Shader Graph dans la liste et cliquez sur installer.
Si vos matériaux ne s'animent pas dans la vue de la scène, assurez-vous que l'option Matériaux animés est cochée :
Faire quelque chose de fantaisiste avec Shader Graph ?
Vous pouvez prévisualiser les matériaux animés en cliquant sur la petite image déroulante en haut à gauche de la vue de la scène.
#UnityTips #Unity3D
Avant de commencer à utiliser des mathématiques sophistiquées pour déplacer des objets, nous devons comprendre ce que nous déplaçons.
Une maille de la scène comporte quatre types d'espaces :
- Objet : Position du sommet par rapport au pivot du maillage.
- Vue : Position du sommet par rapport à la caméra.
- Le monde : Position du sommet par rapport à l'origine du monde.
- Tangent : Traite certains cas d'utilisation particuliers, tels que l'éclairage par pixel.
Vous pouvez sélectionner l'espace que vous souhaitez affecter dans le menu déroulant du nœud Position.
En utilisant le nœud de division, nous pouvons sélectionner l'axe que nous voulons affecter.
Le nœud Split produit des sorties sur quatre canaux, les trois premiers correspondant à notre axe de transformation (R=X, G=Y, B=Z). Dans l'exemple ci-dessus, j'ai divisé l'axe des y de l'objet et j'ai ajouté 1, déplaçant ainsi notre objet de 1 sur son propre axe.
Il peut arriver que vous souhaitiez déplacer l'objet dans l'espace mondial. Pour ce faire, sélectionnez Monde dans le nœud Position, puis reconvertissez la sortie dans l'espace objet à l'aide du nœud Transformation.
Maintenant que nous savons comment déplacer un Mesh, il est souvent utile de savoir comment en limiter l'effet.
En utilisant des nœuds tels que Lerp, nous pouvons mélanger deux valeurs. L'entrée T est la valeur de contrôle pour le Lerp. Lorsque notre entrée T est à 0 (visualisée en noir), le canal A est utilisé. Lorsque notre entrée est 1 (représentée par le blanc), le canal B est utilisé. Dans l'exemple ci-dessous, le curseur est utilisé pour mélanger les deux entrées. L'un des exemples suivants peut être utilisé à la place du curseur.
Avec une texture en noir et blanc, nous pouvons utiliser des formes détaillées pour pousser notre Mesh. Dans l'exemple ci-dessus, vous pouvez voir que le blanc représente la hauteur maximale de notre gamme, tandis que le noir n'a aucun effet sur la position du maillage. En effet, les Noirs ont la valeur numérique 0, et le fait d'ajouter 0 à la position de la maille ne la fait pas bouger.
Pour utiliser une texture avec position de vertex, vous devez utiliser le nœud Sample Texture 2D LOD au lieu du nœud Sample Texture 2D typique. Les textures sont particulièrement utiles si vous avez besoin d'un masque ayant une forme unique ou un certain degré d'affaiblissement.
Semblable à un masque de texture, le masque UV permet de choisir la partie du maillage que l'on souhaite affecter en fonction de l'enveloppe UV. Dans la capture d'écran ci-dessus, j'utilise l'axe u de l'UV pour créer un dégradé de gauche à droite. Pour décaler le gradient, utilisez un nœud Ajouter; pour augmenter la force, utilisez un nœud Multiplier; et pour augmenter la chute, utilisez un nœud Puissance.
Chaque sommet stocke une unité d'information Vector3 que nous appelons couleur du sommet. En utilisant le package Poly Brush, nous pouvons directement peindre les couleurs des vertex dans l'éditeur. Vous pouvez également utiliser un logiciel de modélisation 3D (tel que 3ds Max, Maya, Blender, 3D Coat ou Modo) pour attribuer des couleurs aux vertex. Il convient de noter que, par défaut, la plupart des logiciels de modélisation 3D exportent les modèles avec la valeur maximale de RVB attribuée à chaque sommet.
Dans la capture d'écran ci-dessus, le nœud Vertex Colour est divisé en canal rouge(R), puis connecté au canal T du nœud Lerp, agissant comme un masque. Le canal A du nœud Lerp est utilisé lorsque l'entrée est 0, le canal B étant utilisé lorsque l'entrée est 1. En pratique, la configuration ci-dessus n'ajoutera 1 à l'axe des ordonnées que si les sommets ont la couleur rouge.
En utilisant le nœud Normal Vector, nous pouvons masquer une entrée en fonction de l'orientation des faces du maillage. Là encore, le nœud Split nous permet de sélectionner l'axe que nous souhaitons affecter (R=X, G=Y, B=Z). Dans la capture d'écran ci-dessus, je masque en utilisant l'axe des y, de sorte que seules les faces orientées vers le haut sont positives. Il est important d'utiliser un nœud Clamp pour écarter toutes les valeurs qui ne sont pas comprises entre 0 et 1.
Cette série de nœuds masque une entrée si la position de l'objet est supérieure à la position mondiale 0 sur l'axe des y.
Lors de la construction de shaders, il peut être difficile d'obtenir les valeurs d'entrée correctes pour l'effet désiré. Pour cette raison, et pour une personnalisation ultérieure avec des préfabriqués et des préréglages, il est important d'utiliser des propriétés.
Les propriétés permettent de modifier les valeurs du nuanceur après sa compilation. Pour créer une propriété, cliquez sur le symbole + dans le tableau noir (illustration de droite). Il existe six types de propriétés :
- Vecteurs (1 à 4) : Une chaîne de valeurs, avec l'option d'un curseur pour Vector1.
- Couleur : Valeurs RVB avec un sélecteur de couleurs, et une version HDR optionnelle.
- Texture2D (et tableau Texture2D) : Un échantillon de texture 2D
- Texture 3D : Un échantillon de texture en 3D
- Cubemap : Un exemple de Cubemap généré
- Booléen : Une option de désactivation ou d'activation. Équivalent à 0 ou 1.
Le shader du drapeau applique une onde sinusoïdale dans l'espace objet sur le drapeau, en utilisant un masque UV pour maintenir le côté gauche immobile.
Un masque UV inversé puis multiplié par lui-même pour créer un dégradé lisse sur l'axe des ordonnées. Il est utilisé pour plier le centre du drapeau en l'éloignant de la rame.
Une onde sinusoïdale est générée dans l'espace objet, avec des propriétés permettant de contrôler l'amplitude, la fréquence et la vitesse de l'onde. La vague est masquée par un masque UV sur l'axe des x afin que le côté gauche du drapeau reste immobile.
En envoyant un bruit de gradient dans une fonction Step, puis dans le seuil du clip Alpha, nous pouvons éliminer certains pixels pour déchirer le drapeau.
Le nuanceur de vent utilise le bruit de gradient de l 'espace mondial sur un seul axe pour pousser et tirer doucement les feuilles et l'herbe.
En utilisant la position du monde, nous plaçons un bruit de gradient sur l'axe des y et l'axe des x. En utilisant un Vector2, nous pouvons contrôler la vitesse et la direction à laquelle il est décalé.
Les propriétés sont utilisées pour contrôler la densité et la force du décalage. La soustraction de 0,5 du bruit de gradient permet de s'assurer que la maille est poussée et tirée de manière égale.
Un masque UV est utilisé pour maintenir la base des feuilles et de l'herbe immobile. Enfin, un nœud de transformation est utilisé pour convertir la position du monde en position de l'objet.
Avec ce shader, nous calculons la distance entre la caméra et la palourde, puis nous l'utilisons comme masque pour faire pivoter la moitié supérieure.
En saisissant la position du GameObject et la position de la caméra dans le nœud Distance, nous pouvons créer un masque. Le nœud One Minus inverse la distance de manière à ce que nous ayons une valeur positive lorsque nous sommes proches de la palourde. Le nœud Clamp rejette toutes les valeurs supérieures à 1 et inférieures à 0.
Ce masque UV ne fait tourner que le sommet de la palourde, mais dans la plupart des cas, un masque de couleur vertex serait plus simple et plus souple.
Un nœud Lerp est utilisé pour faire la distinction entre la fermeture et l'ouverture de la palourde. La rotation est appliquée à l'axe y et à l'axe z de l'objet de jeu. Rotation autour de l'axe des x.
Dans ce shader, nous utilisons une onde sinusoïdale générée sur l'axe de l'objet pour faire osciller le poisson. Nous masquons ensuite la tête du poisson, de manière à ce qu'elle reste immobile.
Générer une onde sinusoïdale dans l'espace objet le long des axes y et z, avec des propriétés contrôlant la fréquence et la vitesse de l'onde.
Comme nous utilisons à la fois l'axe des x et l'axe des y, le poisson oscille sur sa largeur et sur sa hauteur.
Multipliez la sortie de l'onde sinusoïdale pour contrôler l'amplitude, la distance et la force de l'oscillation, et ajoutez-la à l'axe x de l'objet.
Utilisez un nœud Lerp pour masquer l'avant du poisson en utilisant l'axe x du canal UV. En utilisant un nœud Power avec une propriété, nous pouvons repousser l'effet d'oscillation à l'arrière du poisson.
Enfin, nous avons le shader océanique ! Ce nuanceur décale le haut du maillage à l'aide de trois ondes sinusoïdales d'échelles et d'angles différents. Ces ondes sinusoïdales sont également utilisées pour générer les couleurs des creux et des pointes des vagues.
Trois ondes sinusoïdales distinctes sont générées dans l'espace mondial, chacune utilisant des propriétés pour contrôler l'amplitude, la fréquence, la vitesse, la convergence et la rotation des ondes.
Les trois ondes sinusoïdales sont ensuite combinées avec deux nœuds Add, et multipliées par un gradient à l'échelle mondiale pour briser la hauteur des pointes d'onde. Ensuite, les ondes combinées sont ajoutées à la position de l'objet.
Deux masques de vertex sont utilisés pour limiter les vagues au sommet du dôme, puis pour les repousser vers le bas lorsque l'écume est peinte.
En séparant les axes x et z, nous générons des ondes dans deux directions. Les deux multiplicateurs sont utilisés pour définir l'influence de chaque vague. Par exemple, en multipliant le canal Z par 0, on obtient une onde sinusoïdale exclusivement sur l'axe des x.
En divisant un nœud de position mondiale en axes x et z, puis en les combinant dans un Vector2, on obtient un espace UV dans l'espace mondial. Cela permet d'orienter l'aplat de bruit de gradient à travers le monde. En ajoutant cette sortie au temps, nous décalons les ondes sinusoïdales, ce qui contribue à briser les lignes droites.
Le nœud Sinus utilise l'espace et le temps du monde pour générer une simple onde sinusoïdale. Pour faire basculer l'onde, nous utilisons un nœud absolu pour inverser les valeurs négatives. Le nœud One Minus inverse ensuite ces valeurs de manière à ce que les pointes des vagues se trouvent en haut.
Si vous souhaitez savoir comment commencer à utiliser Shader Graph, la présentation d'Andy Touch à la GDC est un excellent point de départ. Si vous cherchez d'autres exemples de Shader Graph, Andy a également une bibliothèque d'exemples disponible sur GitHub.
Pour obtenir une documentation détaillée sur le Shader Graph, y compris une description de chaque nœud, consultez le wiki des développeurs du Shader Graph sur GitHub. Participez et rejoignez la conversation dans notre forum Graphics Experimental Previews! Enfin, si vous réalisez quelque chose de cool avec Shader Graph, j'aimerais bien le voir ! N'hésitez pas à me contacter sur Twitter @John_O_Really.