Introduction aux shaders HeavyM pour créer vos propres effets visuels

Introduction

Vous êtes intéressé par la création de vos propres effets visuels dans HeavyM ? Dans cet article, nous allons présenter les formidables possibilités créatives offertes par les shaders. Mais d’ailleurs, qu’est-ce qu’un shader ?

Un shader est un programme informatique exécuté par la carte graphique de votre ordinateur. Il permet de manipuler rapidement les données qui sont affichées sur votre écran ou votre vidéoprojecteur : les pixels.

Il s’agit d’une technologie méconnue car abstraite, mais les shaders sont très présents dans notre quotidien. Ces petits programmes informatiques simulent de manière réaliste des effets visuels complexes comme la pluie, le brouillard, la réflexion de la lumière, le relief des objets etc.Ils sont donc très utilisés dans les jeux vidéo, les films nécessitant des effets spéciaux, les plateaux télé… et dans l’art numérique, le domaine d’application qui nous intéresse ici.

Dans le logiciel HeavyM, les shaders intégrés proposent beaucoup de possibilités. Il est aussi possible d’importer vos propres shaders, démultipliant ainsi les combinaisons à l’infini !

Exemple de jeux vidéo utilisant des shaders : Minecraft

Exemple de jeux vidéo utilisant des shaders : Minecraft

Cartographie par projection de la performance des mines

Exemple d'un shader utiliser lors d'une performance de vidéo mapping

Partie 1 : la technologie des shaders

Pour mieux comprendre le principe des shaders, prenons comme exemple la création d’un dessin à la main. Il est alors nécessaire de dessiner un par un les éléments qui le composent. Vous allez commencer par les formes géométriques comme des cercles, des rectangles, des lignes puis vous allez ajouter des couleurs. Vous procédez donc étape par étape comme si vous aviez à recopier manuellement le dessin. Avec les shaders, le procédé est beaucoup plus rapide car toutes ces opérations sont réalisées en une seule fois, à la manière d’un tampon appliqué d’un seul geste sur votre feuille. En plus, ce qui est génial, c’est que ce tampon peut évoluer selon des informations comme par exemple le temps, la position ou les couleurs d’éléments déjà présents sur votre feuille.

Pourquoi les shaders sont-ils rapides ?

Les shaders sont des programmes très légers car contrairement à des logiciels comme HeavyM, qui comportent plusieurs centaines de milliers de lignes de code, un shader n’en comporte généralement que quelques centaines au maximum. La rapidité des shaders tient essentiellement à l’architecture du matériel qui permet leur exécution : la carte graphique. Pour utiliser HeavyM, vous avez sûrement dû vous intéresser à ce matériel car il vous permet de multiplier les possibilités offertes par le logiciel.

Contrairement au processeur de votre ordinateur qui traite les tâches les unes à la suite des autres, les calculs de votre carte graphique s’effectuent de manière parallèle. Au lieu d’avoir un seul processeur avec une puissance de calcul importante, la carte graphique possède une multitude de petits processeurs. Ils permettent donc de réaliser des tâches simultanément. En s’appuyant sur cette parallélisation, les shaders peuvent donc réaliser en quelques millisecondes des calculs graphiques complexes.

L’avantage des shaders : l’art interactif

Grâce à la rapidité d’exécution des shaders, il devient possible de créer des images en temps réel, c’est-à-dire qu’elles sont générées au moment où elles sont vues. Le terme temps réel est utilisé en opposition au terme précalculé qui s’applique à un fichier vidéo dont le rendu est réalisé image par image. Les calculs de rendu sont parfois très longs et peuvent prendre jusqu’à plusieurs jours ! Avec les shaders, vous pouvez manipuler directement les images, à la manière d’un jeu vidéo. L’art numérique interactif repose sur ce principe de temps réel car il permet de générer des visuels réactifs à la musique ou aux mouvements de personnes. Pour voir deux exemples de performance mêlant musique et visuels, jetez un œil au travail de Weirdcore pour les concerts d’Aphew Twin ou les performances de Nonotak.

Les types de shaders

Les shaders ne sont rien de plus que des fichiers textes avec une extension particulière. Nous allons voir qu’il existe différents types de shaders. Le point commun est qu’ils sont codés dans le langage GLSL : OpenGL Shading Language. Il existe d’autres types de shaders selon les plateformes et le matériel mais ici nous nous intéresserons aux shaders basés sur l’OpenGL. Pour utiliser les shaders dans HeavyM, une carte graphique supportant l’OpenGL 2.0 est indispensable.

Pixel shaders ou Fragment shaders

