> ## Content Index > Fetch the complete content index at: https://www.camilleroux.com/llms.txt > Use this file to discover other available public pages before exploring further. # Fragment Shaders : Guide d’introduction au creative coding en GLSL - URL: https://www.camilleroux.com/fragment-shaders-guide-dintroduction-au-creative-coding-en-glsl/ - Published: 2025-07-04T10:42:24.000Z - Updated: 2026-08-13T16:58:24.000Z - Author: Camille Roux 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](https://www.camilleroux.com/art-generatif-de-la-decouverte-a-la-publication-dun-projet-dans-un-studio-prestigieux/). 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. ```glsl // 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. 0:00 /0:31 1× [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![](https://www.camilleroux.com/content/images/icon/camillecouleur-1-4.jpg)Camille RouxCamille Roux![](https://www.camilleroux.com/content/images/thumbnail/e18b5712ce474265e42489463acbd3bb.png)](https://art.camilleroux.com/work/the-source/?ref=camilleroux.com) ### 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. [![](https://www.camilleroux.com/content/images/2025/07/image-1.png)](https://art.camilleroux.com/work/resilience/?ref=camilleroux.com) [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![](https://www.camilleroux.com/content/images/icon/camillecouleur-1-5.jpg)Camille RouxCamille Roux![](https://www.camilleroux.com/content/images/thumbnail/Resilience-0x42f411622056bc412d6789651584ef8bfdffc492679c07cdf9bce4838a8b309e-1.png)](https://art.camilleroux.com/work/resilience/?ref=camilleroux.com) ## 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 ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.![](https://www.camilleroux.com/content/images/icon/favicon.gif)The Book of Shaders![](https://www.camilleroux.com/content/images/thumbnail/thumb.png)](https://thebookofshaders.com/?lan=fr&ref=camilleroux.com) ### An Introduction to Shader Art Coding (Kishimisu) Vidéo courte et ludique qui explique les bases du fragment shaders. ⚠️ Attention, la vidéo est plutôt courte, mais vous risquez de passer un bon moment après à jouer avec ce que vous venez d'apprendre ! 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.jsThe ultimate Three.js course whether you are a beginner or a more advanced developer![](https://www.camilleroux.com/content/images/icon/apple-touch-icon-1.png)Three.js JourneyBruno Simon![](https://www.camilleroux.com/content/images/thumbnail/share-image.png)](https://threejs-journey.com/?ref=camilleroux.com) 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. > 💙💙💙 [pic.twitter.com/yq0RvcTDwW](https://t.co/yq0RvcTDwW?ref=camilleroux.com) > > — Camille Roux - Generative artist (@camillerouxart) [December 14, 2024](https://twitter.com/camillerouxart/status/1867879614867255433?ref%5Fsrc=twsrc%5Etfw&ref=camilleroux.com) ### 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 ShadersShader tutorials for GameMaker by Xor![](https://www.camilleroux.com/content/images/icon/icon-14046bbf-4cde-40a1-b350-08b21b8957e4.png)![](https://www.camilleroux.com/content/images/thumbnail/icon-d935a22d-875d-4c9b-8a58-eacd4efabb9f.png)](https://gmshaders.com/?ref=camilleroux.com) ## 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![](https://www.camilleroux.com/content/images/icon/launch_icon_114.png)![](https://www.camilleroux.com/content/images/thumbnail/patreon.png)](https://www.shadertoy.com/?ref=camilleroux.com) ### 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.apptwigl.app is an online editor for One tweet shader, with gif or webm generator and sound shader.![](https://www.camilleroux.com/content/images/icon/apple-touch-icon.png)twigl.app![](https://www.camilleroux.com/content/images/thumbnail/ogp.png)](https://twigl.app/?ref=camilleroux.com) ## 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 moreTutorials and articles of Inigo Quilez on computer graphics, fractals, demoscene, shaders and more.![](https://www.camilleroux.com/content/images/icon/favicon.png)Inigo Quilez![](https://www.camilleroux.com/content/images/thumbnail/imgYoutube.png)](https://iquilezles.org/articles/?ref=camilleroux.com) ### WebGL2 Fundamentals Documentation technique pour maîtriser le contexte WebGL2 : buffers, VAO/VBO, textures et intégration dans un ``. [WebGL2 FundamentalsLearn WebGL2 from the ground up. No magic![](https://www.camilleroux.com/content/images/icon/webgl2fundamentals-icon.png)![](https://www.camilleroux.com/content/images/thumbnail/webgl2fundamentals.jpg)](https://webgl2fundamentals.org/?ref=camilleroux.com) ## Conclusion Les **fragment shaders** en GLSL ouvrent un champ infini de possibilités pour l’[art génératif](https://www.camilleroux.com/art-generatif-de-la-decouverte-a-la-publication-dun-projet-dans-un-studio-prestigieux/) et plus largement le [creative coding](https://www.camilleroux.com/faire-de-lart-avec-du-code/), 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 !