Discussion :

[p3ga5e]

Ta réaction face à WebGL, ne présage rien de bon pour l’avenir de cette technologie, car elle semble partagée par de nombreux développeurs Web.

Il n’y pourtant rien d’effrayant ! Certes les concepts sont plus éloignés du "Turtle programming" ( que l’on apprend en primaire, d’ailleurs es ce toujours le cas ?) que l’API canvas 2D.

De plus le pipeline de rendus graphique programmable par shader a énormément simplifié le concept, qui schématiquement est le suivant :

1-Constitution d’un VertexBuffer : comme son nom l’indique il s’agit de définir les propriétés statiques de chaque sommet, comme ca position (vecteur [x,y,z]) ces coordonnées de textures (vecteur [u,v]), des couleurs émissive, diffuse , etc .. .

Code :

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

1
2
3
4
5
6
7
8
9
var quadVertexBuffer = gl.createBuffer();  
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexBuffer);  
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
[ //  x     y     z     u     v
    -1.0, -1.0,  0.0,  0.0,  0.0, //sommet bas gauche
     1.0, -1.0,  0.0,  1.0,  0.0, //sommet bas droit
     1.0,  1.0,  0.0,  1.0,  1.0, //sommet haut droit
    -1.0,  1.0,  0.0,  0.0,  1.0  //sommet haut gauche
]), gl.STATIC_DRAW);

2- L’écriture d’un vertex shader, c’est la phase de projection 3D -> 2D ce microprogramme ecrit en GLSL s’exécute sur tous tes sommets de manière parallèle, les propriétés sont accessibles par les variables global de type attribute .
Pour la 3D isométrique la matrice de projection semble être la suivante :
Cela donnera un vertex shader s’approchant de ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
attribute vec3 position;
#define K1 0.70710678118654752440084436210485 // sqrt(2)/2
#define K2 0.40824829046386301636621401245098 // 1/sqrt(6)
#define K3 0.81649658092772603273242802490196 // sqrt(2/3)
 
void main(void) 
{
	mat3x2 projection = mat3x2( K1, -K1, 0.0,  -K2, -K2 , K3);
	gl_Position = projection * position 
}

je te conseil de toujours résoudre tes équations linéaire par des solutions géométrique, car le calcule matriciel est également parallélisé sur GPU.


3- L’écriture d’un pixel ou fragment shader, ce microprogramme écrit en GLSL s’exécute, de manière parallèle, sur tous les pixels de ton canvas afin de déterminer la couleur de celui-ci.
Pour un rendu flat bleu :

Code :

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

1
2
3
4
void main(void) 
{				     //  R    G    B    A
	gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);// couleur bleu
}

4- Boucle de rendu :
a chaque rendu tu doit, en gros:

• activer le couple de shader (vertex et pixel) avec gl.useProgram
• activer le vertexbuffer avec gl.bindBuffer
• mapper les attributs du vertex shader à partir du vertexbuffer avec gl.vertexAttribPointer
• définir les éventuels variable uniform de tes shader ( par exemple la texture à utiliser ) avec gl.uniform*
• rendre tes polygones avec gl.drawArrays ou gl.drawElements,
  je te conseil d’utiliser drawElements, cela semble plus fastidieux à mettre en place, mais cela permet de réutiliser un même sommet pour plusieurs triangles.

Sur quel aspect bloque tu ? je suis pas vraiment intéressé par la conception d’un moteur 3D iso, mais je peux, éventuellement, t’aider à comprendre les principe de base de rendu WebGL, bien que je ne suis pas un expert ...

[Watilin]

Pour tes histoires de montagnes, à tout hasard, est-ce que tu connais l'option destination-over ? Ca peut peut-être te donner des idées...

Sinon, il y a une indication que je n'avais pas traduite dans le lien que je t'ai donné l'autre fois, c'est :

Use multiple layered canvases for complex scenes.

