Dans ce workshop, nous apprendrons à intégrer les ISF dans Kinetic Designer.

ISF signifie Interactive Shader Format et est un format de fichier construit sur GLSL (OpenGL Shader Language) pour créer des générateurs ou des plugins FX multiplateformes et indépendants, qui peuvent être interconnectés à l’aide d’inputs et d’outputs.

Dans Kinetic Designer, il existe deux façons d’utiliser un ISF :

  • Comme un Fx sur une layer
  • Comme un effet autonome ou une partie d’une chaîne dans un Render Graph.

ISF en Fx sur une layer


Télécharger le shader suivant et l’ajouter au projet.

Dans le panel Media List, ouvrir l’onglet ISF et créer un nouvel ISF avec le bouton

Dans l’onglet Media, créer un média Solid.

Glisser-déposer le média Solid dans la timeline et sélectionner la layer. Ouvrir l’onglet Fx et cliquer sur le bouton pour ajouter un Fx.

Sélectionner ISF dans la fenêtre pop-up et glisser-déposer l’ISF précédemment créé depuis la Media List dans le champ shader du Fx.

Si l’ISF dispose de contrôles accessibles, ils apparaîtront sous forme de champs dans cet onglet.

Notez que le média a maintenant l’ISF appliqué. Comme le shader n’a pas de canal alpha contrôlable, il est effectivement superposé au-dessus du média.

Mettre la timeline en Play sur la layer. Notez que lorsque la timeline est en lecture, l’ISF est animé. Cela est dû au fait qu’au moins une propriété du shader utilise l’uniform TIME (variable globale) dans le GLSL qui anime le shader au fil du temps.

Cependant, cette animation n’est visible sur la layer que si la timeline est en cours de lecture. Même si le média Solid était remplacé par un fichier vidéo réglé sur Loop/Freerun avec le même shader appliqué, le shader ne s’animerait que si la timeline était en cours de lecture.

Cette méthode d’utilisation de l’ISF peut être pratique pour appliquer rapidement un effet simple via GLSL, mais elle offre un contrôle limité sur l’effet


ISF dans un FxGraph


Les Render Graphs sont spécialement conçus pour créer des effets de type shader.

Tous les nodes disponibles dans les catégories GPU_ d’un render graph sont en fait des shaders ISF intégrés au Graph Editor.

Les Render Graphs vous permettent également d’importer votre propre ISF personnalisé via le node ISF.

Créer un nouveau Render Graph dans le Graph Editor. Conserver le nom par défaut FxGraph_1.

Dans l’Explorateur Windows, dans votre dossier de show, ouvrir le sous-dossier FxGraph/FxGraph_1/ et y copier le fichier Shader.

Dans le graph FxGraph_1, créer un node ISF et charger le fichier Shader copié à l’étape précédente.

Connecter la sortie du node ISF au node Output.

Glisser-déposer le FxGraph_1 dans la timeline.

Régler la layer créée sur Loop et Freerun. Remarquez que l’effet est animé.

Si vous mettez le Render Graph sur Play, vous remarquerez que cela active également l’animation dans le Graph Editor.

Essayez d’utiliser différentes combinaisons de nodes pour modifier de manière originale le fichier shader.

Vous pouvez commencer par essayer ce qui suit comme point de départ :

Le Noise Fractal a une couleur réglée sur blanc et l’autre sur transparent. Le node Alpha Compositing est réglé sur Source In.


Outils


Vous pouvez utiliser l’éditeur ISF développé par VidVox pour créer ou prévisualiser des fichiers ISF. Il dispose également d’une fonction permettant d’importer et de transcoder automatiquement des shaders GLSL en ISF à partir de GLSLSandbox ou Shadertoy, deux plateformes de partage où vous pouvez trouver des shaders développés par d’autres personnes.


Need more help with this?
Don’t hesitate to contact us here.

Thanks for your feedback.