Logo Makeyourgame
Accueil Les formations Créer un jeu Les ateliers Les tutoriels Blog
Logo Makeyourgame
Les formations Les financements Les exercices La certification Unity
Logo Makeyourgame
Mes objectifs Les jeux Les ressources Le glossaire
Logo Makeyourgame
Les tutos Youtube Les tutos Accompagnement Audio Documentation Godot Engine Graphisme 2D Graphisme 3D Langage C# Mini-Exercices Unity Web Phaser NoCode

Transition de texture avec le Shader Graphe de Unity - part2 : Unity

pictureProfil_alto
Ecrit par alto
Catégorie Unity
Mis à jour le 26/01/2021
Transition de texture avec le Shader Graphe de Unity - part2

Finalisation avec le Shader Graphe du shader de transition de textures.

10 min Intermédiaire

Lors de la première partie, nous avions posé les bases du shader permettant une transition de textures. 

Nous allons désormais finir le shader tout en ajoutant un script C# dans Unity, nous permettant de gérer la transition au runtime.

Pré-requis: Bases de l'utilisation de Unity . Bases du Shader Graphe (Playlist dans le bas de la page en suivant le dernier lien). Bases du C# . Utilisation des Coroutines .

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadergraphetutothumb-5ff78c18d2957.gif

Ne poursuivez pas plus loin sans avoir au préalable suivi la première partie de ce tutoriel https://makeyourgame.fun/sceditor/emoticons/angel.png En effet dans cette partie nous allons repartir du shader construit lors de la partie 1.

Depuis la première partie nous avions résumé notre effet de transition de texture en 3 étapes:

  • Disposer de 2 textures et pouvoir en changer - step 1
  • Utiliser un paramètre pour piloter le changement de Texture (0 à 100%) - step 2
  • Ajouter du bruit pour rendre le changement moins abrupte - step 3
Les étapes (steps) 1 et 2, nous ont permis de s'assurer que le shader crée fonctionne correctement. Nous pouvons donc passer d'une texture à l'autre grâce au paramètre transitionCoeff, ou plus exactement grâce à la propriété du shader.

Mais le résultat visuel n'est pas encore très abouti, car il nous manque l'étape 3, celle de l'ajout de bruit !

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadertransition50resultscratch-6009fb0373d17.png

En effet, avec la propriété transitionCoeff à 0.5f (cf capture ci-dessus), on a bien le mix des textures, mais l'effet désiré n'est pas atteint.

Ajouter un noeud Noise

Passez en édition le shader avec le Shader Graphe, et ajoutez un Simple Noise Node.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shaderaddnoise-6009fc04e5665.png

Puis connectez maintenant le noeud de la propriété transitionCoeff avec le noeud noise , à l'aide d'un autre noeud Add . Le tout sera connecté au slot T du noeud LERP ... là où avant il n'y avait que le noeud de la propriété. La capture ci-dessus indique le Shader Graphe après les ajouts et connections.

L'idée derrière tout cela, c'est que le coefficient de transition (pouvant aller de 0 à 1) soit mixé avec des valeurs de bruits, afin d'avoir une répartition non uniforme de la seconde texture lors de la transition.

Malheureusement certaines valeurs sont trop fortes et nous obtenons au final de la saturation de valeur (cf capture c-dessous)... coupant tout espoir d'y voir clair sur l'effet de l'ajout de notre noeud Noise.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadervaluesaturation-6009fdea7c176.png

Ajoutons alors un noeud Clamp après le noeud Add, permettant de limiter les valeurs finales entre 0 et 1, évitant ainsi la saturation.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shaderclampvalue-6009ff204839b.png

Sauvez le shader et observez dans la scène, lorsque vous changez la valeur du transitionCoeff, que la transition de texture a bien lieu.

De plus vous avez sûrement remarqué que maintenant notre effet commence à bien prendre forme  https://makeyourgame.fun/sceditor/emoticons/smile.png . En effet non seulement nous avons bien le mix des textures, mais en plus il ya des zones ou la seconde texture (vert) est complètement absente .. c'est là l'effet de notre noeud noise.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadercorrectnoiseresult-6009fffdd8655.png

