WebGL

Des wrappers de shaders et de programme pour WebGL

SoC, ,
Dans un article précédent, il a été question d'un moyen pour faciliter la conception de shaders lors de l'écriture d'applications WebGL en JavaScript.
A l'occasion de la reprise d'un projet fondé sur ces technologies, il est apparu possible de simplifier plus encore non seulement la conception, mais aussi l'utilisation, et ce non seulement des shaders, mais aussi des programmes de WebGL.
Exemple de rendu avec des wrappers de shaders et d'un programme pour WebGL
Comme les helpers, la solution proposée ici s'appuie sur WebGL 2, en mettant notamment à profit ce nouvel objet : le Vertex Array Object, ou VAO pour les intimes.
D'ailleurs, ce sera l'occasion de préciser la manière dont cet objet fonctionne exactement, tant il est vrai que les explications fournies par Khronos peuvent être un peu difficiles à suivre...
Continuer la lecture de "Des wrappers de shaders et de programme pour WebGL" →
Des wrappers de shaders et de programme pour WebGL

Un monde en voxels avec ray picking avec WebGL

SoC, , ,
Avant de me lancer éventuellement dans une nouvelle session de challenges sur Root Me, j'ai opté pour une approche moins humiliante du développement en reprenant quelques projets restés en rade. Entre autres, un projet de jeu d'aventure en vectoriel dans une page Web, à base de JavaScript et de WebGL.
A cette occasion, un petit malin m'a soufflé l'idée qu'il serait amusant de pouvoir passer d'une représentation en vectoriel, donc en 2D, à une représentation en 3D, plus spécifiquement en vue isométrique, sur le modèle de l'impressionnant Voxatron. S'il n'était pas question de prétendre produire une telle merveille, du moins était-il effectivement intéressant de s'y essayer.
Comment donc produire un monde à base de voxels à l'aide de JavaScript et de WebGL, quelque chose qui ressemble grosso modo à cela ? :
Un monde en voxels en JavaScript avec WebGL
Explication du service minimum à assurer pour y parvenir, en mobilisant toutefois du code déjà longuement présenté dans différents articles sur ce blog.
Continuer la lecture de "Un monde en voxels avec ray picking avec WebGL" →
Un monde en voxels avec ray picking avec WebGL

Ray casting avec WebGL

SoC,
Pas d'application en 3D interactive sans ray casting ! Cette technique permet de calculer les coordonnées du point d'une surface 3D dont un pixel est la représentation de la projection. Le ray casting sert de base au ray picking, qui permet de déterminer quelle est la surface 3D en question parmi toutes celles de tous les objets 3D de la scène 3D projetée.
Ray casting avec WebGL
Le ray casting constitue une étape importante dans la progression de la connaissance du développeur qui se lance dans la 3D. En effet, l'implémenter correctement suppose d'avoir les idées claires sur le pipeline de transformation.
Explications à l'appui d'un exemple dans ce qui suit.
Continuer la lecture de "Ray casting avec WebGL" →
Ray casting avec WebGL

Projection et projection inverse avec WebGL

SoC,
La multiplication des coordonnées (Xe,Ye,Ze,1.0) d'un point par la matrice de projection de WebGL produit des coordonnées de clipping (Xc,Yc,Zc,Wc).
Comment en déduire les coordonnées du pixel (Xs,Ys) dans le canvas ? A l'inverse, comment retrouver les coordonnées du point à partir des coordonnées du pixel ?
Continuer la lecture de "Projection et projection inverse avec WebGL" →
Projection et projection inverse avec WebGL

Faciliter la modification du format de point WebGL en JavaScript

SoC, , ,
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 VAO 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

Calculer la matrice de projection de WebGL

SoC,
Tout développeur qui s'initie à la 3D avec WebGL est rapidement confronté à une entité mathématique, la matrice de projection :
[ Xe Ye Ze 1 ] x [ 2NR-L 0 0 0 0 2NT-B 0 0 R+LR-L T+BT-B F+NN-F -1 0 0 2FNN-F 0 ]
Les différentes constantes utilisées pour définir le volume de clipping se présentant par exemple ainsi (coupe Y/Z) :
Pyramide tronquée de clipping dans WebGL
Cette matrice peut sembler d'autant plus étrange au développeur qu'elle comporte 4 lignes et 4 colonnes (une matrice 4x4), alors qu'il semblerait que l'on puisse se contenter d'une matrice 3x3 pour réaliser les calculs. D'ailleurs, où est passée l'intervention de Ze au dénominateur dans les calculs ?
Bref, pourquoi cette matrice ? Comment calculer ses coefficients ? Et comment en déduire les coordonnées de la projection d'un point ?
Continuer la lecture de "Calculer la matrice de projection de WebGL" →
Calculer la matrice de projection de WebGL

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

SoC, , , , ,
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)

SoC, , , , ,
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

SoC, , ,
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