Shader d’explosion de pixels avec WebGL (2/2)

30 septembre 20169 juillet 2019 SoCpixel shader, redimensionnement, rotation, translation, vertex shader, WebGL

Cet article est le second (et donc dernier) d'une série portant sur la production d'une animation de "pixels" s'éloignant d'un point d'origine en tournoyant (autour de leurs centres et autour du centre de l'écran), en grossissant et devenant toujours plus transparents jusqu'à disparaître de l'écran.

Dans le premier article, nous avons vu comment créer le vertex shader (VS) et fragment shader (FS) et les alimenter en données pour que tous les "pixels" soient transformés et rendus en appelant une seule fois drawElements () par étape de l'animation.

Reste à voir comment produire l'animation. A étape régulière, il faut :

mettre à jour l'angle de rotation β, le facteur de zoom Z et les composantes du vecteur de translation de chaque "pixels" ;
alimenter les shaders avec les données des points auxquelles ces données relatives à la transformation sont annexées ;
commander la transformation et le rendu des "pixels".

Continuer la lecture de "Shader d’explosion de pixels avec WebGL (2/2)" →

Shader d’explosion de pixels avec WebGL (1/2)

20 septembre 20169 juillet 2019 SoCpixel shader, redimensionnement, rotation, translation, vertex shader, WebGL

En s'appuyant sur les shaders - le vertex shader (VS) et le fragment shader (FS) - de WebGL, produire une animation de "pixels" s'éloignant d'un point d'origine en tournoyant (autour de leurs centres et autour du centre de l'écran), en grossissant et devenant toujours plus transparents jusqu'à disparaître de l'écran, comme sur la figure suivante qui reprend quatre étapes :

Quatre étapes de l'explosion de "pixels"

WebGL est simple à utiliser. La difficulté réside dans un dilemme auquel le développeur est inévitablement confronté dès qu'il s'attaque à des effets un peu compliqués :

déporter la transformation des points dans les shaders si bien qu'il suffit d'appeler une fois drawElements () pour rendre tous les éléments lors d'une étape de l'animation, mais c'est au prix d'une inflation du buffer des points et d'une mise à jour fréquente de ce dernier ;
déporter la transformation des points dans le programme principal (ie : le programme JavaScript) si bien qu'il est possible de créer une fois pour toutes le buffer des points, mais c'est au prix d'autant d'appels à drawElements () qu'il y a d'éléments à rendre lors d'une étape de l'animation.

Pour être complet, il faut évoquer une troisième solution qui consiste à déporter la transformation des points dans le programme principal, lequel met à jour le buffer des points avec les résultats de cette transformation avant d'appeler une seule fois drawElements (), et ce à chaque étape de l'animation. Toutefois, cette solution doit être écartée, car elle revient à réduire le VS au rang de passe-plat entre le programme principal et le FS puisque le VS est alimenté avec des points déjà transformés. Or si le GPU peut assurer la transformation des points, autant l'utiliser, car cela libère le CPU pour d'autres tâches.

Cet article est le premier d'une série de deux. Il est consacré à la logique générale du programme et à l'initialisation de WebGL incluant l'écriture du code des shaders. Le second article sera consacré à la boucle d'animation. Les deux articles ne rentreront pas dans le détail d'un commentaire ligne par ligne du code de l'exemple mis à disposition, mais rien de ce qui concerne WebGL ne sera ignoré.

Continuer la lecture de →