{"id":10381,"date":"2021-10-12T09:37:11","date_gmt":"2021-10-12T07:37:11","guid":{"rendered":"https:\/\/www.heavym.net\/?p=10381"},"modified":"2025-02-27T16:35:18","modified_gmt":"2025-02-27T15:35:18","slug":"heavym-shaders","status":"publish","type":"post","link":"https:\/\/www.heavym.net\/fr\/heavym-shaders\/","title":{"rendered":"Introduction aux shaders HeavyM pour cr\u00e9er vos propres effets visuels"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"10381\" class=\"elementor elementor-10381\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-494341b0 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"494341b0\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae20a09\" data-id=\"ae20a09\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-31bd2b48 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31bd2b48\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-1ad489a0\" data-id=\"1ad489a0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a9d498a elementor-widget elementor-widget-image\" data-id=\"4a9d498a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.heavym.net\/fr\/blog\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" data-src=\"https:\/\/www.heavym.net\/wp-content\/uploads\/elementor\/thumbs\/left-arrow-1-1-r2d9qop5ml0l2632kp091novcehjbv3yr2wx4iutee.png\" title=\"fl\u00e8che gauche (1)\" alt=\"fl\u00e8che gauche (1)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 15px; --smush-placeholder-aspect-ratio: 15\/15;\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-inner-column elementor-element elementor-element-5ed43746\" data-id=\"5ed43746\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-23f0e2c0 elementor-widget elementor-widget-heading\" data-id=\"23f0e2c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/www.heavym.net\/fr\/blog\/\">Retour accueil Blog<\/a><\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aef4880 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aef4880\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6bd3671\" data-id=\"6bd3671\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-976c28a elementor-widget elementor-widget-heading\" data-id=\"976c28a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Introduction aux shaders HeavyM pour cr\u00e9er vos propres effets visuels<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-facbf00 elementor-widget elementor-widget-heading\" data-id=\"facbf00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introduction<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90a065f elementor-widget elementor-widget-text-editor\" data-id=\"90a065f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vous \u00eates int\u00e9ress\u00e9 par la cr\u00e9ation de vos propres effets visuels dans HeavyM ? Dans cet article, nous allons pr\u00e9senter les formidables possibilit\u00e9s cr\u00e9atives offertes par les shaders. Mais d\u2019ailleurs, qu\u2019est-ce qu\u2019un shader ?<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f279fe elementor-widget elementor-widget-text-editor\" data-id=\"9f279fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Un shader est un programme informatique ex\u00e9cut\u00e9 par la carte graphique de votre ordinateur. Il permet de manipuler rapidement les donn\u00e9es qui sont affich\u00e9es sur votre \u00e9cran ou votre vid\u00e9oprojecteur : les pixels.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c31ee6a elementor-widget elementor-widget-text-editor\" data-id=\"c31ee6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il s\u2019agit d\u2019une technologie m\u00e9connue car abstraite, mais les shaders sont tr\u00e8s pr\u00e9sents dans notre quotidien. Ces petits programmes informatiques simulent de mani\u00e8re r\u00e9aliste des effets visuels complexes comme la pluie, le brouillard, la r\u00e9flexion de la lumi\u00e8re, le relief des objets etc.Ils sont donc tr\u00e8s utilis\u00e9s dans les jeux vid\u00e9o, les films n\u00e9cessitant des effets sp\u00e9ciaux, les plateaux t\u00e9l\u00e9\u2026 et dans l\u2019art num\u00e9rique, le domaine d\u2019application qui nous int\u00e9resse ici.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41126e4 elementor-widget elementor-widget-text-editor\" data-id=\"41126e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dans le logiciel HeavyM, les shaders int\u00e9gr\u00e9s proposent beaucoup de possibilit\u00e9s. Il est aussi possible d\u2019importer vos propres shaders, d\u00e9multipliant ainsi les combinaisons \u00e0 l\u2019infini !<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b4dba3 elementor-widget elementor-widget-image\" data-id=\"8b4dba3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"512\" height=\"288\" src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/07\/1-3.jpeg.webp\" class=\"attachment-full size-full wp-image-11155\" alt=\"Exemple de jeux vid\u00e9o utilisant des shaders : Minecraft\" srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/07\/1-3.jpeg.webp 512w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/07\/1-3-300x169.jpeg.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/07\/1-3-16x9.jpeg.webp 16w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/07\/1-3-350x197.jpeg.webp 350w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12035a3 elementor-widget elementor-widget-text-editor\" data-id=\"12035a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><i><span style=\"font-weight: 400;\">Exemple de jeux vid\u00e9o utilisant des shaders : Minecraft<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c002db elementor-widget elementor-widget-image\" data-id=\"9c002db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"563\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance.png.webp\" class=\"attachment-full size-full wp-image-13237 lazyload\" alt=\"Cartographie par projection de la performance des mines\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance.png.webp 1000w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance-300x169.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance-768x432.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance-18x10.png.webp 18w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance-350x197.png.webp 350w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/09\/Projection-mapping-mine-performance-860x484.png.webp 860w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/563;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b1ede1 elementor-widget elementor-widget-text-editor\" data-id=\"9b1ede1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><i><span style=\"font-weight: 400;\">Exemple d'un shader utiliser lors d'une performance de vid\u00e9o mapping<\/span><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c629879 elementor-widget elementor-widget-heading\" data-id=\"c629879\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Partie 1 : la technologie des shaders<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-183d328 elementor-widget elementor-widget-text-editor\" data-id=\"183d328\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Pour mieux comprendre le principe des shaders, prenons comme exemple la cr\u00e9ation d\u2019un dessin \u00e0 la main. Il est alors n\u00e9cessaire de dessiner un par un les \u00e9l\u00e9ments qui le composent. Vous allez commencer par les formes g\u00e9om\u00e9triques comme des cercles, des rectangles, des lignes puis vous allez ajouter des couleurs. Vous proc\u00e9dez donc \u00e9tape par \u00e9tape comme si vous aviez \u00e0 recopier manuellement le dessin. Avec les shaders, le proc\u00e9d\u00e9 est beaucoup plus rapide car toutes ces op\u00e9rations sont r\u00e9alis\u00e9es en une seule fois, \u00e0 la mani\u00e8re d\u2019un tampon appliqu\u00e9 d\u2019un seul geste sur votre feuille. En plus, ce qui est g\u00e9nial, c\u2019est que ce tampon peut \u00e9voluer selon des informations comme par exemple le temps, la position ou les couleurs d\u2019\u00e9l\u00e9ments d\u00e9j\u00e0 pr\u00e9sents sur votre feuille.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c59e238 elementor-widget elementor-widget-heading\" data-id=\"c59e238\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pourquoi les shaders sont-ils rapides ?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46ee873 elementor-widget elementor-widget-text-editor\" data-id=\"46ee873\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les shaders sont des programmes tr\u00e8s l\u00e9gers car contrairement \u00e0 des logiciels comme HeavyM, qui comportent plusieurs centaines de milliers de lignes de code, un shader n\u2019en comporte g\u00e9n\u00e9ralement que quelques centaines au maximum. La rapidit\u00e9 des shaders tient essentiellement \u00e0 l\u2019architecture du mat\u00e9riel qui permet leur ex\u00e9cution : la carte graphique. Pour utiliser HeavyM, vous avez s\u00fbrement d\u00fb vous int\u00e9resser \u00e0 ce mat\u00e9riel car il vous permet de multiplier les possibilit\u00e9s offertes par le logiciel.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-778db6d elementor-widget elementor-widget-text-editor\" data-id=\"778db6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Contrairement au processeur de votre ordinateur qui traite les t\u00e2ches les unes \u00e0 la suite des autres, les calculs de votre carte graphique s\u2019effectuent de mani\u00e8re parall\u00e8le. Au lieu d\u2019avoir un seul processeur avec une puissance de calcul importante, la carte graphique poss\u00e8de une multitude de petits processeurs. Ils permettent donc de r\u00e9aliser des t\u00e2ches simultan\u00e9ment. En s\u2019appuyant sur cette parall\u00e9lisation, les shaders peuvent donc r\u00e9aliser en quelques millisecondes des calculs graphiques complexes.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c112964 elementor-widget elementor-widget-heading\" data-id=\"c112964\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">L\u2019avantage des shaders : l\u2019art interactif<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-183e954 elementor-widget elementor-widget-text-editor\" data-id=\"183e954\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Gr\u00e2ce \u00e0 la rapidit\u00e9 d\u2019ex\u00e9cution des shaders, il devient possible de cr\u00e9er des images en temps r\u00e9el, c\u2019est-\u00e0-dire qu\u2019elles sont g\u00e9n\u00e9r\u00e9es au moment o\u00f9 elles sont vues. Le terme temps r\u00e9el est utilis\u00e9 en opposition au terme pr\u00e9calcul\u00e9 qui s\u2019applique \u00e0 un fichier vid\u00e9o dont le rendu est r\u00e9alis\u00e9 image par image. Les calculs de rendu sont parfois tr\u00e8s longs et peuvent prendre jusqu\u2019\u00e0 plusieurs jours ! Avec les shaders, vous pouvez manipuler directement les images, \u00e0 la mani\u00e8re d\u2019un jeu vid\u00e9o. L\u2019art num\u00e9rique interactif repose sur ce principe de temps r\u00e9el car il permet de g\u00e9n\u00e9rer des visuels r\u00e9actifs \u00e0 la musique ou aux mouvements de personnes. Pour voir deux exemples de performance m\u00ealant musique et visuels, jetez un \u0153il au travail de <\/span><strong><a href=\"https:\/\/www.itsnicethat.com\/features\/weirdcore-aphex-twin-field-day-050617-miscellaneous\">Weirdcore pour les concerts d\u2019Aphew Twin<\/a><\/strong><span style=\"font-weight: 400;\"> ou <\/span><a href=\"https:\/\/www.nonotak.com\/_SHIRO\"><span style=\"font-weight: 400;\"><strong>les performances de Nonotak<\/strong>.<\/span><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb9501b elementor-widget elementor-widget-heading\" data-id=\"fb9501b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les types de shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71f76a1 elementor-widget elementor-widget-text-editor\" data-id=\"71f76a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les shaders ne sont rien de plus que des fichiers textes avec une extension particuli\u00e8re. Nous allons voir qu\u2019il existe diff\u00e9rents types de shaders. Le point commun est qu\u2019ils sont cod\u00e9s dans le langage GLSL : OpenGL Shading Language. Il existe d\u2019autres types de shaders selon les plateformes et le mat\u00e9riel mais ici nous nous int\u00e9resserons aux shaders bas\u00e9s sur l\u2019OpenGL. Pour utiliser les shaders dans HeavyM, une carte graphique supportant l\u2019OpenGL 2.0 est indispensable.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-515f37a elementor-widget elementor-widget-heading\" data-id=\"515f37a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pixel shaders ou Fragment shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a786d20 elementor-widget elementor-widget-text-editor\" data-id=\"a786d20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">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\u00e9e les donn\u00e9es de chaque pixel de l'image (position, coordonn\u00e9es de texture, couleur) et renvoie la couleur de celui-ci.<\/span><\/p><p><span style=\"font-weight: 400;\">Ce sont ces shaders qui vont vous int\u00e9resser dans l\u2019utilisation avec HeavyM. Il s\u2019agit g\u00e9n\u00e9ralement 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\u2019\u00eatre plus facilement interpr\u00e9t\u00e9s par des applications interactives.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-059c303 elementor-widget elementor-widget-heading\" data-id=\"059c303\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les Vertex shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-580b61a elementor-widget elementor-widget-text-editor\" data-id=\"580b61a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les vertex shaders sont utilis\u00e9s pour transformer en pixels les sommets en entr\u00e9e.\u00a0<\/span><\/p><p><span style=\"font-weight: 400;\">Il s\u2019agit d\u2019un fichier .VS accompagnant parfois le pixel shader, portant le m\u00eame nom et devant \u00eatre situ\u00e9 dans le m\u00eame dossier.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41e9999 elementor-widget elementor-widget-heading\" data-id=\"41e9999\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">O\u00f9 trouver des shaders ?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b659286 elementor-widget elementor-widget-text-editor\" data-id=\"b659286\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il n\u2019est pas n\u00e9cessaire de savoir programmer pour utiliser des shaders avec HeavyM. En plus de la biblioth\u00e8que d\u00e9j\u00e0 pr\u00e9sente dans le logiciel, des plateformes existent pour trouver de nouveaux shaders sans avoir \u00e0 les cr\u00e9er par vous m\u00eame. La communaut\u00e9 d\u2019artistes cr\u00e9ateurs de shaders se d\u00e9veloppe de plus en plus et vous pouvez souvent utiliser librement les \u0153uvres qu\u2019ils partagent.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0941ad elementor-widget elementor-widget-text-editor\" data-id=\"d0941ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Pour trouver des .FS : <a href=\"https:\/\/www.interactiveshaderformat.com\/\"><strong>https:\/\/www.interactiveshaderformat.com\/<\/strong><\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abba810 elementor-widget elementor-widget-text-editor\" data-id=\"abba810\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Pour trouver des .FRAG : <strong><a href=\"http:\/\/glslsandbox.com\/\">http:\/\/glslsandbox.com\/<\/a><\/strong> et <strong><a href=\"https:\/\/www.shadertoy.com\/\">https:\/\/www.shadertoy.com\/<\/a><\/strong><\/span><\/p><p><span style=\"font-weight: 400;\">Attention : les .FRAG ne sont pas reconnus dans HeavyM. Il est n\u00e9cessaire de les convertir en .ISF et nous proposons une m\u00e9thode plus bas dans l\u2019article.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1b7eb7 elementor-widget elementor-widget-text-editor\" data-id=\"c1b7eb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Veillez \u00e0 bien v\u00e9rifier les droits d\u2019utilisation dans la licence g\u00e9n\u00e9ralement pr\u00e9cis\u00e9e au d\u00e9but du code du shader. S\u2019il n\u2019y a pas d\u2019indication particuli\u00e8re, le droit d\u2019auteur s\u2019applique donc par d\u00e9faut et nous vous conseillons vivement de discuter avec l\u2019auteur du programme si vous souhaitez en faire une utilisation commerciale.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2af75ba elementor-widget elementor-widget-heading\" data-id=\"2af75ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">D\u00e9velopper ses propres shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e39468 elementor-widget elementor-widget-text-editor\" data-id=\"7e39468\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Pour cr\u00e9er ses propres shaders, nous conseillons d\u2019utiliser directement le format ISF afin qu\u2019ils soient compatibles avec un maximum d\u2019applications. Le but de cet article n\u2019est pas de proposer un apprentissage du code GLSL, le langage utilis\u00e9 par le format ISF. Pour cela nous proposons la lecture des sites tr\u00e8s complet :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44ce316 elementor-widget elementor-widget-text-editor\" data-id=\"44ce316\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/thebookofshaders.com\/\"><strong>https:\/\/thebookofshaders.com\/<\/strong><\/a> pour le langage GLSL<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/docs.isf.video\/\"><strong>https:\/\/docs.isf.video\/<\/strong><\/a> pour le format ISF<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1d3a79 elementor-widget elementor-widget-text-editor\" data-id=\"c1d3a79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">N\u00e9anmoins, pour commencer, n\u2019h\u00e9sitez pas \u00e0 vous rendre sur le site ISF et modifiez des shaders existants. Ce site interactif permet de visualiser en direct les modifications apport\u00e9es au shader. Il est \u00e9galement possible de partir d\u2019un template de base. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c970ae3 elementor-widget elementor-widget-text-editor\" data-id=\"c970ae3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">L\u2019inconv\u00e9nient principal de la cr\u00e9ation et de la modification de shaders est qu\u2019il n\u2019y a pas de retour d\u2019erreur. Lorsqu\u2019il y a un probl\u00e8me de conception, le shader ne s\u2019ex\u00e9cute pas ou n\u2019affiche rien. Il est alors difficile de retrouver la source de l\u2019erreur. Il est donc n\u00e9cessaire d\u2019\u00eatre rigoureux dans le code.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54ce36a elementor-widget elementor-widget-heading\" data-id=\"54ce36a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Partie 2 : les shaders dans HeavyM<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9726525 elementor-widget elementor-widget-text-editor\" data-id=\"9726525\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le logiciel HeavyM propose nativement quelques centaines de shaders dans sa biblioth\u00e8que d\u2019effets visuels int\u00e9gr\u00e9s. Plusieurs types d\u2019effets sont utilisables dans le logiciel, en fonction des fonctionnalit\u00e9s utilis\u00e9es.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5252660 elementor-widget elementor-widget-heading\" data-id=\"5252660\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les shaders d\u2019effets sur les formes<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc24268 elementor-widget elementor-widget-text-editor\" data-id=\"bc24268\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Lorsque vous cliquez sur les ic\u00f4nes rouges \u00e0 droite de l\u2019interface, vous avez acc\u00e8s \u00e0 des cat\u00e9gories d\u2019effets qui s\u2019adaptent automatiquement aux formes dessin\u00e9es. Ces effets sont li\u00e9s aux groupes du panneau des calques \u00e0 gauche. Toutes les formes d\u2019un groupe ont la m\u00eame apparence. Pour avoir des effets diff\u00e9rents selon les formes, il est n\u00e9cessaire de cr\u00e9er d\u2019autres groupes et d\u2019y ajouter des formes.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-752d18a elementor-widget elementor-widget-image\" data-id=\"752d18a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"999\" height=\"113\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-Effects-on-shapes.png.webp\" class=\"attachment-full size-full wp-image-14262 lazyload\" alt=\"HeavyM Shaders - Effets sur les formes\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-Effects-on-shapes.png.webp 999w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-Effects-on-shapes-300x34.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-Effects-on-shapes-768x87.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-Effects-on-shapes-18x2.png.webp 18w\" data-sizes=\"(max-width: 999px) 100vw, 999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 999px; --smush-placeholder-aspect-ratio: 999\/113;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25a99eb elementor-widget elementor-widget-text-editor\" data-id=\"25a99eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il n\u2019est actuellement pas possible d\u2019ajouter ou de modifier les shaders d\u2019effets existants sur cette cat\u00e9gorie.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c96abcd elementor-widget elementor-widget-heading\" data-id=\"c96abcd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les shaders de g\u00e9n\u00e9ration d\u2019image<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e09377 elementor-widget elementor-widget-text-editor\" data-id=\"8e09377\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Ajoutez des shaders de g\u00e9n\u00e9ration d\u2019image comme sources, dans le panneau accessible gr\u00e2ce \u00e0 l\u2019ic\u00f4ne blanche situ\u00e9e dans la barre d\u2019outil verticale \u00e0 droite. Ces shaders n\u00e9cessitent la cr\u00e9ation d\u2019un player afin de s\u2019afficher. Liez la source au player en cliquant sur l\u2019ic\u00f4ne en forme de cible. Les shaders de g\u00e9n\u00e9ration d\u2019image ne poss\u00e8dent pas de dur\u00e9e par d\u00e9faut car il s\u2019agit d\u2019un programme qui tourne en boucle. Vous pouvez cependant modifier la dur\u00e9e d\u2019affichage de la source.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6530f2 elementor-widget elementor-widget-image\" data-id=\"b6530f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"428\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Generative-effects.png.webp\" class=\"attachment-full size-full wp-image-14261 lazyload\" alt=\"Shaders - Effets g\u00e9n\u00e9ratifs\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Generative-effects.png.webp 1000w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Generative-effects-300x128.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Generative-effects-768x329.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Generative-effects-18x8.png.webp 18w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/428;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d72009 elementor-widget elementor-widget-heading\" data-id=\"0d72009\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les shaders de traitement sur les players<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44ac0a4 elementor-widget elementor-widget-text-editor\" data-id=\"44ac0a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vous avez la possibilit\u00e9 d\u2019appliquer des effets de traitement d\u2019image sur le player. Pour cela, s\u00e9lectionnez le player et ajoutez des effets dans les Propri\u00e9t\u00e9s en bas \u00e0 gauche \u00e0 l\u2019aide du bouton +. Les effets s'ajoutent les uns \u00e0 la suite des autres. Chaque player est ind\u00e9pendant donc la source et les effets de traitement seront diff\u00e9rents entre les players, m\u00eame si les players sont dans le m\u00eame groupe.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84f8634 elementor-widget elementor-widget-image\" data-id=\"84f8634\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"999\" height=\"464\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Players-effects.png.webp\" class=\"attachment-full size-full wp-image-14260 lazyload\" alt=\"Shaders - Effets de jeu\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Players-effects.png.webp 999w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Players-effects-300x139.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Players-effects-768x357.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/Shaders-Players-effects-18x8.png.webp 18w\" data-sizes=\"(max-width: 999px) 100vw, 999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 999px; --smush-placeholder-aspect-ratio: 999\/464;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b87a3c0 elementor-widget elementor-widget-heading\" data-id=\"b87a3c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les shaders de traitement sur les s\u00e9quences<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-903a8c4 elementor-widget elementor-widget-text-editor\" data-id=\"903a8c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Des shaders de traitement d\u2019image peuvent aussi s'appliquer sur toute la sortie vid\u00e9o. Ces effets sont relatifs aux s\u00e9quences. Pour ajouter un effet de traitement sur une s\u00e9quence, cliquez sur la roue dent\u00e9e et ajoutez un shader \u00e0 l\u2019aide du bouton +. Les effets de traitement sur les s\u00e9quences sont les m\u00eames que les effets de traitement sur les players.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23cf2d7 elementor-widget elementor-widget-image\" data-id=\"23cf2d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"426\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sequences-effects.png.webp\" class=\"attachment-full size-full wp-image-14255 lazyload\" alt=\"HeavyM shaders - Effets de s\u00e9quence\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sequences-effects.png.webp 1000w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sequences-effects-300x128.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sequences-effects-768x327.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sequences-effects-18x8.png.webp 18w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/426;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e817dd elementor-widget elementor-widget-heading\" data-id=\"8e817dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les shaders de transitions sur les s\u00e9quences<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f40ca7 elementor-widget elementor-widget-text-editor\" data-id=\"3f40ca7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les transitions sont elles aussi relatives aux s\u00e9quences et s\u2019appliquent sur toute la sortie vid\u00e9o. Par d\u00e9faut, la transition appliqu\u00e9e est un fondu de 0,20s. Modifiez cette transition dans le menu accessible en cliquant sur la roue dent\u00e9e de la s\u00e9quence. Les transitions s\u2019appliquent uniquement en entr\u00e9e de la s\u00e9quence.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cf041d elementor-widget elementor-widget-image\" data-id=\"7cf041d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"657\" height=\"487\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Transitions.png.webp\" class=\"attachment-full size-full wp-image-14244 lazyload\" alt=\"HeavyM - Transitions\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Transitions.png.webp 657w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Transitions-300x222.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Transitions-16x12.png.webp 16w\" data-sizes=\"(max-width: 657px) 100vw, 657px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 657px; --smush-placeholder-aspect-ratio: 657\/487;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49b5abf elementor-widget elementor-widget-heading\" data-id=\"49b5abf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Importer des shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e6fcd1 elementor-widget elementor-widget-text-editor\" data-id=\"5e6fcd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Nous avons vu qu\u2019il y a deux principales cat\u00e9gories de shaders dans HeavyM : les shaders de g\u00e9n\u00e9ration et les shaders de traitement. HeavyM permet de combiner facilement les shaders de ces deux cat\u00e9gories. HeavyM propose des shaders par d\u00e9faut dans les onglets Library de chaque fen\u00eatre de s\u00e9lection des shaders. Tous ces shaders sont des .FS et respectent donc le standard ISF. Afin d\u2019importer vos propres shaders dans l\u2019onglet My Shaders, il est n\u00e9cessaire de respecter ce standard. Ainsi, les param\u00e8tres de vos shaders pourront \u00eatre facilement modifi\u00e9s avec l\u2019interface de HeavyM.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f42a195 elementor-widget elementor-widget-text-editor\" data-id=\"f42a195\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\"><span style=\"font-weight: 400\">Vous voulez importer d'autres formats de shaders dans HeavyM ? Il est tr\u00e8s simple de convertir des shaders avec cet outil : <\/span><strong><a href=\"https:\/\/isf.vidvox.net\/desktop-editor\/\" target=\"_blank\" rel=\"noopener\">Desktop ISF Editor<\/a><\/strong><span style=\"font-size: 16px\">\u00a0(Windows beta\/Mac) avec les fonctions \u201cImport from GLSL Sandbox\u201d et \u201cImport from Shadertoy\u201d functions.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1d4fa8 elementor-widget elementor-widget-text-editor\" data-id=\"c1d4fa8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"translation-block\"><span style=\"font-weight: 400\">Enfin, si vous cherchez \u00e0 comprendre l\u2019architecture du format ISF dans les moindres d\u00e9tails pour en cr\u00e9er par vous m\u00eame, nous vous conseillons de jeter un oeil \u00e0 la documentation du format ISF : <\/span><strong><a href=\"https:\/\/docs.isf.video\/\" target=\"_self\">https:\/\/docs.isf.video\/<\/a> <\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-659fe77 elementor-widget elementor-widget-heading\" data-id=\"659fe77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Partie 3 : contr\u00f4ler les shaders<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4310df2 elementor-widget elementor-widget-text-editor\" data-id=\"4310df2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les shaders permettent des effets visuels temps r\u00e9el modifiables en direct, sans avoir \u00e0 passer par une \u00e9tape de rendu. Voici les diff\u00e9rentes possibilit\u00e9s pour contr\u00f4ler vos effets et cr\u00e9er des visuels interactifs.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-171a6d8 elementor-widget elementor-widget-text-editor\" data-id=\"171a6d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les param\u00e8tres du shader sont modifiables en cliquant sur la roue dent\u00e9e de l\u2019ic\u00f4ne de la source. L\u2019\u00e9chelle de valeur est norm\u00e9e entre 0 et 100 et ne correspond pas \u00e0 une unit\u00e9 particuli\u00e8re. Diff\u00e9rents modes de variation des param\u00e8tres sont propos\u00e9s dans HeavyM, retrouvez-les en cliquant sur la fl\u00e8che \u00e0 c\u00f4t\u00e9 de chaque param\u00e8tre de shaders.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26953df elementor-widget elementor-widget-heading\" data-id=\"26953df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Le mode Fixed Value<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a365f8e elementor-widget elementor-widget-text-editor\" data-id=\"a365f8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il s\u2019agit du mode par d\u00e9faut qui permet de modifier la valeur \u00e0 l\u2019aide de la souris. L\u2019inconv\u00e9nient est donc que vous ne pouvez modifier qu\u2019un seul param\u00e8tre \u00e0 la fois. Vous pouvez aussi entrer une valeur au clavier.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c22ed3a elementor-widget elementor-widget-heading\" data-id=\"c22ed3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les g\u00e9n\u00e9rateurs de valeurs<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6417680 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6417680\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ccd6950\" data-id=\"ccd6950\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7ac94ed elementor-widget elementor-widget-text-editor\" data-id=\"7ac94ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">HeavyM propose 7 g\u00e9n\u00e9rateurs de valeurs qui permettent de modifier automatiquement les param\u00e8tres des shaders. Ce sont des g\u00e9n\u00e9rateurs de type LFO pour Low Frequency Oscillator, comme l\u2019on retrouve sur des logiciels de musique ou des synth\u00e9tiseurs. Pour chaque g\u00e9n\u00e9rateur, il existe deux modes d\u2019animation : BPM ou temporel. Le mode BPM est li\u00e9 au Tempo g\u00e9n\u00e9ral en bas \u00e0 droite de l\u2019interface, symbolis\u00e9 par l\u2019ic\u00f4ne de m\u00e9tronome. Le mode temporel permet de d\u00e9finir une fr\u00e9quence ind\u00e9pendante du Tempo g\u00e9n\u00e9ral.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-19ee236\" data-id=\"19ee236\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6c48d53 elementor-widget elementor-widget-image\" data-id=\"6c48d53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"272\" height=\"291\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-LFOs.png.webp\" class=\"attachment-full size-full wp-image-14240 lazyload\" alt=\"HeavyM - LFOs\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-LFOs.png.webp 272w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-LFOs-11x12.png.webp 11w\" data-sizes=\"(max-width: 272px) 100vw, 272px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 272px; --smush-placeholder-aspect-ratio: 272\/291;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2a9616 elementor-widget elementor-widget-heading\" data-id=\"e2a9616\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Le contr\u00f4le gr\u00e2ce \u00e0 l\u2019analyse sonore<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1cbcb86 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1cbcb86\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-23e9080\" data-id=\"23e9080\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b3d6e0 elementor-widget elementor-widget-text-editor\" data-id=\"3b3d6e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">En bas \u00e0 droite de l\u2019interface se trouve le module d\u2019analyse sonore. Il permet de d\u00e9tecter des variations d\u2019amplitude sur 3 plages de fr\u00e9quences diff\u00e9rentes : Bass Mid High. Retrouvez les variations de ces valeurs dans les modes de variation des param\u00e8tres de shaders.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fde7f5c\" data-id=\"fde7f5c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f396bc6 elementor-widget elementor-widget-image\" data-id=\"f396bc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"323\" height=\"175\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sound-analysis.png.webp\" class=\"attachment-full size-full wp-image-14236 lazyload\" alt=\"HeavyM shaders - Analyse sonore\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sound-analysis.png.webp 323w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sound-analysis-300x163.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-shaders-Sound-analysis-18x10.png.webp 18w\" data-sizes=\"(max-width: 323px) 100vw, 323px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 323px; --smush-placeholder-aspect-ratio: 323\/175;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d6429 elementor-widget elementor-widget-heading\" data-id=\"57d6429\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Contr\u00f4le MIDI<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10a497d elementor-widget elementor-widget-text-editor\" data-id=\"10a497d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Vous souhaitez contr\u00f4ler manuellement plusieurs param\u00e8tres en m\u00eame temps ? Utilisez le protocole MIDI. Il existe sur le march\u00e9 un tr\u00e8s grand nombre de contr\u00f4leurs MIDI pour la musique. Sachez qu\u2019ils sont tous compatibles avec HeavyM. Connectez votre mat\u00e9riel dans la fen\u00eatre de configuration, accessible gr\u00e2ce \u00e0 l\u2019ic\u00f4ne orange en haut \u00e0 droite de l\u2019interface. Ensuite, le mode MIDI learning permet de configurer le lien entre les param\u00e8tres des shaders et les touches de votre mat\u00e9riel.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0292179 elementor-widget elementor-widget-image\" data-id=\"0292179\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"998\" height=\"620\" data-src=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-MIDI-1.png.webp\" class=\"attachment-full size-full wp-image-14232 lazyload\" alt=\"HeavyM Shaders - MIDI\" data-srcset=\"https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-MIDI-1.png.webp 998w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-MIDI-1-300x186.png.webp 300w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-MIDI-1-768x477.png.webp 768w, https:\/\/www.heavym.net\/wp-content\/smush-webp\/2021\/10\/HeavyM-Shaders-MIDI-1-18x12.png.webp 18w\" data-sizes=\"(max-width: 998px) 100vw, 998px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 998px; --smush-placeholder-aspect-ratio: 998\/620;\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47b757c elementor-widget elementor-widget-heading\" data-id=\"47b757c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-177ef86 elementor-widget elementor-widget-text-editor\" data-id=\"177ef86\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les possibilit\u00e9s cr\u00e9atives offertes par les shaders sont infinies. Ces programmes permettent d\u2019exploiter la puissance de votre carte graphique en quelques clics. Votre ordinateur vous permet ainsi d\u2019acc\u00e9der facilement \u00e0 l\u2019art g\u00e9n\u00e9ratif qui consiste \u00e0 cr\u00e9er des \u0153uvres \u00e0 partir d\u2019algorithmes. De nombreux artistes num\u00e9riques utilisent cette technique, par exemple Antoine Schmidt, Miguel Chevalier, Vera Moln\u00e1r, Du Zhenjun, Daniel Rozin\u2026\u00a0<\/span><\/p><p><span style=\"font-weight: 400;\">Avec HeavyM, nous avons vu qu\u2019il est tr\u00e8s simple d\u2019utiliser et contr\u00f4ler des shaders. Combinez-les sans limites pour cr\u00e9er vos propres visuels et votre propre identit\u00e9 !<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Back to Blog home Introduction to the HeavyM shaders to create your own VFX Introduction You&#8217;re interested in creating your own visual effects in HeavyM? In this article, we will introduce the exciting creative possibilities offered by the shaders. By the way, what is a shader? A shader is a computer program that runs on [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":11155,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-10381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introduction to HeavyM Shaders \u2013 Create Your Own VFX<\/title>\n<meta name=\"description\" content=\"Interested in creating your own HeavyM shaders? We&#039;ll introduce the exciting creative possibilities offered by the software to do it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heavym.net\/fr\/heavym-shaders\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to the HeavyM shaders to create your own VFX\" \/>\n<meta property=\"og:description\" content=\"Interested in creating your own HeavyM shaders? We&#039;ll introduce the exciting creative possibilities offered by the software to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heavym.net\/fr\/heavym-shaders\/\" \/>\n<meta property=\"og:site_name\" content=\"HeavyM\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-12T07:37:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-27T15:35:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"288\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"HeavyM Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/\"},\"author\":{\"name\":\"HeavyM Team\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#\\\/schema\\\/person\\\/91aa653987c9f5917f1a56dd531a1b11\"},\"headline\":\"Introduction to the HeavyM shaders to create your own VFX\",\"datePublished\":\"2021-10-12T07:37:11+00:00\",\"dateModified\":\"2025-02-27T15:35:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/\"},\"wordCount\":2068,\"publisher\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/1-3.jpeg\",\"articleSection\":[\"Technology\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/\",\"url\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/\",\"name\":\"Introduction to HeavyM Shaders \u2013 Create Your Own VFX\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/1-3.jpeg\",\"datePublished\":\"2021-10-12T07:37:11+00:00\",\"dateModified\":\"2025-02-27T15:35:18+00:00\",\"description\":\"Interested in creating your own HeavyM shaders? We'll introduce the exciting creative possibilities offered by the software to do it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/1-3.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/1-3.jpeg\",\"width\":512,\"height\":288,\"caption\":\"Example of a video game using shaders: Minecraft\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/heavym-shaders\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.heavym.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to the HeavyM shaders to create your own VFX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#website\",\"url\":\"https:\\\/\\\/www.heavym.net\\\/\",\"name\":\"HeavyM\",\"description\":\"Easy Projection Mapping\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.heavym.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#organization\",\"name\":\"HeavyM\",\"url\":\"https:\\\/\\\/www.heavym.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Logo-Horizontale-Base-Avec-signature-100.jpg\",\"contentUrl\":\"https:\\\/\\\/www.heavym.net\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/Logo-Horizontale-Base-Avec-signature-100.jpg\",\"width\":426,\"height\":426,\"caption\":\"HeavyM\"},\"image\":{\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.heavym.net\\\/#\\\/schema\\\/person\\\/91aa653987c9f5917f1a56dd531a1b11\",\"name\":\"HeavyM Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g\",\"caption\":\"HeavyM Team\"},\"url\":\"https:\\\/\\\/www.heavym.net\\\/fr\\\/author\\\/houssam\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introduction aux shaders HeavyM - Cr\u00e9ez vos propres VFX","description":"Vous souhaitez cr\u00e9er vos propres shaders HeavyM ? Nous vous pr\u00e9senterons les possibilit\u00e9s cr\u00e9atives passionnantes offertes par le logiciel permettant de le faire.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heavym.net\/fr\/heavym-shaders\/","og_locale":"fr_FR","og_type":"article","og_title":"Introduction to the HeavyM shaders to create your own VFX","og_description":"Interested in creating your own HeavyM shaders? We'll introduce the exciting creative possibilities offered by the software to do it.","og_url":"https:\/\/www.heavym.net\/fr\/heavym-shaders\/","og_site_name":"HeavyM","article_published_time":"2021-10-12T07:37:11+00:00","article_modified_time":"2025-02-27T15:35:18+00:00","og_image":[{"width":512,"height":288,"url":"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg","type":"image\/jpeg"}],"author":"HeavyM Team","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heavym.net\/heavym-shaders\/#article","isPartOf":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/"},"author":{"name":"HeavyM Team","@id":"https:\/\/www.heavym.net\/#\/schema\/person\/91aa653987c9f5917f1a56dd531a1b11"},"headline":"Introduction to the HeavyM shaders to create your own VFX","datePublished":"2021-10-12T07:37:11+00:00","dateModified":"2025-02-27T15:35:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/"},"wordCount":2068,"publisher":{"@id":"https:\/\/www.heavym.net\/#organization"},"image":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg","articleSection":["Technology"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.heavym.net\/heavym-shaders\/","url":"https:\/\/www.heavym.net\/heavym-shaders\/","name":"Introduction aux shaders HeavyM - Cr\u00e9ez vos propres VFX","isPartOf":{"@id":"https:\/\/www.heavym.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/#primaryimage"},"image":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg","datePublished":"2021-10-12T07:37:11+00:00","dateModified":"2025-02-27T15:35:18+00:00","description":"Vous souhaitez cr\u00e9er vos propres shaders HeavyM ? Nous vous pr\u00e9senterons les possibilit\u00e9s cr\u00e9atives passionnantes offertes par le logiciel permettant de le faire.","breadcrumb":{"@id":"https:\/\/www.heavym.net\/heavym-shaders\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heavym.net\/heavym-shaders\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.heavym.net\/heavym-shaders\/#primaryimage","url":"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg","contentUrl":"https:\/\/www.heavym.net\/wp-content\/uploads\/2021\/07\/1-3.jpeg","width":512,"height":288,"caption":"Example of a video game using shaders: Minecraft"},{"@type":"BreadcrumbList","@id":"https:\/\/www.heavym.net\/heavym-shaders\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heavym.net\/"},{"@type":"ListItem","position":2,"name":"Introduction to the HeavyM shaders to create your own VFX"}]},{"@type":"WebSite","@id":"https:\/\/www.heavym.net\/#website","url":"https:\/\/www.heavym.net\/","name":"HeavyM","description":"Easy Projection Mapping (en anglais)","publisher":{"@id":"https:\/\/www.heavym.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.heavym.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.heavym.net\/#organization","name":"HeavyM","url":"https:\/\/www.heavym.net\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.heavym.net\/#\/schema\/logo\/image\/","url":"https:\/\/www.heavym.net\/wp-content\/uploads\/2025\/02\/Logo-Horizontale-Base-Avec-signature-100.jpg","contentUrl":"https:\/\/www.heavym.net\/wp-content\/uploads\/2025\/02\/Logo-Horizontale-Base-Avec-signature-100.jpg","width":426,"height":426,"caption":"HeavyM"},"image":{"@id":"https:\/\/www.heavym.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.heavym.net\/#\/schema\/person\/91aa653987c9f5917f1a56dd531a1b11","name":"L'\u00e9quipe HeavyM","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b90694fb04d50a98286ba18e6dfd39d4c075bf22e4f2166a1aa9601a12b02923?s=96&d=mm&r=g","caption":"HeavyM Team"},"url":"https:\/\/www.heavym.net\/fr\/author\/houssam\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/posts\/10381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/comments?post=10381"}],"version-history":[{"count":81,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/posts\/10381\/revisions"}],"predecessor-version":[{"id":32776,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/posts\/10381\/revisions\/32776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/media\/11155"}],"wp:attachment":[{"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/media?parent=10381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/categories?post=10381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heavym.net\/fr\/wp-json\/wp\/v2\/tags?post=10381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}