Cet article est la suite d’une série d’articles sur WebGL2. Le premier a commencé par les bases et le précédent portait sur les textures.

Dans le dernier article, nous avons vu comment fonctionnent les textures et comment les appliquer. Nous les avons créées à partir d’images téléchargées. Dans cet article, au lieu d’utiliser une image, nous allons créer les données directement en JavaScript.

Créer des données pour une texture en JavaScript est assez simple selon le format de texture. WebGL2 supporte énormément de formats de textures. WebGL2 supporte tous les formats non dimensionnés de WebGL1

Ils sont appelés non dimensionnés car la façon dont ils sont réellement représentés en interne n’est pas définie dans WebGL1. Elle l’est dans WebGL2. En plus de ces formats non dimensionnés, il existe une foule de formats dimensionnés, notamment

Et également ces formats de profondeur et de stencil

Légende :

• un seul nombre comme 8 signifie 8 bits qui seront normalisés de 0 à 1
• un nombre précédé d’un s comme s8 signifie un nombre signé de 8 bits qui sera normalisé de -1 à 1
• un nombre précédé d’un f comme f16 signifie un nombre à virgule flottante
• un nombre précédé d’un i comme i8 signifie un nombre entier
• un nombre précédé de ui comme ui8 signifie un entier non signé

Nous n’utiliserons pas ces informations ici, mais j’ai mis en évidence les formats de textures à demi-précision et flottants pour montrer que contrairement à WebGL1, ils sont toujours disponibles dans WebGL2, mais ils ne sont pas marqués comme rendables en couleur et/ou filtrables par texture par défaut. Ne pas être rendable en couleur signifie qu’on ne peut pas faire de rendu vers eux. Le rendu vers une texture est couvert dans une autre leçon. Ne pas être filtrable par texture signifie qu’ils doivent être utilisés avec gl.NEAREST uniquement. Ces deux fonctionnalités sont disponibles comme extensions optionnelles dans WebGL2.

Pour chacun des formats, vous spécifiez à la fois le format interne (le format que le GPU utilisera en interne) et le format et le type des données que vous fournissez à WebGL. Voici un tableau indiquant quel format et type vous devez fournir pour un format interne donné

  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_BYTE                  </td><td>4  </td></tr>
  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_SHORT_4_4_4_4         </td><td>2  </td></tr>
  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_SHORT_5_5_5_1         </td><td>2  </td></tr>
  <tr><td>RGB                                             </td><td>RGB             </td><td>UNSIGNED_BYTE                  </td><td>3  </td></tr>
  <tr><td>RGB                                             </td><td>RGB             </td><td>UNSIGNED_SHORT_5_6_5           </td><td>2  </td></tr>
  <tr><td>LUMINANCE_ALPHA                                 </td><td>LUMINANCE_ALPHA </td><td>UNSIGNED_BYTE                  </td><td>2  </td></tr>
  <tr><td>LUMINANCE                                       </td><td>LUMINANCE       </td><td>UNSIGNED_BYTE                  </td><td>1  </td></tr>
  <tr><td>ALPHA                                           </td><td>ALPHA           </td><td>UNSIGNED_BYTE                  </td><td>1  </td></tr>

</tbody>

Créons une texture R8 de 3x2 pixels. Comme c’est une texture R8, il n’y a qu’une seule valeur par pixel dans le canal rouge.

Nous allons partir de l’exemple du dernier article. D’abord, nous allons modifier les coordonnées de texture pour utiliser toute la texture sur chaque face du cube.

// Remplir le buffer avec les coordonnées de texture du cube.
function setTexcoords(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        // face avant
        0, 0,
        0, 1,
        1, 0,
        1, 0,
        0, 1,
        1, 1,
        ...

Puis, nous allons modifier le code qui crée une texture

// Créer une texture.
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

-// Remplir la texture avec un pixel bleu 1x1.
-gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
-              new Uint8Array([0, 0, 255, 255]));

// remplir la texture avec 3x2 pixels
const level = 0;
const internalFormat = gl.R8;
const width = 3;
const height = 2;
const border = 0;
const format = gl.RED;
const type = gl.UNSIGNED_BYTE;
const data = new Uint8Array([
  128,  64, 128,
    0, 192,   0,
]);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
              format, type, data);

// définir le filtrage pour ne pas avoir besoin de mips et qu'il ne soit pas filtré
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

-// Charger une image de façon asynchrone
-...

Et voilà le résultat

Oups ! Pourquoi ça ne fonctionne pas ?!?!?

En vérifiant la console JavaScript, nous voyons une erreur comme celle-ci

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

Il s’avère qu’il y a un paramètre quelque peu obscur dans WebGL hérité du moment où OpenGL a été créé. Les ordinateurs vont parfois plus vite quand les données ont une certaine taille. Par exemple, il peut être plus rapide de copier 2, 4 ou 8 octets à la fois plutôt qu’un seul. WebGL utilise par défaut 4 octets à la fois, donc il s’attend à ce que chaque ligne de données soit un multiple de 4 octets (sauf pour la dernière ligne).

Nos données ci-dessus font seulement 3 octets par ligne, 6 octets au total, mais WebGL va essayer de lire 4 octets pour la première ligne et 3 octets pour la 2ème ligne pour un total de 7 octets, c’est pourquoi il se plaint.

Nous pouvons indiquer à WebGL de traiter 1 octet à la fois comme ceci

const alignment = 1;
gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);

Les valeurs d’alignement valides sont 1, 2, 4 et 8.

Je soupçonne que dans WebGL, vous ne pourrez pas mesurer de différence de vitesse entre des données alignées et non alignées. Je souhaiterais que la valeur par défaut soit 1 plutôt que 4 pour que ce problème ne surprenne pas les nouveaux utilisateurs, mais, afin de rester compatible avec OpenGL, la valeur par défaut devait rester la même. Ainsi, si une application portée fournit des lignes avec du rembourrage (padding), elle fonctionnera sans modification. En même temps, dans une nouvelle application, vous pouvez simplement toujours le définir à 1 et en avoir fini.

Avec ce paramètre, les choses devraient fonctionner

Avec ceci couvert, passons au rendu vers une texture.