En gros il s'agit « d'empiler » les canvas. Pour comparer, je ne sais pas si tu as déjà joué avec les options d'affichage d'un émulateur Snes ou GBA (c'est à peu près le même moteur graphique). Il y a plusieurs couches d'affichage, et tu peux les désactiver séparément. Les éléments les plus hauts sont placés sur la couche la plus haute.
En reprenant le principe, tu pourrais te faire 2 ou 3 canvas, un pour le sol, un pour les montagnes, et pourquoi pas un pour les personnages et autres objets.

[Darkyl]

Merci de vos réponses.
Alors,
Watilin

l'option destination-over

Oui, ça j'avais essayé.

Use multiple layered canvases for complex scenes.

J'étais aller voir... Le problème c'est que dans l'idéal il faudrait que chaque case soit indépendante. Donc j'aurais x*y canvas... Et je pense retomber dans les problèmes que j'avais eu au départ (concernant x*y image()), plomber le DOM.

Quant à faire un tri et optimiser en temps réel le nbre maximum de calque pour afficher la map, je vais solliciter le GPU...

Merci beaucoup en tout cas.

Tout ça pour dire quoi?
Ben que je me suis mis à Webgl .
Je galère très beaucoup (pour rester poli) mais j'arrive à afficher x*y carré en 3d (enfin c'est des carré, pas des cubes, pas besoin pour le terrain)...
Mais là je galère sur la caméra, c'est à dire, qu'au delà des fonctionnalités de zoom et de rotation, je voudra changer la vision par default de toute la scène...
Et j'y arrive pas. Mais je suis confiant.

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
function initWebGL(canvasElement) {
       gl = new WebGL(canvasElement);
 
        gl.setShaderProgram("VARYING_COLOR");
 
      }
 
 
 
 
	    function OnGLCanvasCreated(canvasElement, elementId) {
        window.setTimeout(function () { initWebGL(canvasElement);init_map(gl);affiche_case(gl); }, 1000);
      }
 
      function OnGLCanvasFailed(canvasElement, elementId) {
        alert("Votre butineur ne supporte pas WebGL !");
      }

puis

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
   function affiche_case(gl) 
	{
        gl.clear();
 
		for (var i in quadrillage_map)
		{
			triangleBuffers=quadrillage_map[i].buffer;
 
			gl.setShaderProgram("VARYING_COLOR");
 
			gl.perspective(45, 0.1, 100.0);
			gl.identity();
			gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);
 
			gl.pushPositionBuffer(triangleBuffers);
 
			gl.pushColorBuffer(triangleBuffers);
 
			gl.drawElements(triangleBuffers);
 
		}
 
     }

et enfin

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
29
30
31
32
33
34
35
36
37
38
39
40
41
function initBuffers(gl) {
        var triangleBuffers = {};
        triangleBuffers.positionBuffer = gl.createArrayBuffer([
           -1, -1, 0.5,
           -1, 1, 0,
           1, 1, 0,
 
		   1, 1,  0,
          -1, -1, 0,
           1, -1, 0
 
        ]);
 
        var colors = [
          [0, 0, 1, 1], // Front face - Pink
          [0, 0, 1, 1], // Back face - Green
          [0, 0, 1, 1], // Top face - Blue
 
          [1, 0, 0, 1], // Bottom face - Turquoise
          [1, 0, 0, 1], // Right face - Yellow
          [1, 0, 0, 1], // Left face - Red
 
 
        ];
 
 
 
        var colorVertices = [];
        for (var n in colors) {
          var color = colors[n];
          colorVertices = colorVertices.concat(color);
        }
 
		triangleBuffers.colorBuffer = gl.createArrayBuffer(colorVertices);
 
	    triangleBuffers.indexBuffer = gl.createElementArrayBuffer([
          0, 1, 2, 0, 2, 5        
        ]);	
 
        return triangleBuffers;
      }

p3ga5e, je pensais partir sur aucun calcul et laisser tout faire à webgl en passant par la camera...

Mon moteur d'affichage sera entièrement calculé en 2d puis passera à la moulinette webgl. heu non?

Code :

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

1
2
3
4
5
6
7
8
9
var quadVertexBuffer = gl.createBuffer();  
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexBuffer);  
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
[ //  x     y     z     u     v
    -1.0, -1.0,  0.0,  0.0,  0.0, //sommet bas gauche
     1.0, -1.0,  0.0,  1.0,  0.0, //sommet bas droit
     1.0,  1.0,  0.0,  1.0,  1.0, //sommet haut droit
    -1.0,  1.0,  0.0,  0.0,  1.0  //sommet haut gauche
]), gl.STATIC_DRAW);

J'ai mis un temps fou à comprendre comment été représenté les coords dans ce systéme.

Merci d'avoir partagé tes connaissances.

D'ailleurs que ce soit la vue et le zindex, c'est webgl qui gère tous ça. non?