Le fragment shader ou pixel shader est un shader dont le but est de calculer la couleur de chaque pixel individuellement. Il prend ainsi en entrée les données de chaque pixel de l'image (position, coordonnées de texture, couleur) et renvoie la couleur de celui-ci.

Ce sont ces shaders qui vont vous intéresser dans l’utilisation avec HeavyM. Il s’agit généralement de fichiers .FRAG, ou de .FS dans le cas du format ISF. Le format ISF propose un standard pour les fragment shaders GLSL, afin d’être plus facilement interprétés par des applications interactives.

Les Vertex shaders

Les vertex shaders sont utilisés pour transformer en pixels les sommets en entrée. 

Il s’agit d’un fichier .VS accompagnant parfois le pixel shader, portant le même nom et devant être situé dans le même dossier.

Où trouver des shaders ?

Il n’est pas nécessaire de savoir programmer pour utiliser des shaders avec HeavyM. En plus de la bibliothèque déjà présente dans le logiciel, des plateformes existent pour trouver de nouveaux shaders sans avoir à les créer par vous même. La communauté d’artistes créateurs de shaders se développe de plus en plus et vous pouvez souvent utiliser librement les œuvres qu’ils partagent.

Pour trouver des .FRAG : http://glslsandbox.com/ et https://www.shadertoy.com/

Attention : les .FRAG ne sont pas reconnus dans HeavyM. Il est nécessaire de les convertir en .ISF et nous proposons une méthode plus bas dans l’article.

Veillez à bien vérifier les droits d’utilisation dans la licence généralement précisée au début du code du shader. S’il n’y a pas d’indication particulière, le droit d’auteur s’applique donc par défaut et nous vous conseillons vivement de discuter avec l’auteur du programme si vous souhaitez en faire une utilisation commerciale.

Développer ses propres shaders

Pour créer ses propres shaders, nous conseillons d’utiliser directement le format ISF afin qu’ils soient compatibles avec un maximum d’applications. Le but de cet article n’est pas de proposer un apprentissage du code GLSL, le langage utilisé par le format ISF. Pour cela nous proposons la lecture des sites très complet :

Néanmoins, pour commencer, n’hésitez pas à vous rendre sur le site ISF et modifiez des shaders existants. Ce site interactif permet de visualiser en direct les modifications apportées au shader. Il est également possible de partir d’un template de base.

L’inconvénient principal de la création et de la modification de shaders est qu’il n’y a pas de retour d’erreur. Lorsqu’il y a un problème de conception, le shader ne s’exécute pas ou n’affiche rien. Il est alors difficile de retrouver la source de l’erreur. Il est donc nécessaire d’être rigoureux dans le code.

Partie 2 : les shaders dans HeavyM

Le logiciel HeavyM propose nativement quelques centaines de shaders dans sa bibliothèque d’effets visuels intégrés. Plusieurs types d’effets sont utilisables dans le logiciel, en fonction des fonctionnalités utilisées.

Les shaders d’effets sur les formes

Lorsque vous cliquez sur les icônes rouges à droite de l’interface, vous avez accès à des catégories d’effets qui s’adaptent automatiquement aux formes dessinées. Ces effets sont liés aux groupes du panneau des calques à gauche. Toutes les formes d’un groupe ont la même apparence. Pour avoir des effets différents selon les formes, il est nécessaire de créer d’autres groupes et d’y ajouter des formes.

HeavyM Shaders - Effets sur les formes

Il n’est actuellement pas possible d’ajouter ou de modifier les shaders d’effets existants sur cette catégorie.

Les shaders de génération d’image

Ajoutez des shaders de génération d’image comme sources, dans le panneau accessible grâce à l’icône blanche située dans la barre d’outil verticale à droite. Ces shaders nécessitent la création d’un player afin de s’afficher. Liez la source au player en cliquant sur l’icône en forme de cible. Les shaders de génération d’image ne possèdent pas de durée par défaut car il s’agit d’un programme qui tourne en boucle. Vous pouvez cependant modifier la durée d’affichage de la source.

Shaders - Effets génératifs

Les shaders de traitement sur les players

Vous avez la possibilité d’appliquer des effets de traitement d’image sur le player. Pour cela, sélectionnez le player et ajoutez des effets dans les Propriétés en bas à gauche à l’aide du bouton +. Les effets s'ajoutent les uns à la suite des autres. Chaque player est indépendant donc la source et les effets de traitement seront différents entre les players, même si les players sont dans le même groupe.

Shaders - Effets de jeu

Les shaders de traitement sur les séquences

Des shaders de traitement d’image peuvent aussi s'appliquer sur toute la sortie vidéo. Ces effets sont relatifs aux séquences. Pour ajouter un effet de traitement sur une séquence, cliquez sur la roue dentée et ajoutez un shader à l’aide du bouton +. Les effets de traitement sur les séquences sont les mêmes que les effets de traitement sur les players.

