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)

Enveloppe régulière d’un polygone quelconque

Comment calculer les coordonnées des points formant une enveloppe régulière d’un polygone quelconque, c’est-à-dire une version plus grande ou plus petite du polygone qui semble parfaitement s’emboîter avec ce dernier (enveloppe homothétique) ? :
Enveloppe homothétique d'un polygone
Le parfait emboîtage de l’enveloppe et du polygone tient au fait que la distance entre un sommet du polygone et le sommet correspondant de l’enveloppe est constante.
Calculer les coordonnées des sommets de l’enveloppe par simple application d’un facteur d’agrandissement aux coordonnées des sommest du polygone ne permet pas de parvenir au résultat souhaité. En effet, un tel facteur ne pourrait s’appliquer qu’autour d’un centre, c’est-à-dire un point qui devrait se trouver à égale distance de tous les sommets du polygone pour entraîner un éloignement ou un rapprochement de la distance attendue des sommets correspondants de l’enveloppe.
Or l’existence d’un ensemble de cercles de même rayon, centrés sur chacun des sommets du polygone, qui se recoupent en un unique point constituant ce centre, n’a rien de systématique. En fait, ce n’est le cas que pour des polygones très particuliers :
Possibilité d'enveloppe homothétique par agrandissement
Dans les autres cas, on constate en pratique qu’il est impossible de trouver ce jeu de cercles qui se recoupent en un même point. Ainsi, sur cet exemple, il serait impossible de positionner l’enveloppe résultant de la simple application d’un facteur d’agrandissement de sorte que les sommets de l’enveloppe se trouvent même à une distance constante des sommets du polygone auxquels ils correspondent :
Impossibilité d'enveloppe homothétique d'un polygone par agrandissement
Continuer la lecture de « Enveloppe régulière d’un polygone quelconque »
Enveloppe régulière d’un polygone quelconque

Déformation de maillage par translation de points

Comment déformer un maillage en modifiant la distance des points à un centre comme s’ils étaient attirés ou repoussés par ce centre selon une force dont l’intensité dépend de la distance ? Le résultat attendu est par exemple le suivant :
Déformation d'un maillage par translation des points
Continuer la lecture de « Déformation de maillage par translation de points »
Déformation de maillage par translation de points