Firefox 27 implémente un tout nouvel éditeur de shaders rendant la création d'applications WebGL plus aisée. Un tel outil est très important pour les développeurs sachant que toute application WebGL nécessite des shaders pour effectuer le rendu.
Pour rappel, un shader est un morceau de code utilisant un langage spécifique (GLSL pour les bibliothèque OpenGL/WebGL, HLSL pour DirectX) compilé et exécuté exclusivement sur la carte graphique. Le programme permet de déterminer comment afficher les pixels à l'écran (en calculant les transformations, les couleurs, les textures et autres effets de lumière, d'ombres...). Vous pouvez retrouver une introduction à ce langage ici.
Si vous vous rappelez de la démonstration d'Epic Game : Epic Citadel, il est à noter que ce programme contient 249 shaders dont certains approchent les 2 000 lignes de code.
Comme tout autre programme, un shader doit être débogué. Sachant qu'il s'exécute sur la carte graphique, ne pensez pas qu'il soit possible de rajouter des simples printf() dans le code. Le résultat d'un shader et l'affichage des éléments à l'écran. Il faut donc des outils permettant une édition rapide des shaders afin de voir rapidement les changements dans le code.
Shader Editor
Voici une vidéo présentant le nouvel éditeur :
Il faut savoir que chaque modification de shader nécessitait un rafraîchissement de la page.
Pour activer l'éditeur, il suffira d'ouvrir la boîte à outils (F12 ou Ctrl/Cmd + Maj + I), cliquez sur l'icône d’engrenage pour accéder aux options de la boîte à outils et finalement de s'assurer que l'option "Shader Editor" est activée.
Lorsque celle-ci est activée, vous devez immédiatement voir un nouvel onglet "Shader Editor" dans la boîte à outils.
L'éditeur est simple d'usage. Sur sa gauche, vous avez la liste des « shaders programs » et des vertex ou fragment shaders lui correspondant. Le passage de la souris sur un programme met en surbrillance les éléments de votre rendu affichés par ce shader. Vous pouvez aussi masquer les géométries des shaders indépendamment.
Lorsque vous éditez le code GLSL et que vous avez des erreurs de compilation, l'éditeur met la ligne en surbrillance et vous indique le message d'erreur. Le rendu n'est pas affecté en cas d'erreur.
Voici une seconde vidéo de présentation pour l'outil, cette fois, directement sur la démonstration de l'Unreal Engine :
Il faut bien comprendre que l'édition dynamique est limitée. En effet, il n'est pas possible de rajouter de nouvelles variables uniformes ou des attributs à vos sommets.
Il arrive aussi que l'éditeur, notamment en cas de passage de la souris sur certains programmes, provoque des défauts de rendu. Malgré cela, l'éditeur est totalement utilisable.
Votre opinion
Comment accueillez-vous un tel éditeur ? Avez-vous déjà testé des éditeurs live (ShaderToy...) ?Voir aussi
Les tutoriels en français sur WebGL.
Source
Mozilla
