1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
---
title: Éditeur de Shaders
slug: Outils/Editeur_de_shaders
tags:
- Tools
- Web Development
translation_of: Tools/Shader_Editor
---
<div>{{ToolsSidebar}}</div>
<div class="blockIndicator note">
<p>Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : <a href="/fr/docs/Tools/Deprecated_tools">Outils Dépréciés</a>.</p>
</div>
<p>L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par <a href="/fr/docs/Web/WebGL">WebGL</a></p>
<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
<p>WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">processus d’affichage d'OpenGL </a>Le premier shader est un <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a> qui fournit la couleur de chaque pixel qui doit être affiché.<br>
<br>
Ces shaders sont codés dans le langage OpenGL Shading, ou <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.</p>
<p>Avec l'Éditeur de Shaders il est possible d’examiner et d'éditer la sources de vertex shaders et de fragment shaders.</p>
<p>Voici une autre vidéo montrant comment utiliser l'Éditeur de Shader pour des applications complexes (dans ce cas, la démo l'<a href="http://www.unrealengine.com/html5/">Unreal Engine</a>) :</p>
<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
<h2 id="Ouvrir_l'Éditeur_de_Shaders">Ouvrir l'Éditeur de Shaders</h2>
<p>L'Éditeur de Shaders est désactivé par défaut. Pour l'activer, il faut ouvrir les <a href="/en-US/docs/Tools_Toolbox#Settings">paramètres de la Boite à Outils</a> et cocher "Éditeur de shaders" dans la section "Outils de développement par défaut". L'Éditeur de Shaders apparaitra alors dans la barre d'outils de la Boite à Outils. Cliquez dessus pour ouvrir l'Éditeur de Shaders.</p>
<p><br>
Au début il y a qu'une fenêtre vide avec un bouton demandant de recharger la page :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Pour commencer, il faut charger une page qui crée un contexte WebGL et charge un programme dedans. Les captures d'écran ci-dessous sont tirées de la démo de l'<a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
<p>Une fenêtre apparait alors divisée en trois panneaux : une liste de tous les programmes GLSL sur la gauche, le vertex shader en cours du programme sélectionné au milieu et le fragment shader en cours du programme sélectionné sur la droite :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Gérer_les_programmes">Gérer les programmes</h2>
<p>Le panneau de gauche liste tous les programmes utilisés par le contexte WebGL. En survolant un élément dans la liste, la figure géométrique affichée par le programme est coloré en rouge vif :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquer sur l’icône en forme d'œil sur la gauche d'un programme désactivera ce programme. Ceci est pratique pour se concentrer sur certains shaders ou pour cacher des éléments qui se superposent :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Si vous cliquez sur un programme, ses vertex et fragment shaders sont affichés dans les deux autres panneaux et vous pouvez les modifier.</p>
<h2 id="Modifier_des_shaders">Modifier des shaders</h2>
<p>Cliquer sur un programme affichera son vertex shader (panneau du milieu) et son fragment shader (panneau de droite), il sera alors possible de les modifier.<br>
Les changements réalisés seront visibles lors du ré-affichage du contexte WebGL (par exemple lors de la prochaine frame). Il est par exemple possible de modifier des couleurs :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">L'éditeur met en surbrillance les erreurs dans le code :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Survoler la croix affiché à coté d'une ligne contenant une erreur montrera plus de détails sur le problème :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
|