Bref, j'essaye de faire un truc vraiment pas compliqué, mais je vais y arriver.

[p3ga5e]

Houla ! Tu es parti, tète baissé, un peu dans tous les sens ! Je comprends ton envi d’obtenir rapidement un résultat, mais cherche avant tout, a comprendre les bases, sinon tu risque a avoir de sacres migraines

Ton code est trop complexe ! Tu fais beaucoup trop d’opérations dans ta boucle de rendus ! Le but étant d’en faire le moins possible en javascript (CPU mono-thread) et faire bosser un max la carte graphique ( GPU multi-cores) ! donc limite ton rendu de terrain en un seule appel a drawElements en ajoutant tous tes sommets dans ton VertexBuffer. N’es pas pas peur d’utiliser la mémoire vidéo le minimum de VRAM pour WebGL ne doit pas être inferieur 128 Mo, pour avoir déjà travaillé sur des moteur graphique limiter par un VRAM de 4 Mo , 128 Mo c’est l’Amérique

J'ai mis un temps fou à comprendre comment été représenté les coords dans ce systéme.

Malheureusement celui-ci dépend énormément du vertex shader, il te faut donc maitriser le vertex shader avant toute chose !

D'ailleurs que ce soit la vue et le zindex, c'est webgl qui gère tous ça. non?

La carte graphique utilise, un chose bien plus puissante, le zbuffer, c’est en gros, pour schématiser, un zIndex pour chaque pixel rendu ! Bref tu as pas te soucier de l’ordre d’affichage de tes objets, la carte graphiques fait le job pour toi ! ( saufe si tur rend des objet tranparent !).

[Darkyl]

Je vais faire ce que tu m'as dit pour appeler une seule fois drawElements.

J'arrive pas à passer en 3d iso. Je m'explique; pour l'instant j'ai mes carrés affiché vu de dessus. Donc il faut que je calcul les coord de tous les points en fonction de ma vue.

Je suppose que ca se joue là :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
triangleBuffers=quadrillage_map[i].buffer;
 
			gl.setShaderProgram("VARYING_COLOR");
 
			gl.perspective(45, 0.1, 100.0);
			gl.identity();
			gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);
 
			gl.pushPositionBuffer(triangleBuffers);
 
			gl.pushColorBuffer(triangleBuffers);
 
			gl.drawElements(triangleBuffers);

Mais je trouves pas quoi faire.
Je comprend pas pourquoi mes points sont stocké en relative (toujours de -1 à 1), puis placé.
En 2d, je transformé mes coord 2d en coord 3d avec une fonction mais là je vois pas trop.

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
function transf_coord_2d_en_3d_iso(x_2d,y_2d)
{
 
	//var distance_a_l_origine=Distance(milieu_map.x, milieu_map.y, x_2d, y_2d);	
 
	var coord_3d_iso=new Object();
 
	var alpha_radian_x=angle_en_radian(alpha_x);
	var alpha_radian_y=angle_en_radian(alpha_y);
	//alert(alpha_x+' : '+alpha_radian);
	coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y));
	coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));
 
	return coord_3d_iso;
}

[p3ga5e]

Je comprend pas pourquoi mes points sont stocké en relative (toujours de -1 à 1), puis placé.

Rien n’est imposé ! ici tu as créé une un carré de dimension 2x2 ayant pour repère son centre, ensuite tu le duplique en modifiant ce repère par diferentes matrices avec tes fonctions gl.perspective et gl.translate. ces fonctions sont un peu obsolètes elle sont dispos uniquement pour garder rétrocompatibilité du code avec le pipeline fixe Gl 1.0. Donc oublis ça pour le moment !

Il est préférable d’exprimer tous tes sommets de ton terrain, en 3D, dans le repère monde, et écrire ton vertexshader uniquement pour ta projection isométrique !

Code :

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

1
2
coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y));
coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));

voir ce code, me fait penser que tu as oublié une étape primordial, avant d’écrire ton moteur graphique constitue toi une librairie mathématique pour le calcul matriciel ou réutilise une Lib existante ! Pour moi c’est le critère principal pour le choix d’un moteur graphique.

Sinon pour en revenir au sujet principal, j’ai écrit ceci pendant ma pause déjeuné !

[MaitreKaio]

Cette discussion est devenue très technique ! Trop pour moi qui ne me suis pas encore intéressé du tout à WebGL.
Par contre, j'ai souvent lu qu'il était quand même beaucoup plus simple de passer par une bibliothèque du style Three.js
Que ceux qui connaissent mieux le sujet que moi donnent leur avis

