J’ai découvert le GLSL il y a quelques années en cherchant à m'affranchir des limites de p5.js et de JavaScript pour le creative coding. Ce qui m’a immédiatement frappé, c’est qu'en quelques lignes de code, on peut manipuler des millions de pixels en parallèle pour créer des effets visuels difficiles à obtenir autrement.

Alors qu'en p5.js ou JavaScript (API 2D) on dessine comme on le ferait avec un logiciel comme Paint, mais avec du code. En GLSL, le paradigme est radicalement différent car le code est exécuté sur chaque pixel.
Pour dessiner un cercle en p5.js, il suffit d'appeler la fonction circle avec les coordonnées de son centre et son rayon (ex: circle(50, 50, 25)).
En GLSL, il faut calculer la distance au centre, puis choisir la couleur en fonction de si la distance est plus grande ou pas du rayon voulu.

    // Calcul de la distance au centre
    float d = length(uv);

    // Détermine l’intérieur du cercle
    float mask = step(d, 0.5);
    
    // Couleurs
    vec3 col = vec3(1.- mask);
    
    fragColor = vec4(col, 1.0);

Quelques exemples de projets que j'ai fait en fragment shaders

The Source

The Source est un projet d'art génératif né d'un an de collaboration avec Matthieu Segret. Le projet est principalement en GLSL.

The Source (2023)

Water, the essence of life, is a marvel of versatility and beauty, manifesting in countless forms that inspire awe and wonder. The Source aims to encapsulate this remarkable diversity by showcasing the myriad forms of water and the captivating reflections it creates. This generative art project delves into the potential

Camille RouxCamille Roux

Résilience

Résilience, lui aussi est codé principalement en GLSL (fragment shaders).
Il s’appuie sur des Signed Distance Functions (fonctions mathématiques très utilisées en GLSL) pour dessiner isolignes et hachures.

Résilience (2024)

Life is not always a smooth journey. Each of us faces challenges and difficult times. These experiences can unsettle us, cause distress, and test our limits. Resilience is a collection where each edition reflects a distinct slice of life, capturing the essence of challenges faced and obstacles overcome. It’s a

Camille RouxCamille Roux

Qu’est-ce qu’un fragment shader ?

Un fragment shader (ou “pixel shader”) est un programme en GLSL, langage proche du C, exécuté sur le GPU pour calculer la couleur et l’opacité de chaque pixel affiché à l’écran. Dans le pipeline graphique, il intervient après le vertex shader : la géométrie de vos formes est d’abord définie, puis le fragment shader détermine l’aspect visuel final. Grâce à son exécution parallèle sur la carte graphique, il permet des rendus en temps réel ultra-performants, tout en offrant une créativité sans limite.

Tutoriels et guides pour débuter avec les Fragment Shaders

The Book of Shaders

Guide interactif en ligne et traduit en français pour apprendre les bases : base du GLSL, formes, gestion des couleurs, Perlin noise et cellular noise, ...

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

The Book of Shaders

An Introduction to Shader Art Coding (Kishimisu)

Vidéo courte et ludique qui explique les bases du fragment shaders.

Et vous pouvez enchainer avec cette belle introduction au raymarching

Three.js Journey

Three.js Journey est un tutoriel très complet à Three.js (une lib js pour faire de la 3D). Le chapitre 4 propose de nombreuses heures de tutoriels vidéos sur les shaders.

Three.js Journey — Learn WebGL with Three.js

The ultimate Three.js course whether you are a beginner or a more advanced developer

Three.js JourneyBruno Simon

J'utilise d'ailleurs three.js dans mon dernier projet. C'était très utile pour m'aider à gérer les centaines de milliers de particules qui se baladent en temps réel sans avoir à tout coder from scratch.

GM Shaders (Xor)

Une de mes newsletters préférées dans le creative coding. Une mine d'or pour toutes celles et ceux qui s'intéressent aux shaders. Les articles sont parfois techniques, parfois accessibles. Les sujets sont variés mais toujours passionnants : Turbulence, Signed Distance Fields, Anti-Aliasing, les différents types de noise, tanh()...

GM Shaders | Xor | Substack

A series of mini shader tutorials for game developers and beyond! Click to read GM Shaders, by Xor, a Substack publication with thousands of subscribers.

GM ShadersXor

Quelques outils indispensables

ShaderToy

Un site pratique pour créer et partager des fragment shaders en ligne. ShaderToy c'est aussi une collection incroyable de shaders postés par la communauté depuis des années, donc le code est consultable et éditable.

Shadertoy BETA

Twigl

Dans l'esprit de ShaderToy mais avec une interface plus moderne, Twigl propose en plus des fonctions intéressantes comme le broadcasting pour faire du live coding ou encore Sound Shader pour faire du son avec des shaders (oui oui !)

twigl.app

twigl.app is an online editor for One tweet shader, with gif or webm generator and sound shader.

twigl.app

Pour aller plus loin

Le blog d'Inigo Quilez

Ce site n'est pas pour les débutants, mais vous finirez surement par en avoir besoin si vous commencez à jouer avec SDF (Signed Distance Functions), le Raytracing, Raymarching, les fractales... une mine d'or!

Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more

Tutorials and articles of Inigo Quilez on computer graphics, fractals, demoscene, shaders and more.

Inigo Quilez

WebGL2 Fundamentals

Documentation technique pour maîtriser le contexte WebGL2 : buffers, VAO/VBO, textures et intégration dans un <canvas>.

WebGL2 Fundamentals

Learn WebGL2 from the ground up. No magic

Conclusion

Les fragment shaders en GLSL ouvrent un champ infini de possibilités pour l’art génératif et plus largement le creative coding, alliant performances GPU et créativité algorithmique. Grâce à ces ressources vous devriez avoir tout pour débuter, expérimenter et vous amuser !

N'hésitez pas à poser vos questions ou partager vos créations en commentaire !