On progresse !

Pour autant on peut encore améliorer l'effet afin de donner plus d'intensité à la seconde texture lors de la transition.

Remaper les valeurs du bruit

En effet la seconde texture est trop transparente. Nous allons donc remaper les valeurs de sorties du noeud noise.

Ajoutez donc un noeud remap entre le noeud Simple Noise et le noeud Add.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadergrapheunityfinalcorrectintensityremap-600a028f383f4.png

Comme vous pouvez le voir sur la capture ci-dessous, en remapant les valeurs, on obtient un résultat plus tranché. Les textures ne sont plus vraiment mixées, mais plutôt en mode on/off. Le noise, lui, permet de répartir les zones de manière aléatoire et plus naturelle.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shaderfinalresult-600a03b3d79ef.png

N'hésitez pas à jouer avec les paramètres pour atteindre l'effet visuel désiré.

Le shader est désormais terminé, passons maintenant au script C# pour contrôler l'effet de transition au runtime.

Au final vous devriez avoir le Shader Graphe suivant.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadertransitiontexturesfinalshadergraphe-600a045e2a9df.png

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadergraphetransitionfinalresultpart2-600a05860ca22.gif

Coder la transition de textures en C#

Le principe est très simple en réalité, car il suffit d'indiquer par script les nouvelles valeurs de propriétés de la texture, ou plus exactement de son shader. Et ici la seule propriété qui nous intéresse, c'est transitionCoeff.

Créez un script C# ...

Asset -> Clic droit - > Create C# script

Nommez le par exemple TransitionPrinciple, et donnez le à un GameObject de votre scène, comme le cube de la première partie  https://makeyourgame.fun/sceditor/emoticons/wink.png  . Ce cube possède en effet déjà le material (avec son shader associé) sur lequel nous travaillons.

Le plan d'attaque

Afin de pouvoir changer dynamiquement les valeurs des propriétés du shader, nous devons avoir une instance du composant Renderer du GameObject (ie notre cube). Il suffira alors d'utiliser la méthode MaterialPropertyBlock.SetFloat("popertyName",value):

mpb.SetFloat ("_transitionCoeff", transitionCoeff);

La valeur sera alors mise à jour au niveau du shader lorsque nous lui passerons le composant MaterialPropertyBlock, définissant les propriétés du Material (ie shader) à utiliser.

renderer.SetPropertyBlock (mpb);
Un tutoriel dédié est en cours de préparation sur l'utilisation du composant MaterialPropertyBlock. Cela vous permettra d'affiner votre compréhension, mais aussi de comprendre pourquoi nous utilisons ce composant ici  https://makeyourgame.fun/sceditor/emoticons/tongue.png

Concernant l'évolution automatique de la valeur de la propriété transitionCoeff, nous allons utiliser ici une coroutine , permettant de passer progressivement d'une texture à l'autre selon le temps qui s'écoule.

IEnumerator launchTransition () {
            startTime = Time.time;
            effectOn = true;
            Debug.Log ("Start coroutine ");
            while (effectOn) {
                //increment transitionCoeff
                transitionCoeff += deltaInc;

                //clamp final value
                transitionCoeff = Mathf.Clamp (transitionCoeff, -10f, 10f);

                //change the Material properties
                renderer.GetPropertyBlock (mpb);
                mpb.SetFloat ("_transitionCoeff", transitionCoeff);
                renderer.SetPropertyBlock (mpb);

                //need to stop effect ?
                if ((Time.time - startTime) > effectDuration) {
                    effectOn = false;
                }

                yield return new WaitForSeconds (0.1f);
            }
            Debug.Log ("End coroutine ");
        }

Le script nouvellement crée possèdera alors les variables de classe principales suivantes:

  • effectDuration : temps de l'effet de transition en secondes
  • effectOn: booléen permettant de savoir si l'effet est activé ou non
  • deltaInc: le paramètre d'incrémentation
  • transitionCoeff: le fameux paramètre permettant de changer la valeur de la propriété du shader