[Darkyl]

p3ga5e

Code :

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

1
2
coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y));
coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));

Je comprend bien qu'il vaille mieux se faire une biblio perso. Je m'en suis déjà faite, mais, tu as raison il me faudrait celle d'addition de matrice, de multiplication de matrices...

Parce que dans

Code :

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

1
2
3
4
5
6
7
8
9
10
11
triangleBuffers=quadrillage_map[i].buffer;
 
			gl.setShaderProgram("VARYING_COLOR");
 
			gl.perspective(45, 0.1, 100.0);
			gl.identity();
			gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);
 
			gl.pushPositionBuffer(triangleBuffers);
 
			gl.pushColorBuffer(triangleBuffers);

Il faut que j'additionne tous les triangleBuffers pour constituer ma scene et que je les affiche non?

Code :

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

gl.drawElements(toustriangleBuffers);

Mais ça, jy arrive pas (n'ayant pas la biblio), si tu en as une , je suis preneur.

Sinon pour en revenir au sujet principal, j’ai écrit ceci pendant ma pause déjeuné !

J'ai étudié, et mon image perso ne s'affiche pas,

Code :

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

WebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter not requiring a mipmap, with its width or height not a power of two, and with a wrap mode different from CLAMP_TO_EDGE.

De plus, je cherche à me placer en 3d iso, ta vue reste du dessus.
J'ai bien trouvé un exemple d'affichage 3d iso mais je comprend pas.

Sinon, three.js, j'ai essayer longuement mais pareil, j'ai pas compris... Avec leurs exemples de moteur 3d iso, j'ai mon axe des z qui s'inverse avec mon axe des y. Bref, elle à l'air pas mal cette librairie mais je préfère apprendre de la base.

Donc je continue mes essais...

[p3ga5e]

j'ai souvent lu qu'il était quand même beaucoup plus simple de passer par une bibliothèque du style Three.js
Que ceux qui connaissent mieux le sujet que moi donnent leur avis

Three.js est un excellent moteur 3D car il tire, énormément parti, des spécificités du langage JavaScript, son architecture est simple et très customisable. Par contre il manque cruellement d’une documentation !

Il faut que j'additionne tous les triangleBuffers pour constituer ma scene et que je les affiche non?

Je pense qu’il faut ajouter tous tes sommets dans un seul VertexBuffer !
Le vertex buffer ne définit pas les polygones mais juste les sommets. gl.drawElements permet de rendre tes polygones en travaillant avec un IndexBuffer , ce buffer est un tableau d’entier positif contenant la séquence d’indice des sommets

Code :

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

1
2
3
4
5
6
7
8
// creation de l'IndexBuffer d'un quadrilatere !
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array([0, 2, 1, 3]), gl.STATIC_DRAW); 
 
//Rendu  du quadrilatere
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_SHORT, 0);

Tu disposes que de 3 primitives en WebGL te permettant de créer un polygone gl.TRIANGLES, gl. TRIANGLE_STRIP et gl.TRIANGLE_FAN :

Malheureusement tu n’as pas droit au QUAD …

mon image perso ne s'affiche pas

vérifie la résolution de ton image, elle doit obligatoirement être une puissance 2 ( 8,16, 32 … etc. )

J’ai mon axe des z qui s'inverse avec mon axe des y.

C’est repère habituel dans les moteur 3D, car c’est celle qui est le plus proche du repère dans lequel fonctionne les carte graphique. Au finale seule le repère de la carte graphique compte ! C’est à dire le résultat du ton VertexShader : le vecteur gl.Position qui est exprimé dans le repère suivant :

Comme tu peux le voir la carte graphique travail dans un espace de nombre Réel normalisé, quel que soit la résolution pixel est l’aspect ratio de ton canvas. Il te faudra donc prendre en compte le problème de l’aspect ratio dans l’écriture de la projection ou travailler sur un canvas carré .

mais je préfère apprendre de la base.

Heureux de te l’entendre dire ! Oubli pour le moment l’api GL et concentre toi plutôt sur les concepts des Shaders, c’est la que tout ce passe !
As-tu compris les différence entre les attributs, les variables uniform et les variables varying ?
les varying doit certainement être le concept le plus dur a assimiler quand on débute.

[MaitreKaio]

