Les shaders, des synthétiseurs visuels ?

Le synopsis video synthesizer par Denise Gallant et Rob Schafer, est un outil développé dans les années 1980 qui permettait de produire des traitements d’images sur des flux en temps réels. J’avais découvert leurs expérimentations et leurs productions [fig.1] grâce à l’article de Manon Bruet, parut dans la revue BackOffice n°1. Elle expliquait ainsi que les filtres Photoshop sont une continuité de ces synthétiseurs visuels, et qu’ils permettent de « générer des effets spéciaux »1. En effet, pour Manon Bruet, les filtres sont pensés comme des simulations de techniques « traditionnelles », mais poussé à l’extrême, les rendus se rapprochent plutôt des visuelles du synthétiseur. Mais le filtre dans photoshop fige l’image, est-ce que d’autres outils numériques permettent de produire ces transformations en temps réel ?

(fig. 1) Photogramme du documentaire Synopsis Video Synthesizer Documentary présentant un extrait du rendu du Synopsis Video Synthesizer.

On aurait pu considérer Processing comme cet outil de synthétiseur visuel, mais l’opération de traitement décompose l’image pixel par pixel et ne la traite pas comme un signal2. Puis les traitements de l’image se heurtent souvent à la contrainte du temps réel, cette boucle itérative dans chaque pixel de l’image ralenti grandement le traitement, notamment car les opérations de calculs sont effectuées sur le processeurs et ainsi de trop grandes opérations ne peuvent plus s’effectuer en temps réel.

Avec les fragments shaders, on retrouve quelque part cette logique de synthétiseur visuel, les opérations analogiques ont été remplacé par des opérations mathématiques. Les shaders sont programmés dans des langages, mais les moteurs de jeux les intègrent avec des systèmes nodaux : l’effet est construit par stratifications de blocs aux inputs et outputs différents. Ces systèmes nodaux récupèrent l’ensemble de la logique et produisent un code en langage de shaders (HLSL dans Unreal Engine) lors de la compilation du projet. Les visuelles sont produits en temps réel : le shader communique avec le processeur graphique, par l’intermédiaire de l’api graphique3 (DirectX, OpenGL, Metal, etc…). Les outils de Vjing comme Touch designer, vont justement réutiliser aussi des opérations de shaders pour réaliser des opérations sur de l’image.

Le système nodal réintègre un peu plus la forme du synthétiseur visuel. évidement, les shaders sont utilisé pour produire des effets de matière dans un environnement 3D, mais peuvent être décliné pour produire des opérations sur une image. L’image est traité comme un signal. Lorsque l’on regarde le synthétiseur [fig. 2], on retrouve aussi la logique de boite et de connexions cablées, avec des potentiomètres paramétrant l’effet. on emmène le signal vidéo dans un node il en ressort d’autres inputs.

(fig. 2) Interface du Synopium video Synthetizer, extrait du documentaire Synopsis Video Synthesizer Documentary

La métaphore visuelle est donc quelque part reprise dans l’environnement numérique, les potentiomètres sont devenues des variables exposées, les cables sont devenues des liens entre les nodes [fig. 3]. Le canvas est extensible et permet donc de moduler l’effet à produire. Le synopium est aussi modulaire, Denise Gallant explique ainsi que les inputs peuvent être différents : de la vidéo et un oscillateurs, ou encore de la musique4.

(fig. 2) Extrait de l’interface du système de création de shader ShaderGraph dans Unity

Evidemment que cette comparaison montre vite ces limites — cela reste très complexe de mettre face à face des objets numériques d’un côté et analogiques de l’autre — la multitude d’hardwares branchés les uns avec les autres est remplacée par une unique carte graphique dont les opérations sont transmisses par bit et non par un signal. La métaphore du synthétiseur par l’interface nodale permet en réalité aux créateurs•trices, de pouvoir produire des effets complexes en ce soustrayant de la complexité de connaitre un langage.

Certains systèmes de shaders utilisant de la programmation comme Hydra Synth (library qui permet l’élaboration de shader en webgl) produit une écriture particulière : à l’instar de d3.js (utilisé pour de la visualisation de donnée) le paradigme employé est une forme de programmation fonctionnelle5 où les fonction sont chainés et englobés. La logique est la même : on passe un input (image, vidéo, oscillateurs etc… ) dans différentes fonctions pour en modifié l’apparence. L’écriture permet de produire un pipeline.

Exemple de shader produit avec Hydra Synth JS:

[1] M. Bruet, « Photoshop, un synthétiseur visuel ? », Back Office, vol. 1, s. d., p. 34

[2] « PImage::pixels[] / Reference », sur Processing, s. d. (en ligne : https://processing.org//reference/PImage_pixels.html ; consulté le 3 mai 2023)

[3] Shader Performance Measurement – Shader Graph Basics – Episode 21, 4 novembre 2021, 18:41 (en ligne : https://www.youtube.com/watch?v=E82XxlXMJs4 ; consulté le 3 mai 2023)

[4] 5:33, Synopsis Video Synthesizer Documentary, 11 avril 2016, 13:33 (en ligne : https://www.youtube.com/watch?v=0VdLVwDwm7s ; consulté le 3 mai 2023)

[5] « Functional Programming, d3.js a good example », s. d. (en ligne : http://blog.sleptons.com/2015/01/functional-programming-d3js-good-example.html ; consulté le 28 avril 2023)