Three.js - Partie 2 - Comparaison avec WebGL

Donc pourquoi utiliser Three.js et pas juste WebGL? Quelles sont les différences entre les deux?

Comparons, par exemple, le code nécessaire pour générer un cube 3D en utilisant chaque technologie, fourni par la documentation de chacun.

Avec Three.js

Pour ajouter un objet 3D, il faut au minimum

• de l'information sur la géométrie de l'objet

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); //Longueur, Hauteur, Profondeur

• un matériel pour afficher l'objet

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

• Nous pouvons maintenant créer l'objet, puis l'ajouter à notre scène.

const cube = new THREE.Mesh( geometry, material );

scene.add( cube );

Et voilà!

Avec WebGL

Recommençons:

Il faut:

• Définir la position de chaque sommet de chaque face du cube

const positions = [
// Face avant
-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,

// Face arrière
-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,

// Face supérieure
-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,

// Face inférieure
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,

// Face droite
1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,

// Face gauche
-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
];

• Spécifier à WebGL que nous voulons un objet en 3 dimensions.

{
 const numComponents = 3;
 ...
 gl.vertexAttribPointer(
   programInfo.attribLocations.vertexPosition,
   numComponents,
   type,
   normalize,
   stride,
   offset);
 gl.enableVertexAttribArray(
   programInfo.attribLocations.vertexPosition);
}

• Créer un tableau de couleurs pour chaque face du cube, puis la convertir en tant que tableau pour chaque sommet de chaque face.

const faceColors = [
 [1.0, 1.0, 1.0, 1.0], // Face avant : blanc
 [1.0, 0.0, 0.0, 1.0], // Face arrière : rouge
 [0.0, 1.0, 0.0, 1.0], // Face supérieure : vert
 [0.0, 0.0, 1.0, 1.0], // Face infiérieure : bleu
 [1.0, 1.0, 0.0, 1.0], // Face droite : jaune
 [1.0, 0.0, 1.0, 1.0], // Face gauche : violet
];

// Conversion du tableau des couleurs en une table pour tous les sommets

var colors = [];

for (j = 0; j < faceColors.length; j++) {
 const c = faceColors[j];

 // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
 colors = colors.concat(c, c, c, c);
}

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 

• Tracer des triangles (2 par face) dans un tableau, en utilisant l'indice des positions du premier tableau

  const indexBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

 const indices = [
   0,  1,  2,      0,  2,  3,    // avant
   4,  5,  6,      4,  6,  7,    // arrière
   8,  9,  10,     8,  10, 11,   // haut
   12, 13, 14,     12, 14, 15,   // bas
   16, 17, 18,     16, 18, 19,   // droite
   20, 21, 22,     20, 22, 23,   // gauche
 ];

• Puis l'envoyer vers notre scène

 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
     new Uint16Array(indices), gl.STATIC_DRAW);

 return {
   position: positionBuffer,
   color: colorBuffer,
   indices: indexBuffer,
 };
}

Et voilà!

Conclusion

En utilisant des techniques analytiques avancées, nous pouvons déterminer que Three.js simplifie le développement graphique sur les navigateurs web par au moins 2 fois. Peut être 3 fois si on est généreux.

Cependant, l'avantage d'utiliser Three.js est que ces deux technologies ne sont pas mutuellement exclusives. Puisque Three.js n'est qu'une librarie, un développeur peut à tout moment décider de développer en WebGL pour avoir plus de granularité sur le résultat final de son projet, ou s'il veut vraiment développer un cube en 50+ lignes.

Source:

Créer des objets 3D avec WebGL - Les API Web | MDN. (n.d.). MDN Web Docs. https://developer.mozilla.org/fr/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL

three.js manual. (n.d.). https://threejs.org/manual/#en/fundamentals