Comprendre les bases de la programmation graphique avec les Shaders et WebGL

Je créer ce topic suite à cette discussion, pour résumer Darkyl cherchant à créer un moteur graphique 3D isométrique avec le contexte 2D de la balise <canva/> c'est très vite confronté a un problème de performance.
J’ai tenté de l’aider a migrer sur le context 3D afin qu’il bénéficie de l’accélération matériel.

Ce n’est pas la 1ère fois que j’observe la difficulté de la migration 2D à l’accélération matérielle des cartes graphique, même pour des personnes compétente avec les APIs vectoriel 2D.
La raison est, souvent, la précipitation … difficile de sans sortir lorsque l’on brule les étapes !

C’est pourquoi, j’ai proposé à Darkyl, mais également a toutes autre personnes intéressé par ce sujet (notamment Willpower), la création de ce topic, ayant pour but l’apprentissage des bases de la programmation graphique.
On procèdera par étape, je poserais un objectif à chaque étape sous la forme d’un exercice, je serais ouvert à répondre aux questions que dans le cadre l’objectif fixé (et également de la cadre de mes compétence sur le sujet, car je suis loin d’être un expert).

J’espère, ainsi, démocratiser l’utilisation de WebGL, car je sens bien qu’actuellement la sauce ne prend pas !

Etape 1 : Initialisation du context graphique WebGL.

Objectif : créer dans un document HTML5 un canvas de résolution 500x500 pixel, et le remplir d’une couleur de fond Vert.

Je vais donner quelque explications : lorsque l’on initialise une zone de rendu ( le canvas ) avec WebGL, la carte graphique va allouer dans sa mémoire vidéo, un certain nombre de buffer ayant la même résolution que la zone de rendu.
En WebGL on peut en manipuler 3 :

• COLOR_BUFFER_BIT : c’est en gros le raster de la zone de rendu il contient, pour chaque pixel, la couleur, c’est celui-ci que je souhaite vous faire manipuler en 1er lieu !
• DEPTH_BUFFER_BIT : ou plus souvent appelé ZBUFFER, il contient, pour chaque pixel, la profondeur. Nous verrons beaucoup plus tard son utilité.
• STENCIL_BUFFER_BIT : ce buffer contient, pour chaque pixel, un masque. Ces masques servent principalement à restreindre la zone de rendu.

Re,

comment tu veux qu'on fonctionne?
On essaye de faire ce que tu dis et on met le source de ce qu'on as fait?
(je parle pas des questions qu'on aurait évidemment)

:ccool:

J'ai joué un peu sur la tonalité du vert pour ne pas qu'il soit trop flash. ;)

Citation:

---

Envoyé par Darkyl

Re,