@ p3ga5e Tu sais que tu vas bientôt pouvoir écrire un tuto rien qu'avec les réponses que tu donnes ici ?

[Darkyl]

C'était mon idée (le tuto), de me servir de ce topic comme base pour un tuto "Webgl pour les nuls" .

Bonne idée MaitreKaio.
Mais attend, j'ai encore plein de questions...

Là j'essaye de suivre la logique de la dernière réponse de p3ga5e (ma foi, très bien commentée et illustrée, ).
Merci de m'aider à comprendre les bases de la 3d gérée grâce à webgl...

La suite dans pas longtemps...

D'ailleurs pour ceux que cela intéresse : un autre topic où p3ga5e nous éclaire de ses connaissances : topic

[Darkyl]

Bon, l'explication commence...
Dans ton source:

Code :

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

1
2
3
4
5
6
7
8
9
try 
	{
		gl = document.getElementById("Render").getContext("experimental-webgl");
	} catch(e) 
	{}
 
	if (!gl) 
		alert("Could not initialise WebGL, sorry :-(");
	else

OK, cela nitialise le contexte WebGl et attribut l'objet canvas Render à gl. Jusque là c'est cool

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
// compilation des shaders
		var vertexShader = gl.createShader(gl.VERTEX_SHADER);
		gl.shaderSource(vertexShader, document.getElementById('vertexshader').textContent);
		gl.compileShader(vertexShader);
 
		var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
		gl.shaderSource(fragmentShader, document.getElementById('fragmentshader').textContent);
		gl.compileShader(fragmentShader);
 
		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);
 
		// activation des shaders
		gl.useProgram(shaderProgram);
 
		shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "position");
		gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
 
		shaderProgram.textureUniform = gl.getUniformLocation(shaderProgram, "texture");
		shaderProgram.timeUniform = gl.getUniformLocation(shaderProgram, "time");

Ca, c'est la partie où tu règle le contexte 3d, si je ne m'abuse.
Là j'ai pas encore tout compris.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// creation d'un vertexShader contenant uniquement des coordonnées de texture 2D 
		vertexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
		[ //  u     v
			 0.0,  0.0, //sommet bas gauche
			 0.0,  1.0, //sommet haut gauche
			 1.0,  0.0, //sommet bas droit
			 1.0,  1.0  //sommet haut droit
 
		]),  gl.STATIC_DRAW);
 
		vertexBuffer.itemSize = 2; 
		vertexBuffer.numItems = 4;

Ca c'est la partie où tu crée un carré (en tout cas, 4 points).
C'est cela que je dois mettre en fonction et qui me créera mes cases de la map. Ca ok aussi.

Code :

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

1
2
3
4
gl.uniform1f(shaderProgram.timeUniform, time);
 
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexBuffer.numItems);

Ca c'est la partie où je bloque.
C'est normalement ici que le render et ses spécifications se fait mais j'arrive pas à lui changer la vue. Si je comprend bien le principe, il faut que j'applique cette matrice

Code :

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

1
2
3
4
5
6
7
8
9
10
attribute vec3 position;
#define K1 0.70710678118654752440084436210485 // sqrt(2)/2
#define K2 0.40824829046386301636621401245098 // 1/sqrt(6)
#define K3 0.81649658092772603273242802490196 // sqrt(2/3)
 
void main(void) 
{
	mat3x2 projection = mat3x2( K1, -K1, 0.0,  -K2, -K2 , K3);
	gl_Position = projection * position 
}

à chaque positionbuffer de tous les objets présents dans la scène (sommet)... J'ai essayé par des translate mais il me dit que translate n'est pas une fonction de gl, bizarre, j'aurais pourtant juré .

Donc en gros, quand tu créer ton carré, comment tu lui applique une position?
Et une fois cela fait, comment tu bouge la caméra? la matrice projection , tu la met où?

Ca c'est les deux points noirs que j'arrive pas du tout.
Aprés, concernant le rendu en une étape,
j'ai essayé cela:

Code :

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

1
2
3
4
5
6
scene_complete = {};
        scene_complete.positionBuffer = gl.createArrayBuffer([]);
 
		scene_complete.colorBuffer = gl.createArrayBuffer([]);
 
	    scene_complete.indexBuffer = gl.createArrayBuffer([]);

Puis

Code :

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