HeavyM shaders - Effets de séquence

Les shaders de transitions sur les séquences

Les transitions sont elles aussi relatives aux séquences et s’appliquent sur toute la sortie vidéo. Par défaut, la transition appliquée est un fondu de 0,20s. Modifiez cette transition dans le menu accessible en cliquant sur la roue dentée de la séquence. Les transitions s’appliquent uniquement en entrée de la séquence.

HeavyM - Transitions

Importer des shaders

Nous avons vu qu’il y a deux principales catégories de shaders dans HeavyM : les shaders de génération et les shaders de traitement. HeavyM permet de combiner facilement les shaders de ces deux catégories. HeavyM propose des shaders par défaut dans les onglets Library de chaque fenêtre de sélection des shaders. Tous ces shaders sont des .FS et respectent donc le standard ISF. Afin d’importer vos propres shaders dans l’onglet My Shaders, il est nécessaire de respecter ce standard. Ainsi, les paramètres de vos shaders pourront être facilement modifiés avec l’interface de HeavyM.

Vous voulez importer d'autres formats de shaders dans HeavyM ? Il est très simple de convertir des shaders avec cet outil : Desktop ISF Editor (Windows beta/Mac) avec les fonctions “Import from GLSL Sandbox” et “Import from Shadertoy” functions.

Enfin, si vous cherchez à comprendre l’architecture du format ISF dans les moindres détails pour en créer par vous même, nous vous conseillons de jeter un oeil à la documentation du format ISF : https://docs.isf.video/

Partie 3 : contrôler les shaders

Les shaders permettent des effets visuels temps réel modifiables en direct, sans avoir à passer par une étape de rendu. Voici les différentes possibilités pour contrôler vos effets et créer des visuels interactifs.

Les paramètres du shader sont modifiables en cliquant sur la roue dentée de l’icône de la source. L’échelle de valeur est normée entre 0 et 100 et ne correspond pas à une unité particulière. Différents modes de variation des paramètres sont proposés dans HeavyM, retrouvez-les en cliquant sur la flèche à côté de chaque paramètre de shaders.

Le mode Fixed Value

Il s’agit du mode par défaut qui permet de modifier la valeur à l’aide de la souris. L’inconvénient est donc que vous ne pouvez modifier qu’un seul paramètre à la fois. Vous pouvez aussi entrer une valeur au clavier.

Les générateurs de valeurs

HeavyM propose 7 générateurs de valeurs qui permettent de modifier automatiquement les paramètres des shaders. Ce sont des générateurs de type LFO pour Low Frequency Oscillator, comme l’on retrouve sur des logiciels de musique ou des synthétiseurs. Pour chaque générateur, il existe deux modes d’animation : BPM ou temporel. Le mode BPM est lié au Tempo général en bas à droite de l’interface, symbolisé par l’icône de métronome. Le mode temporel permet de définir une fréquence indépendante du Tempo général.

HeavyM - LFOs

Le contrôle grâce à l’analyse sonore

En bas à droite de l’interface se trouve le module d’analyse sonore. Il permet de détecter des variations d’amplitude sur 3 plages de fréquences différentes : Bass Mid High. Retrouvez les variations de ces valeurs dans les modes de variation des paramètres de shaders.

HeavyM shaders - Analyse sonore

Contrôle MIDI

Vous souhaitez contrôler manuellement plusieurs paramètres en même temps ? Utilisez le protocole MIDI. Il existe sur le marché un très grand nombre de contrôleurs MIDI pour la musique. Sachez qu’ils sont tous compatibles avec HeavyM. Connectez votre matériel dans la fenêtre de configuration, accessible grâce à l’icône orange en haut à droite de l’interface. Ensuite, le mode MIDI learning permet de configurer le lien entre les paramètres des shaders et les touches de votre matériel.

HeavyM Shaders - MIDI

Conclusion

Les possibilités créatives offertes par les shaders sont infinies. Ces programmes permettent d’exploiter la puissance de votre carte graphique en quelques clics. Votre ordinateur vous permet ainsi d’accéder facilement à l’art génératif qui consiste à créer des œuvres à partir d’algorithmes. De nombreux artistes numériques utilisent cette technique, par exemple Antoine Schmidt, Miguel Chevalier, Vera Molnár, Du Zhenjun, Daniel Rozin… 

Avec HeavyM, nous avons vu qu’il est très simple d’utiliser et contrôler des shaders. Combinez-les sans limites pour créer vos propres visuels et votre propre identité !