[Range (-10f, 10f)]   
[SerializeField] float transitionCoeff;
[SerializeField] float effectDuration = 2f;    
[SerializeField] bool effectOn;    
[SerializeField] float deltaInc = 1f;

Ce seront les paramètres de ce script. Cela nous permettra d'affiner l'effet de transition sans devoir toucher directement les paramètres de la Texture.

Pour finir et afin de tester notre script, nous allons ajouter un input clavier, permettant de lancer la coroutine launchTransition

void Update () {
            if (Input.GetKeyDown (KeyCode.Space)) {
                Debug.Log ("space (increment): " + transitionCoeff);
                //launch Effect
                StartCoroutine (launchTransition (true));
            }
        }

Ainsi la boucle est bouclée : un input touche espace qui déclenche l'effet ... la coroutine se lance et incrémente progressivement la valeur de transitionCoeff. A chaque incrémentation le shader est mis à jour, assurant une transition au runtime.

Implémentation et test de l'effet de transition

Mettons tous les ingrédients ensemble !

Voici le script complet qui doit être placé sur chaque GameObject de votre scène à qui vous souhaitez donner cet effet de transition de textures.

Pensez bien aussi à donner le Material (avec le shader associé) à votre GameObject !
public class TransitionPrinciple : MonoBehaviour {

        [SerializeField] private Renderer renderer;
        [SerializeField] private MaterialPropertyBlock mpb;

        [Range (-10f, 10f)]
        [SerializeField] float transitionCoeff;

        [SerializeField] float effectDuration = 2f;
        [SerializeField] bool effectOn;
        [SerializeField] float deltaInc = 1f;

        //public for debug
        public float startTime;

        void OnEnable () {
            renderer = GetComponent<Renderer> ();
            mpb = new MaterialPropertyBlock ();
        }
        void Update () {
            if (Input.GetKeyDown (KeyCode.Space)) {
                Debug.Log ("space (increment): " + transitionCoeff);
                //launch Effect
                StartCoroutine (launchTransition ());
            }
        }

        IEnumerator launchTransition () {
            startTime = Time.time;
            effectOn = true;
            Debug.Log ("Start coroutine ");
            while (effectOn) {
                //increment transitionCoeff
                transitionCoeff += deltaInc;

                //clamp final value
                transitionCoeff = Mathf.Clamp (transitionCoeff, -10f, 10f);

                //change the Material properties
                renderer.GetPropertyBlock (mpb);
                mpb.SetFloat ("_transitionCoeff", transitionCoeff);
                renderer.SetPropertyBlock (mpb);

                //need to stop effect ?
                if ((Time.time - startTime) > effectDuration) {
                    effectOn = false;
                }

                yield return new WaitForSeconds (0.1f);
            }
            Debug.Log ("End coroutine ");
        }

    }

Notez bien que, dans le script, le nom de la propriété est "_transitionCoeff", or dans notre shader graphe, ce n'est pas son nom ... En effet pour le shader, la propriété se nomme "Vector1_4D4B30CC" !

Si on ne fait rien, le script tentera de mettre à jour une propriété qui n'existe pas au niveau de notre shader.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadertranstionbadname-600a107584396.png

Changez donc pour le bon nom !

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadertranstiongoodname-600a10ae0620e.png

Il ne reste plus qu'a tester la scène pour pouvoir profiter, en appuyant sur la touche espace, de l'effet de transition de textures.

https://makeyourgame.fun/upload/users/alto/tutoriels/Shadergraphe/shadertransitioneffectonfin-600a115e74ca1.png

Si vous avez bien tout suivi, vous devriez observer la transition se faire ... 

N'hésitez pas à jouer avec les paramètres pour obtenir l'effet désiré.

Pour finir vous pouvez retrouver la vidéo associée sur youtube

Nous voici arrivés au terme de ce tutoriel sur la création d'un shader, permettant un effet de transition progressive de textures.

Si vous souhaitez encore plus de contenus sur l'utilisation du Shader Graphe avec Unity, votez et clapez le tutoriel (connexion requise).

Vues: 787

Licence:



Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner de l'expérience (XP) !

Vous aimerez aussi...

Blog et Tutoriels