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

**p3ga5e** · 15/06/2012, 10h56

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.

**Darkyl** · 15/06/2012, 13h17

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)

**vermine** · 15/06/2012, 13h46

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

**p3ga5e** · 15/06/2012, 14h29

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

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 !

**Darkyl** · 15/06/2012, 14h43

Ok pour la spécification

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pourquoi ça ça marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**vermine** · 15/06/2012, 14h55

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

**Darkyl** · 15/06/2012, 14h59

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

**p3ga5e** · 15/06/2012, 15h23

Envoyé par Darkyl

Mais j'ai quand même une question

Pourquoi ça ça marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Darkyl** · 15/06/2012, 16h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et j'ai beau lire la doc en anglais...j'ai du mal.

**vermine** · 15/06/2012, 17h55

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

**Darkyl** · 15/06/2012, 18h43

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

J'ai même essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**p3ga5e** · 15/06/2012, 19h12

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é !

**Darkyl** · 16/06/2012, 13h07

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

**p3ga5e** · 16/06/2012, 18h49

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

, 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 });

**p3ga5e** · 17/06/2012, 14h11

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.

**Darkyl** · 17/06/2012, 15h07

Re,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

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.

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

**p3ga5e** · 17/06/2012, 19h48

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

tu vas réussir cet objectif

**Darkyl** · 18/06/2012, 13h27

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 (

) demain.

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

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

JavaScript

Discussions similaires

Partager

Partager