Discussion :

[p3ga5e]

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]

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]

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

[p3ga5e]

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]

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]

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

[Darkyl]

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

[p3ga5e]

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]

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.