1
2
3
4
5
6
quadrillage_map[indice_temp].buffer=initBuffers(gl); 
 
			//scene_complete=scene_complete+quadrillage_map[indice_temp].buffer+quadrillage_map[indice_temp].buffer.;
			scene_complete.positionBuffer=ajouter_tableau_dans_tableau(scene_complete.positionBuffer,quadrillage_map[indice_temp].buffer.positionBuffer);
			scene_complete.colorBuffer=ajouter_tableau_dans_tableau(scene_complete.colorBuffer,quadrillage_map[indice_temp].buffer.colorBuffer);
			scene_complete.indexBuffer=ajouter_tableau_dans_tableau(scene_complete.indexBuffer,quadrillage_map[indice_temp].buffer.indexBuffer);

avec

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function initBuffers(gl) {
        var carreBuffers = {};
        carreBuffers.positionBuffer = gl.createArrayBuffer([
          -1, -1,0,
          -1, 1, 0,
           1, 1, 0,
 
		   1, 1, 0,
          -1, -1,0,
           1, -1,0
 
        ]);
		//gl.translate(matrice_projection);
 
        var colors = [
          [0, 0, 1, 1], // Front face - Pink
          [0, 0, 1, 1], // Back face - Green
          [0, 0, 1, 1], // Top face - Blue
 
          [1, 0, 0, 1], // Bottom face - Turquoise
          [1, 0, 0, 1], // Right face - Yellow
          [1, 0, 0, 1], // Left face - Red
 
 
        ];
 
 
 
        var colorVertices = [];
        for (var n in colors) {
          var color = colors[n];
          colorVertices = colorVertices.concat(color);
        }
 
		carreBuffers.colorBuffer = gl.createArrayBuffer(colorVertices);
 
	    carreBuffers.indexBuffer = gl.createElementArrayBuffer([
          0, 1, 2, 0, 2, 5        
        ]);	
 
        return carreBuffers;
      }

et enfin pour le rendu:

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
gl.save();
			gl.setShaderProgram("VARYING_COLOR");
 
			gl.perspective(90, 0.1, 1000.0);
			gl.identity();
 
			//perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
 
			gl.translate(1, 1, 40);
			//gl.translate(matrice_projection);
			//gl.rotate(Math.PI * 0.5, 1, 0, 0);
 
gl.pushPositionBuffer(scene_complete);
 
			gl.pushColorBuffer(scene_complete);
			gl.pushIndexBuffer(scene_complete);
 
			gl.drawElements(scene_complete);
			//gl.restore();

Mais cela ne marche pas... Pas d'erreur mais rien ne s'affiche.

Je sens que tu vas me dire que ce n'est pas la bonne philosophie à appliquer...

[Willpower]

N'ayez pas peur de continuer à pousser ce sujet jusqu'au bout, je le trouve hyper intéressant ! A suivre..

[p3ga5e]

Arf ! On n’arrivera à rien à continuer comme ca …

J’ai commencé à participer à cette discussion car je souhaite que WebGL prenne son essor, pour la seul raison que JavaScript est devenu mon Langage de programmation préféré !
J’aimerais donc que cette techno ce démocratise sur toute les plateformes (surtout les Smartphone) ! Malheureusement peu de développeurs web, s’intéresse à cette techno … apparemment cela est effrayant …

Vous parlez de tutoriaux … pour l’avoir déjà observé chez des débutants, je sais que cela ne sert à rien (surtout pour des débutants), car pour obtenir un résultat rapide ils combinent diffèrent tutos, et sans assimiler les bases cela ne sert a rien !
De part mon expérience, le meilleur apprentissage est de ce confronter au problème et de trouver par soi même la réponse !

Le problème de Darkyl c’est que tu fixe un objectif trop élevé, du coup tu te confronte a un trop gros nombre de problèmes, si tu persiste dans cette voie tu risque de lacher l’affaire rapidement ! par dégout. Pourtant je pense que tu possède les compétences nécessaires pour maitriser la programmation graphique via WebGL !

Donc je te propose a toi, et a tous ceux intéressé par WebGL, le deal suivant :
On reprend les bases de zéro… on créer un nouveau topic dans le lequel je poserais un objectif sous la forme d’un exercice ou chalenge, on procèdera ainsi, petit a petit, par des étapes simple ! Le but étant juste de vous faire assimiler les bases ! Ne vous attendez a pas a ce que je vous fasse comprendre comment on créer un moteur graphique , car moi-même j’en suis incapable !