comment tu veux qu'on fonctionne?
On essaye de faire ce que tu dis et on met le source de ce qu'on as fait?
(je parle pas des questions qu'on aurait évidemment)

---

Oui ! Ce serai bien placer la réponse dans une balise spoil je ne sais pas si c’est possible sur ce forum ? bon j’imagine que cet étape 1 ne risque pas de générer un long débat tellement la réponse est trivial :mrgreen:

J’ai aussi oublié de préciser que, sauf contre-indication, on se limitera au périmètre définis par les spécifications WebGL du groupe Khronos sans utiliser de librairie JS additionnel !

Ok pour la spécification

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

function initWebGL(objet_parent,couleur_effacement,x,y,width,height) {   if (verif_erreur_initWebGL(objet_parent,couleur_effacement,x,y,width,height)==false) { //Creation du canvas var nom_canvas=retournenomdom('canvas'); if (objet_parent!='body') { objet_parent='#'+objet_parent; }   $(objet_parent).append("<canvas id='"+nom_canvas+"' name='"+nom_canvas+"' style='position:absolute;display:block;top:"+x+"px;left:"+y+"px;width:"+width+"px;height:"+height+"px;'></canvas>");   var canvasElement=document.getElementById(nom_canvas);   //On initialise le canvas gl en l'attribuant à canvasElement var gl_temp = canvasElement.getContext("experimental-webgl");   //On initialise la couleur de nettoyage du canvas gl_temp.clearColor(couleur_effacement[0],couleur_effacement[1],couleur_effacement[2],couleur_effacement[3]);   //On nettoie le canvas gl_temp.clear(gl_temp.COLOR_BUFFER_BIT);   return gl_temp; } }

---

puis

Code:

---

1 2 3

<script type="text/javascript"> gl=initWebGL('body',[0.0, 1.0, 0.0, 1.0],0,0,500,500); </script>

---

Mais j'ai quand même une question :aie:
Pourquoi ça ça marche pas:

Code:

---

1 2 3

gl_temp.COLOR_BUFFER_BIT=[0.0, 1.0, 0.0, 1.0]; ou même : gl_temp.COLOR_BUFFER_BIT=(0.0, 1.0, 0.0, 1.0);

---

?

Et on râle pas dans l'assemblée... Je vais poser beaucoup de question con :ccool:

Tu es sûr que tu obtiens du vert avec ça ? Flute, j'aurais dit que tu obtenais du rouge. :-o

heu oui tu as raison, (0.0, 1.0, 0.0, 1.0) plutôt...

Citation:

---

Envoyé par Darkyl

Mais j'ai quand même une question :aie:
Pourquoi ça ça marche pas:

Code:

---

1 2 3

gl_temp.COLOR_BUFFER_BIT=[0.0, 1.0, 0.0, 1.0]; ou même : gl_temp.COLOR_BUFFER_BIT=(0.0, 1.0, 0.0, 1.0);

---

---

L’api GL a été développé, a la base, pour le langage C ! Donc contrairement à DirectX, cet API n’est pas orienté objet, elle se base sur le principe de machine à état ... si tu parcours rapidement l’IDL WebGLRenderingContext , tu verras qu’il est essentiellement composé par des constantes, énumérant les états et de peu de fonctions !

Donc gl.COLOR_BUFFER_BIT n’est pas une propriétée mais un identifiant d’etat !

Donc rien qu’a cause de cette question j’insert l’étape 2 suivante :

Etape 2 – Initialisation du FrameBuffer, ZBuffer et StencilBuffer de la carte graphique
Objectif : toujours à partir d’un canvas de résolution 500x500 pixel je souhaite que vous remplissez les 3 buffers de la carte graphique de la manière suivant :

• FrameBuffer : avec du rouge ! (pour changer un peu )
• ZBuffer: avec la valeur Reel 0.1
• StencilBuffer : avec la valeur 10

Et cela en utilisant au maximum que 4 appels de fonction a partir du context GL !

heu, sans vouloir t'embêter, tu peux marquer la réponse à l'exo précédent? parce que je suis pas sûr de mon :

Code:

---

var gl_temp = canvasElement.getContext("experimental-webgl");

---

Sinon, pour l'exo en cours, heu, c'est quoi les fonctions à utiliser? Je vais pas les inventer :aie: et j'ai beau lire la doc en anglais...j'ai du mal.

Il faut peut-être regarder du côté de clear.

ouai c'est ce que j'ai fait, mais j'arrive à rien.

J'ai même essayer

Code:

---

gl_temp.bindBuffer(gl_temp.COLOR_BUFFER_BIT,(1,0,1,0));

---

Mais j'ai pas encore compris la philo générale et comme je trouve pas les fonctions, je risque pas d'aller loin. Mais laissons le temps au temps, je continue ma prospection, on verra dans le corrigé mais ce serait cool d'avoir un petit cours succinct avant d'attaquer les exo...

Pourtant j'aime bien chercher les solutions et exemples sur internet ;).
Aprés jui pas trés patient comme personne non plus :aie:

Sinon pour revenir au exo, je pense que c'est avec bindBuffer...

Citation:

---

Sinon pour revenir au exo, je pense que c'est avec bindBuffer...

---

Arf ! NON tu t’égare la !
la solution est très proche de l’exo 1, a cet étape tu réussi a remplir le FrameBuffer avec la couleur verte, donc reste dans la même philosophie que l’exo 1 ,car tu as dans celui-ci 2 des fonctions sur les 4 demandé !

Bon ben j'y suis pas arrivé, j'attends la réponse avec impatience...
Des questions viendront ensuite. :aie:

Comme la suggéré vermine la réponse est bien du coté des fonctions clear :

Code:

---

1 2 3 4

void clear(GLbitfield mask); void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha); void clearDepth(GLclampf depth); void clearStencil(GLint s);

---

Je ne pensais pas te sécher sur les fonctions à trouver, mais plutôt sur la limitation de 4 appels. Si tu regarde bien la signature de la fonction clear, elle a pour paramètre un argument nommé mask de type GLbitfield (qui se traduit en français par champ de bit).
Maintenant si tu regarde de plus près les valeurs des identifiants des buffers. On peut remarquer que ce sont toutes des puissances de 2, c'est-à-dire que leurs valeurs binaires n’utilisent qu’un seul bit à 1 :

Code:

---

1 2 3 4

/* ClearBufferMask */ const GLenum DEPTH_BUFFER_BIT = 0x00000100; // en binaire 0000 0000 0000 0000 0000 0001 0000 0000 const GLenum STENCIL_BUFFER_BIT = 0x00000400; // en binaire 0000 0000 0000 0000 0000 0100 0000 0000 const GLenum COLOR_BUFFER_BIT = 0x00004000; // en binaire 0000 0000 0000 0000 0100 0000 0000 0000

---

On peut donc les combiner grâce à des opérations arithmétiques de l’algèbre de Boole.

La réponse à l’étape 2 est donc :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<html> <head> <script type="text/javascript"> function Init() { var gl = document.getElementById("Render").getContext("experimental-webgl",{stencil: true }); gl.clearColor(1.0, 0.0, 0.0, 1.0); gl.clearDepth(0.1); gl.clearStencil(10); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT); } </script> </head> <body onload="Init()" style="border: 0;margin : 0; padding: 0; text-align : center"> <canvas id="Render" style="border: none; width: 500px; height: 500px"></canvas> </body> </html>

---

Darkyl, je viens de percuter que tu es autodidacte, j’imagine que tu n'a jamais eu à manipuler les bits avec les operateurs binaires (&, |, ^, ~, <<, >>, >>>), ces operateurs sont disponibles en JavaScript, tu devrais les étudier un peu …

Edit : je me suis trompé,sorry :ave:, par défaut WebGL n’utilise pas de StencilBuffer ! Pour l’utiliser il faut le paramétrer lors de la récupération du context WebGL avec getContext("experimental-webgl",{stencil: true });

OK passons aux choses sérieuses ! Nous allons nous intéressé, maintenant, à la fonctionnalité de traçage vectoriel !
WebGL ne sais tracer que 3 type de primitives :

• Des points gl.POINTS
• Des lignes gl.LIGNES
• Des triangles gl.TRIANGLES

Et OUI ! Contrairement à l’API 2D de canvas on ne peut pas tracer des courbes sur une carte graphique !

Toutes ces primitives ce partage une notion essentiel … : les SOMMETS (ou vertex en anglais) !

• Pour le traçage de points la carte graphique rendra le pixel associé à la position de un sommet.
• Pour le traçage de lignes la carte graphique rendra tous les pixels se situant sur le segment compris entre 2 sommets
• Pour le traçage de triangles la carte graphique rendra tous les pixels se situant sur la surface compris entre 3 sommets

Lorsque l’on cherche à rendre une séquence de primitive, on déclenche sur la carte graphique toute une procédure que l’on appelle pipeline de rendu (ou pipeline 3D), le point d’entré de ce pipeline est un ensemble de sommets. Il faut donc mettre à disposition dans la mémoire vidéo de la carte graphique nos sommets, cette zone mémoire est très souvent appelé VertexBuffer.

WebGL n’impose aucune structure pour définir un SOMMET. A nous développeurs de décider la structure pour un VertexBuffer , car tous les sommets d’un VertexBuffer doivent posséder la meme structure. Mais chaques VertexBuffer peuvent posséder des structures différentes !

Alors que doit-on mettre dans un sommet ? … ben différentes constantes permettant de le positionner dans l’espace, on peut également y associer une ou plusieurs couleurs. Par exemple pour mon extension Three.js, permettant d’animer des models 3D skinnés , j’ai du ajouter a la structure des sommets un index permettant de l’assigner a une articulation du squelette.
Point essentiel : J’ai utilisé le terme "constante" pour les différents attributs d’un sommet, car une fois définis est envoyés a la carte graphique nous n’y toucherons plus. Pourquoi ? Parce que le transfert de données entre la RAM et VRAM peut être couteux en terme de performance!


Bon passons a l’étape suivante :

Etape 3 – Constitution des données Géometriques

Objectif : alloué dans la mémoire de la carte graphique un VertexBuffer contenant 72 sommets, la structure des sommets dans ce VertexBuffer se limitera a un seul attribut, un nombre réel a simple précision ( float 32 bit). Ce VertexBuffer contiendra la suite arithmétique de premier terme 0.0 et de raison 5.0 !

Quelques indications supplémentaires au sujet de cet objectif : toutes les valeurs de la suite arithmétique appartiennent à l’ensemble des entiers ! Alors pourquoi utiliser un typage réel ? WebGL permet de définir d’autre typage pour le VertexBuffer (voir l’exemple III de chez Khronos), mais dans la pratique les implémentations actuel de WebGL digèrent mal tous autre type que des float ! Mon but initial été d’utiliser un type unsigned short (16 bit) ce qui aurai permis de diviser par 2 la taille du VertexBuffer.

Re,

Merci de continuer ton cours.
J'ai fait cela :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function suite_arit(gl) { var pointsBuffers = {};   var point_n=0.0;   for (var i=1; i<73; i++) { var point = point_n+5.0; point_n=point;   var point_buffer=[point_n];   pointsBuffers.positionBuffer = pointsBuffers.positionBuffer+gl.createBuffer(point_buffer); }   return pointsBuffers; }

---

Mais j'ai des doutes quant à l'addition du buffer (pour rajouter un point).
Puis,

Citation:

---

un nombre réel a simple précision ( float 32 bit)

---

Heu j'ai jamais spécifier un type en javascript et encore moins la précision de ce type...
Donc, je sais pas si j'ai fait ce qu'il fallait. :aie:

Je suis en train de me renseigner sur les opérations de bit...

Il faut que tu étudie, de plus près, l’exemple III des specs WebGL !

On peut, avec HTML5 utilisé des tableaux typés, dans l’exemple de Khronos il prépare sont VertexBuffer dans la RAM et ajoute 100 sommets ayant pour structure : 3 flottants pour la position (x, y, z) et 4 octets non signés pour la couleur (r, g, b, a).

Il faut donc pratiquer le même principe, il te faut allouer et remplir ton VertexBuffer en RAM avec les ArrayBuffer puis transférer celui-ci dans la VRAM (mémoire vidéo de la carte graphique) !

C’est très important que tu comprennes cette étape ! Bon courage :ccool: tu vas réussir cet objectif ;)

p3ga5e, merci beaucoup pour tes précisions.

J'y bosse encore, j'ai pas mal de truc à résoudre par ailleurs, donc je donnerai ma réponse et mes questions (:aie:) demain.

Mais tu as raison, je vais y arriver (d'autant que oui, c'est l'étape la plus importante).
:ccool: