[HTML 5][WebGL] Présentation de ShaderElement
Bonjour
Je souhaite porter à votre connaissance ma bibliothèque JavaScript ShaderElement, disponible avec son code source sur Github, qui permet d’écrire simplement et rapidement un PixelShader en GLSL directement à partir du document HTML grâce à une nouvelle balise HTML <shader> et ne nécessitant aucune compétences en JavaScript ou WebGL
L’origine de ce projet vient de la constations, que début 2016, les développeurs web semblent bouder l’accélération graphique alors que la plupart des terminaux Web sont tous compatible avec la technologie WebGL !
Pourquoi ? Je pense que WebGL souffre de l’idée reçu que cette technologie sert uniquement à la 3D temps réel, ce qui est faux cet API permet tout simplement de rasteriser des primitives vectoriel simples ( point, segment et triangle) en utilisant l’accélération graphique et en parallélisant les calculs. Ensuite l’API WebGL est difficile à maîtriser et très peu documenter...
ShaderElement tente de faciliter la tâche des développeurs web souhaitant manipuler des pixels en remplaçant les scripts JavaScript qui utilisent ImageData du Context2D
Cas d'utilisation :
Voici un extrait de code de l’exemple grayscale
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
} |
Le JavaScript itère sur l’ensemble pixel de l’image, or les résolutions des photographies ou des moniteurs ne cessent de croître, la charge du CPU va donc croître également en fonction de cet volumétrie. En plus de freezer le navigateur cela peu décharger plus rapidement les batteries sur Smartphone et tablette !
L’accélération graphique apporté par ShaderElement permet de paralléliser le calcul de chaque pixel, pour cela le code JavaScript effectué dans la boucle d’itération des pixels doit être réécrit en GLSL, ce code sera compilé par ShaderElement en un micro-programme (nommé kernel ou shader) et exécuté par le GPU .
L’exemple grayscale avec ShaderElement devient :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <shader image="{ href : './assets/image1.png' }">
uniform vec2 resolution;
uniform sampler2D image;
void main(void)
{
vec4 c = texture2D(image, gl_FragCoord.xy/resolution);
float brightness = dot(c.rgb, vec3(0.34, 0.5, 0.16));
gl_FragColor.rgb = vec3(brightness);
gl_FragColor.a = c.a;
}
</shader> |
C’est simple ! non ?
D’autres exemples sont également disponibles :
- Colors: de simples shaders 2D de remplissage
- Images: des shaders travaillant avec des images
- Sepia: le filtre sepia , montre également comment modifier dynamiquement la valeur d’un uniform en Javascript
- SkyBox: utilisation simple d’un cubemap
- Fire: rendue de flammes en utilisant du bruit
- La Calanque : rendue de synthèse d’une calanque marseillaise
- Video : quelque effets (sepia et scanline ) appliqués à une vidéo
- DisoluteVideo : un effet de dissolution sur une vidéo
- Mouse : affiche un disque sur les coordonée de la sourie et s'anime lorque l'on maintient le bouton appuyé
- Landscape : vol libre à travers un superbe paysage procédurale