Qu’en dites-vous ?

[Willpower]

Je suis intéressé !

(note tu dénigres les tutos à cause de ceux qui copy/pastes, mais ceux qui cherchent à faire par eux-même et trouvent la solution eux-même, trouvent souvent cette solution dans un tuto, sans ça on passe des heure à googler à la recherche d'une doc pas toujours claire et on finit par abandonner).


@Darkyl: désolé pour la déviation de sujet, et je voulais te dire que ton boulot est impressionnant.

[Darkyl]

Moi je suis partant... . Merci, d'avance d'avoir pris part au topic.

Si en plus, tu as le courage de faire un autre topic / cours, c'est royal. +1
Je suivrai avec rigueur, écouterai avec ferveur!



Heu, soi-dit en passant, j'arrive un petit peu mais je risque pas d'aller loin... Le hic, c'est qu'il faudrait que j'arrive à un moteur de rendu filaire en 3d d'ici une semaine grand max... Vous savez ce que c'est mais j'abandonnerai pas, je pense vraiment pas visée haut (à terme) et j'ai la foi.

WillPower, merci du compliment. Je déprime un peu dans mon coin là parce que j'avais bien avancé en 2d, j'étais content, mais alors le passage à la 3d, quand ca veut pas, ça veut pas
Donc j'apprécie le compliment.

Pour le débat sur les tutos ou pas, je suis plûtot pessimiste mais le hic, c'est que webgl est pas du tout mais pas du tout documenté donc c'est dur .
Sous prétexte qu'il faut connaître openGL, non mais...

[Watilin]

Malheureusement peu de développeurs web, s’intéresse à cette techno …

J’imagine que c'est parce que la plupart des développeurs web ne sont pas graphistes, et n’ont pas la motivation pour se former. Ceux qui s’intéressent à ces deux domaines ne sont pas nombreux… Et on les trouve tous sur ce forum !

[SpaceFrog]

J’imagine que c'est parce que la plupart des développeurs web ne sont pas graphistes, et n’ont pas la motivation pour se former.

J'ai bien essayé ... mais je confirme que c'est un métier à part.
Dans l'esprit c'est tout beau, une fois sur l'écran c'est autre chose ...
Je ne suis capable que de copier le graphisme des autres, mes productions sont pathétiques
Je laisse donc la graphisme aux graphistes avec beaucoup de frustration !

[p3ga5e]

Oula …Vous n’y êtes pas … WebGL ne s’adresse, certainement pas, a un graphiste. WebGl est une API pour interfacer les cartes graphiques et programmer sur le GPU. Cela s’adresse, donc, bien un développeur.

Les développeurs travaillant dans les métiers du Web (milieu que je ne connais pas) ne semble, guère avoir le profil d’électronicien, et ne semble pas habitués à travailler si bas niveau !

Il existe bien quelques moteur 3D basé sur WebGL ( Three.js, O3D, SceneJS, CopperLicht … ) mais difficile d’appréhender les techniques de rendu 3D sans posséder les bases de la programmation graphique. Les modèles mathématiques utilisés par les moteurs 3D semblent, également, poser un frein.

[Darkyl]

Je confirme qu'utiliser WebGL sans passer par une bibliothèque est compliqué pour un développeur non initié au bas niveau.

C'est comme l'assembleur pour quelqu'un qui n'est habitué qu'au langage haut-niveau (et encore c++ permet de gérer la mémoire à assez bas niveau me semble-t-il).

De ce fait, pour moi qui n'ai jamais manipulé les bits et autres bizarreries sortis des profondeurs de la machine, on se rend compte qu'on est bien loin d'un vrai développement... mais juste d'une façon de coder trés applicative. C'est comme un développeur qui utilise Jquery et qui pense être fort (de ce fait) en javascript...

Bref, on descend de son piédestal et on prend un cachet d'aspirine...
Depuis les cours de p3ga5e, ma femme me dit que la nuit, je me réveille soudain en disant: 'ils font ch..i..er avec leur 3D...'

C'est dire à quel point je suis traumatisé...

Mais, WebGL, pour peu que l'on y fasse un effort (et que l'on tombe sur un développeur qui ai la bonté de nous aider), vaut le coup..
Non seulement parce qu'il est encore temps d'être dans les précurseurs, mais aussi et surtout que son défaut (son bas niveau) en fait sa qualité (rapidité d'exécution), ce qui est primordial sur le net.