Faciliter la modification du format de point WebGL en JavaScript

Ceux qui programment directement WebGL, version 1 ou 2, avec JavaScript connaissent l’enfer que représente l’élaboration d’un shader. Qu’un format de point soit modifié, et plus généralement qu’un attribut de point, une composante variable ou une variable uniforme soit supprimé, rajouté ou modifié dans le code GLSL d’un shader, et il faut :
  • mettre à jour leur liste avant la fonction main () du shader ;
  • dans le cas d’uniformes, mettre à jour la liste des appels à getUniformLocation () ;
  • dans le cas d’attributs, ce qui résulte inévitable de la modification du format de point :
    • mettre à jour la liste des appels à getAttribLocation () ;
    • mettre à jour la liste des appels à enableVertexAttribArray (), enableVertexAttribArray (), vertexAttribPointer et disableVertexAttribArray () ;
Exemple d'animation modifiée à la volée avec les shaders
Pour soulager la vie du développeur, WebGL 2 met désormais à disposition un nouvel objet : le Vertex Array Object, ou VBO pour les intimes. Il permet d’éviter de répéter dans le code des séquences d’appels pour configurer les attributs avant chaque rendu.
Toutefois, cela ne répond que très partiellement au problème évoqué à l’instant, car les mises à jour évoquées restent toujours aussi nécessaires et fastidieuses, quand bien même les occurences des appels à modifier sont réduites. N’y a-t-il pas moyen de se simplifier la vie ? Modeste proposition.
NB : Cet article renoue avec le format abrégé de premiers articles de ce blog. C’est qu’au terme d’une série de prises en main de technologies Web (WebG 2, promises, fonction fléchées, Web Components, etc.), un certain de nombre de difficultés rencontrées dans le cadre du développement d’une application à base de JavaScript et de WebGL en donnent l’opportunité.
Continuer la lecture de « Faciliter la modification du format de point WebGL en JavaScript »
Faciliter la modification du format de point WebGL en JavaScript

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

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.
L'explosion de "pixels"
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 (2/2)

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

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 « Shader d’explosion de pixels avec WebGL (1/2) »
Shader d’explosion de pixels avec WebGL (1/2)

Rendu vectoriel avec WebGL

Comment utiliser la puissance de WebGL pour effectuer le rendu de figures vectorielles, c’est-à-dire d’objets bidimensionnels, dans une page Web, sachant que WebGL est une API pour le rendu d’objets tridimensionnels ? Par exemple, le rendu d’un triangle dont les couleurs assignées aux sommets sont interpolées sur toute la surface :
Rendu d'un triangle 2D avec interpolation de couleurs
Continuer la lecture de « Rendu vectoriel avec WebGL »
Rendu vectoriel avec WebGL